调试 - Chrome调试

调试 - Chrome调试

打开开发人员工具

Ctrl+Shift+i可以打开开发人员工具。

功能面板

NetWork功能面板

在当前页面打开调试工具，刷新页面后点击NetWork可以查看当前页面的Http信息，这个信息是从发起请求到获得响应后为止。

控制/录制

资源列表

点击资源名称（name），右侧会打开关于该资源详细信息的面板。

Header

描述了请求头和响应头信息

Preview

预览资源的数据，比如image、js、css、html等

Response

响应的数据

Cookie

写入客户端的cookie

Timing

请求建立连接时的各项耗时

调试JS

控制台输出

请求失败或页面js代码错误都会自动输出到控制台。

可调用console对象的log、error、warn方法输出数据

断点

打完断点 - 刷新页面 - 进入断点，F8终止调试，F10逐过程，F11逐语句（会进入函数内部），Shift+F11（误入函数内部后可跳出到外部）

定位函数

如果想进入该函数，但是该函数可能在另外一个文件中，该文件已经将函数封装得很深，此时光标移入调用函数的表达式可以看到提示该函数在哪个文件被定义，点击链接即可马上定位到该函数，然后可以进去打断点。

输出页面变量

Call Stack(栈帧)

Breakpoints (断点列表)

可随时取消某个断点

XHR/fetch Breakpoints (监视XMLHttpRequest请求列表)

可在发送Ajax请求时（未发出时）进入中断模式，此时会自动进入内置的request.send() 函数，主要用于查看发送前的一些数据。如果要这样做，需要勾选Any XHR or fetch（监视本页面源代码发起的所有的Ajax请求），也可以点击+号，设置发起的Ajax请求的Url所包含的Url字符，这样可以只监视单个Ajax请求。下图设置了只监视发起的Ajax请求的Url字符包含/Albums/Test的请求。

Dom Breakpoints (监视Dom元素列表)

设置好断点后，Dom Breakpoints列表会显示添加了断点的Dom元素，满足中断条件后，会进入执行修改Dom元素的Js断点。

EventListener Breakpoints（监视的事件列表）

参考资料

再见尼克 - 全新Chrome Devtools Performance使用指南

segmentfault - Chrome DevTools — Network

Chrome开发者工具详解

调试 - 学习总目录