前端开发必备调试技巧

Chrome调试工具的使用

经常使用的面板

• Elements(元素面板)

• Console(控制台面板)

• Sources(资源面板)

• NetWork(网络面板)

1. Elements panel

定义：经过Elements 面板，不单单能够查看和编辑页面和样式，并且所作的改变当即生效。

操做DOM

1. 查看DOM树：打开Element面板，能够查看全部DOM节点，包括CSS和JavaScript，通常左侧查看DOM树，右侧查看CSS样式。

2. 选区DOM节点：将鼠标移到网页中的某元素上面，能够选中DOM节点

3. 增长、删除和修改DOM节点：在Element面板中，选择DOM节点，在文本处右击鼠标，会弹出一个菜单，

4. 为节点添加属性，查看盒模型

5. 查看CSS样式，如更改CSS属性，动态变化

6. 技巧：在CSS样式的属性值上，若是是数字的属性值，则能够经过按上下方向快捷键来给属性值加一，经过按住shift键的同时按上下方向快捷键，能够给属性值递增十
   

Element 译为“元素”，Element 面板可让咱们动态查看和编辑DOM节点和CSS样式表，而且当即生效，避免了频繁切换浏览器和编辑器的麻烦。 咱们可使用Element面板来查看源代码，它不但能够很好的格式化DOM节点，清晰的展示HTML文档，比在当前网页中右击鼠标选择“查看网页源代码”强大不少。 总之，Element面板可让咱们很透彻的了解DOM和CSS的底层结构。

碰到的问题

在查看某些伪类的属性，如:hover时，没法查看到具体的样式，查阅了一些资料，是经过鼠标Hover在元素上，而后右键检查，或者在面板选择上:hover。

2. Console panel

定义：使用Console API向控制台输出信息，产生JavaScript文件和启动调试会话

用途：

1. console.log(messgae)，用于调试JS，查看错误等。

2. 直接运行JS代码

碰到的问题

console.log(),console.info(),console.error(),console.warn()须要区别一下，最好使用过滤工具，过滤一些无用信息

3. Network panel

查看HTTP请求，查看cookie，AJAX请求等信息，
例如，给按钮绑定点击事件，能够经过网络面板，来查看请求是否成功发出，和接收到的信息。

4. Sources panel

用途：能够用来设置断点调试JS

调试步骤

打断点、单步执行、监听变化

能够查看做用域、变量、回调等的变化，此外还能够监听事件的变化。

设置断点

选择想要设置断点的js具体行，点击行号，就设置了断点，再次点击，就取消已设置的断点。

一、调用栈（Call Stack）：当遇到断点时，Call Stack 会显示当前断点所处的方法调用栈，调用栈中的每一层叫作一个 frame，点击任意 frame 能够跳到该 frame 的调用点上。在 frame 上反键能够选择 Restart Frame 能够从新执行该函数，配合变量修改和编辑代码等功能，能够在当前 frame 中反复进行调试。

二、做用域变量（Scope Variables）：在这里能够查看此时局部变量和全局变量的值。

三、断点列表（Breakpoints）：这里会列出你设置的全部断点，点击便可跳转到对应断点位置。

碰到的问题

单步执行，和进入到函数执行，是有差异的