Chrome调试技巧

需求：随便一个网页，点击任意一处，精确找出源码中网络请求的代码位置。
可能网页在不断地刷新数据，而且很快，还有浏览器插件、广告等影响。

1. 格式化js代码

2. 开启BlackBoxing

原因： 屏蔽掉页面涉及到的不关心的js文件访问网络，如广告库，第三方js库等
做法： 需开启BlackBoxing功能
操作： F12 => F1 => Blackboxing ，选中复选框，如下图：

还没完，需要添加规则。可以写正则表达式，不过也有简单方式，即在Sources中打开的js文件，格式化js文件，之后在行号处右键，选择Stop blackboxing，如下图：

，这时你可以看到这样的变化

3. 强大的Source面板

DOM节点变化监听的断点

网络请求数据查看、断点添加

4. 格式化Json数据

console中，输入 copy(要格式化的json数据)，然后按回车，此时格式化后的Json数据已经复制到了剪贴板，你粘贴下试试，还有一份打印了出来。

5. Network，找出我的点击请求

6. 快捷键

Ctrl + Shift + F ： 选中Sources -> Page 中的最顶端的文件夹，按该快捷键，可以在源文件中搜寻指定规则的字符串所属文件
Ctrl + Shift： 配合上一个快捷键，可以在指定文件中搜索用处
Ctrl + P： 快速定位文件
Ctrl + Shift + O： 快速定位函数
Ctrl + G： 快速定位到文件某行

7. Snippets （JS编辑器，Sources下）

8. debugger

源文件中加入debugger则调试时运行到此停下

9. 调试按钮

• 到下一个断点或停止
• 下一步（不进入函数）
• 下一步（有函数则进入）
• 跳出函数
• 一步
• 断点开关，灰色为断点起作用，蓝色为断点不可用
• 遇到异常代码是否中断开关