首页 > 软件开发 > HTML >

如何进行html调试和js脚本调试

来源:互联网 2023-03-16 19:19:40 344

如今web开发越来越流行,越来越多的人参与到web开发中,在开发过程中难免会出现一系列意想不到的情况,调试,是程序开发必备的过程,web开发调试是在浏览器中进行,各个浏览器都会有相应的调试工具,其中热门的当属谷歌的chrome,和火狐的firebug工具.ciE办公区 - 实用经验教程分享!

工具/原料

  • chrome浏览器,Mozilla firefox

方法/步骤

  • 1

    本人先已chrome为例,首先打开需要调试的页面,按F12快捷键打开调试工具如下:ciE办公区 - 实用经验教程分享!

    在调试窗口中,所有的HTML元素都会呈现在调试窗口中ciE办公区 - 实用经验教程分享!

    如何进行html调试和js脚本调试ciE办公区 - 实用经验教程分享!

  • 2

    如何选择指定的dom节点进行查看和编辑:ciE办公区 - 实用经验教程分享!

    ciE办公区 - 实用经验教程分享!

    如何进行html调试和js脚本调试ciE办公区 - 实用经验教程分享!

    如何进行html调试和js脚本调试ciE办公区 - 实用经验教程分享!

  • 3

    js断点调试:chrome非常强大,在chrome调试工具栏中,你可以进行js断点调试以及格式化查看(一些大型的门户网站都会将js压缩成无任何格式的代码这在研究时特别费劲):ciE办公区 - 实用经验教程分享!

    我先写一段简单的js代码:ciE办公区 - 实用经验教程分享!

    function debug(){ciE办公区 - 实用经验教程分享!

    for (var i=0;i10;i ){ciE办公区 - 实用经验教程分享!

    alert(i);ciE办公区 - 实用经验教程分享!

    }ciE办公区 - 实用经验教程分享!

    调试截图如下:ciE办公区 - 实用经验教程分享!

    ciE办公区 - 实用经验教程分享!

    如何进行html调试和js脚本调试ciE办公区 - 实用经验教程分享!

  • 3此文章未经授权抓取自百度经验
  • 4

    js ajax调试,ajax技术如今越来越频繁使用,所以,ajax调试也必不可少:ciE办公区 - 实用经验教程分享!

    在chrome调试工具中,可以查看到当前页面所以的请求,包括ajax请求,以下是页面打开后所有发起的请求,ciE办公区 - 实用经验教程分享!

    ciE办公区 - 实用经验教程分享!

    如何进行html调试和js脚本调试ciE办公区 - 实用经验教程分享!

  • 5

    chrome很强大,可以查看发送请求的数据,也可以查看返回的结果:ciE办公区 - 实用经验教程分享!

    ciE办公区 - 实用经验教程分享!

    如何进行html调试和js脚本调试ciE办公区 - 实用经验教程分享!

  • 6

    本篇幅简短,无法全部描述,大家可以多去使用,即可领会chorme的强大之处。此文仅仅只做了简单的介绍,望能给刚入门的人一个启蒙。ciE办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!ciE办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码