Chrome Devtools 高级调试技巧 #

一键重新发起请求 #

在网络 - XHR选择要重新发送的请求，右键选择重播 XHR即可。

先修改请求，再重新发起请求 #

在网络 - XHR选择要重新发送的请求，右键选择复制 - 复制到 Fetch ，修改请求，回车即可。

快速复制响应体 JSON 内容 #

右击预览中的对象，选择储存为全局变量，这时候控制台会出现：

temp1
{
  ...
}

在控制台继续输入copy(temp1)，则 JSON 已经被复制到剪切板。

在控制台操作页面元素 #

在元素面板选择一个元素，在控制台输入$0即指向该元素。

捕获节点截图 #

尽管现在的截图工具能实现捕获窗体截图，但是，一般无法捕获页面某个节点的截图。如果真的需要捕获节点的截图，可以先在元素选择一个节点，然后Ctrl + Shift + P，最后输入Capture或者捕获，根据联想输入选择捕获节点截图即可。

一键展开所有后代元素 #

按住Alt再展开即可。

控制台引用上一次的返回值 #

无论上一次的返回值是什么，$_都指向上一次的返回值。

控制台的$和$$ #

$可代替document.querySelector，比如$('#abc')指代document.querySelector('#abc')。

$$可代替document.querySelectorAll。