Chrome 实用调试技巧

Question

众所周知，Chrome 是一款非常好用的浏览器，但对于开发人员来说，Chrome 同样也是一个强大无比的工具，掌握一定的调试技巧将为你快速定位为问题，提高效率。

网络请求调用堆栈信息

Network 面板中的 initiator 列显示了哪个脚本的哪一行触发了请求，在开发调试中你可能希望快速定位到代码的哪一部分触发了请求，只需要将鼠标悬停在 initiator 上，你将看到完整的调用堆栈，点击相应的堆栈信息打开对应的文件。

重新发起 XHR 请求

要重发 XHR 请求，在 “请求” 表中选中请求并单击右键，然后选择“Replay XHR”。

条件代码行断点

调试 js 代码时，如果只想在某些特定条件成立时进行暂停，则可使用条件代码行断点

DOM 断点

某些脚本会修改 DOM ，如果不确定脚本的功能或者位置可以添加一个 DOM 断点，这样能监听到节点被添加或者移除，或属性被改变时触发断点，从而定位目标代码

Copy

控制台中的全局的方法 copy ，可以 copy 任何你能拿到的资源

通过 h 快速隐藏

选中元素后按下 h 隐藏，再次按下 h 恢复显示

日志开启时间戳

使用快捷键 shift+command+p 调用命令，输入 timestamp 选中即可

截屏

对页面中节点截屏只需选中节点后右键点击 Capture node screenshot

使用快捷键 shift+command+p 调用命令，输入 screenshot 可选择你所需的方式，包括全屏、视口截屏等

参考

https://developer.chrome.com/docs/devtools/
https://www.youtube.com/channel/UCnUYZLuoy1rq1aVMwx4aTzw
https://jelly.jd.com/article/605c8bf4960312017f4b7450