【JavaScript断点调试】笔记

一、步骤：

1. f12打开开发者工具
2. 打开Sources
3. 打开要调试的JavaScript代码文件
4. 在行号上单击打上断点

二、调试bug的思路

1. JavaScript是否成功执行进来
2. JavaScript是否存在逻辑问题、变量问题、参数问题等
3. 各种符号

三、工具

1. control+o 查找js文件（window）
2. 逐语句执行F10：点击一次往后执行一行
3. 逐过程执行：直接执行完跳到下一个断点
4. 点击watch旁边的+，输入表达式：监控执行当前断点所在作用域任何表达式的执行结果
5. call stack：表示这个函数的调用堆栈，也就是它是被哪个上层函数调用的，上层函数又是被谁调用的
6. Scope：当前断点的作用域以及所有的闭包作用域、全局作用域，可以看到所有作用域的变量

四、技巧

1. 格式化压缩代码：左下角的花括号
2. 快速跳转到某断点的位置：Breakpoints汇总所有断点，点击checkbox暂时取消这个断点，点击该行下一行，直接跳转到该断点
3. 查看断点内部的作用范围（很实用）：Scope
4. 监听事件断点：Event Listener Breakpoints选择性监听某类行为事件：键盘输入、拖拉等。勾选checkbox生效，触发行为时会跳转到触发的js
5. DOM 及 XHR监听跳转：DOM Bre