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

工具/原料

chrome浏览器   Mozilla firefox   电脑

方法/步骤

1、以chrome为例，首先打开需要调试的页面，按F12快捷键打开调试工具。

2、选择指定的dom节点进行查看和编辑。

3、js断点调试：chrome非常强大，在chrome调试工具栏中，你可以进行js断点调试以及格式化查看（一些大型的门户网站都会将js压缩成无任何格式的代码这在研究时特别费劲）：我先写一段简单的js代码：function debug(){for (var i=0i<10i++){alert(i)}调试截图如下：

4、js ajax调试，ajax技术如今越来越频繁使用，所以，ajax调试也必不可少：在chrome调试工具中，可以查看到当前页面所以的请求，包括ajax请求，以下是页面打开后所有发起的请求。

按F12进入控制台模式 或者选中内容 右键 审查元素

ELements html css调试 选中html标签右边就是css

右键标签Edit as HTML 为修改当前标签html代码 Edit as Text 是修改text内容

css去掉钩子 就能失效了 右上角加号添加新选择器元素后面点击添加新元素

还有一些常用的

sources 来源文件 CSS JavaScript之类文件调试debug

Network 页面请求 get post之类 一般用来抓包的

Application 存websql Local Storage cookies增删改查的地方

console 就是控制台了 可以输入JavaScript代码 或者console函数输出的地方

选择一个.html文件->右键菜单选择属性->通用中：打开方式，点修改按钮->选择Chrome。

---