【译】12个Chrome DevTools小技巧

本文采用意译，这是原文

1.元素拖拽

在Elements面板，你能够对元素进行任意拖拽操做

2.获取当前选中元素

在Elements面板选中一个元素以后，在Console中输入$0能够获取到选中元素的引用

若是你使用jQuery，那么输入$($0)，能够获取当前元素的jQuery对象并使用相关API

3.在Console面板中使用最近一次操做值

在Console面板中，使用$_变量引用上一次操做返回值

4.添加样式和改变状态

在Elemetns面板的Styles面板中，有两个颇有用的按钮

第一个，你能够为你选择的元素添加新样式

第二个，若是选择元素样式有伪类，你能够任意触发它的伪类样式

5.改变样式并保存

在Elemetns面板的Styles面板中，你能够对选择的元素样式进行修改，而后点击文件名，进行保存操做

这个技巧不适用于使用了+选择器和element.style样式内容

6.为选中的元素截图

在Elements标签中，选择一个元素，按下cmd-shift-p（windows则为ctrl-shift-p）组合键，搜索并选择Capture node screenshot进行保存操做

7.使用CSS选择器查找元素

在Elements面板中，按下cmd-f（windows则为ctrl-p）组合键，显示查询框

你能够输入字符串去在整个页面查找，或者输入css选择器去查找

8.Console的代码换行

在Console面板中调试多行代码时，使用shift-enter组合键进行换行，enter键将直接执行代码

9.定位

在调试器面板中：

• cmd-o（windows则为ctrl-o）组合键，会列出当前页面加载的资源，选择即定位该资源
• cmd-shift-o（windows则为ctrl-shift-o）组合键，会列出当前选中文件的符号列表（属性，方法，类等等）
• ctrl-g对当前选中文件代码行进行定位

10.监听表达式

把须要监听的变量添加至监听表达式列表中，避免在程序中反复的console.log同一个变量进行debug

11.XRH/Fetch调试

找到并打开XHR/Fetch Breakpoints面板，添加须要拦截的请求url

12DOM调试

在Elements面板中，对选中的元素右键，启用Break on -> subtree modifications，任何改变该元素子节点内容的js操做将会被拦截