chrome的一些调试小技巧

一、一些常用的快捷键

1. Ctrl + Shift + D：切换DevTools窗口的布局（下右）
2. 切换DevTools选项卡

• Ctrl + [ 或 ]： 向左和向右
• Ctrl + 1 到 9：(可能需要DevTools>Settings>Preferences>Appearance中打开)

二、便于开发的小技巧

1. 遇到bug需要同事帮忙时，可将报错信息保存为文件发送，右击报错信息，
   找到‘save as’即可
   
2. 使用控制台自带的command面板（快捷键ctrl+shift+p），可以实现全屏截图、节点截图、控制台背景切换、面板布局切换，
   
   

这个小册说的很详细
你不知道的chrome调试技巧.
现小册已开源，点击此链接跳转免费github.

三、console中的一些操作

1. $0、$1
   在控制台的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用。
   $1 是对上一次我们选择的节点的引用，$2 是对在那之前选择的节点的引用，一直到 $4
2. copy()
   通过全局的方法 copy() 在 console 里 copy 任何你能拿到的资源，包括 copy($_) 或 copy($0)
3. $_ 是对上次执行的结果的 引用 ：
4. $i命令
   现在的前端开发过程，离不开各种 npm 插件，但你可能没有想过，有一天我们竟然可以在 Dev Tools 里面来使用 npm 插件！

如果你只是想玩玩新出的 npm 包，现在不用再大费周章去建一个项目测试了，只需要通过 Chrome插件:Console Importer ，快速的在 console 中引入和测试一些 npm 库。
eg：
运行 $i(‘lodash’) lodash 了

5. console.log打印技巧
   ~多个变量打印时，只有变量值，看不出哪个是哪个
   console.log({}),会将变量名打印出来，清晰
   ~console.dir：打印DOM 节点，可以查看他的属性
6. console.log的条件断点

你可以通过以下集中方法添加条件断点：

（1）右击行号，选择 Add conditional breakpoint…(添加条件断点)

（2）右击一个已经设置的断点并且选择 Edit breakpoint(编辑断点)

然后输入一个执行结果为 true 或者 false 的表达式。

四、element中的一些操作

1. H: 隐藏／显示元素
2. Ctrl + Shift + Z: 撤销所有修改
   CMD + Z: 撤销上次修改
3. 展开所有的子节点: expand recursively命令（右击即可找到）

五、network的一些操作

1. 重新发起一个请求（别再刷新页面啦）
2. 请求过滤
   
3. 自定义请求表,要自定义显示哪些列，右键单击请求表标题上的任意位置,选择想要在请求表上展示的字段
   如果想要显示所有可能的关键字，在空白的输入框按下 [ctrl] + [space]

这里只记录了一些博主需要或没有接触的东西，如果小伙伴有不懂的地方，请看这里，有大量详细的介绍，本文也是借鉴于此
你不知道的chrome调试技巧.