实用的 Chrome 调试技巧

1. 一键重新发起请求

1. 选中Network
2. 点击Fetch/XHR
3. 选择要重新发送的请求
4. 右键选择Replay XHR（快捷键R）

2.在控制台快速发起请求

针对联调或修BUG的场景，针对同样的请求，有时候需要修改入参重新发起，有啥快捷方式？

1. 选中Network
2. 点击Fetch/XHR
3. 选择Copy as fetch
4. 控制台粘贴代码
5. 修改参数，回车搞定

3.一键展开所有DOM元素 

调试元素时，在层级比较深的情况下，你是不是也经常一个个展开去调试？有一种更加快捷的方式

1.Alt键+click

4.截取一张全屏的网页

偶尔咱们也会有对网页截屏的需求，一屏还好，系统自带的截屏或者微信截图等都可以办到，但是要求将超出一屏的内容也截下来咋办呢？

1. 准备好需要截屏的内容
2. ctrl + shift + p 执行Command命令（需要先打开调试面板）
3. 输入Capture full size screenshot 按下回车

如果要截取选中的部分元素呢？

答案也很简单，选择需要截屏的elements后，第三步输入Capture node screenshot即可

5. $i

现在的前端开发过程，离不开各种 npm 插件，但你可能没有想过，有一天我们竟然可以在 Dev Tools 里面来使用 npm 插件！

有时你只是想玩玩新出的 npm 包，现在不用再大费周章去建一个项目测试了，只需要在 Chrome插件:Console Importer 的帮助之下，快速的在 console 中引入和测试一些 npm 库。

运行 $i('lodash') 或者 $i('moment') 几秒钟后，你就可以获取到 lodash / momentjs 了:

 原文：https://juejin.cn/post/7085135692568723492  掘金小册