Chrome DevTools调试技巧

【1】DevTools触发伪类

右键单击Elements面板中的元素节点并选择“ force state ”。或者在Sytle子窗格中单击“：hov ”图标。能够触发元素上的伪类来研究元素在悬停时的效果和样式

​

【2】DevTools-在任何网页上运行预约义的代码片断

DevTools中有一个叫作代码段的特性，它容许您能够在网页上运行的测试代码(这比在控制台面板中从新键入JavaScript代码要方便一些)

1. 单击Sources，左侧小窗口选择snippets
2. 单击New snippet 新建
3. 输入文件名和须要测试的代码片断
4. 右击文件并选择Run(或Ctrl/Cmd+Enter)
5. 单击Console查看代码运行结果

​

【3】使用CSS选择器搜索DevTools-DOM树

当使用Elements面板浏览DOM时，尝试经过CSS选择器搜索节点。

​

【4】DevTools-转到特定列的行号

1. 打开Sources面板中的文件, 按快捷键ctrl + o
2. 输入：5：20 Enter
3. 请注意，您被带到了第5行第20栏！

​

【5】DevTools- Ctrl+单击能够在Sources面板中添加多个游标

​

【6】快速编辑HTML元素标记

您能够双击Elements面板中节点的开始标记来编辑它，结束标记将随着您的更改而自动更新。

​

【7】ALT+单击能够展开全部子节点

在Elements面板中,使用Alt+单击能够展开该Dom节点下的全部Dom子节点

​

【8】在任何节点上显示该节点绑定的事件

​

【9】扩展CSS缩写属性

在Style窗格中，能够展开css缩写属性，如background或padding，并查看为您定义的所有属性

​

【10】将元素滚动到视图中

1. 右击Elements面板中的DOM节点。
2. 选择 Scroll into view

​

【11】ctrl+d 选择下一个相同的单词

在Sources面板编辑器中，可使用ctrl + d 选择多个相同的单词作操做

​

【12】添加一个新的自定义维度设备做为预置

​

【13】DOM的改进面包屑线索

Elements元素面板中有一个

面包屑痕迹，

它能够帮助您在浏览DOM时跟踪您的步骤。

​

【14】netWork网络请求过滤器

• larger-than:100将 查找大于100个字节的资源并进行筛选。
• 您能够经过在查询前面加上“-”来否认查询。例如：-larger-than:50K找到如下资源
  不
  大于50K。
• status-code: 200若要查找具备状态代码响应的资源，请执行如下操做200
• mime-type 查找请求资源类型

​

【15】在DevTools控制台面板中编辑HTML

​

【16】从DevTools生成的调色板中选择一个新的颜色

​

【17】DOM属性中的增量和递减数

可使用键盘上/下箭头修改DOM属性或样式的数量值

​

【18】使用样式规则工具栏增长常见样式

​

【19】经过控制台更好地记录对象和数组

​

【20】经过控制台了解JS代码的速度

console.time和console.timeEnd这两个方法能够用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。console.time方法是开始计算时间，console.timeEnd是中止计时，输出脚本执行的时间。这两个方法中均可以传入一个参数，做为计时器的名称，它的做用是在代码并行运行时分清楚各个计时器。测试代码写在这两个方法之间。

​

【21】使用切换元素类功能进行即时视觉反馈

在样式窗格中，单击.cls标签，可显示隐藏Dom元素的类名

​

【22】DevTools黑色主题

​

【23】在没有浏览器扩展的状况下捕获全尺寸屏幕截图

在控制台中按快捷键Ctrl + Shift + p进入命令菜单再输入screenshot

​

【24】用DevTools实现JavaScript代码库的现代化

新的“copy for fatch”功能扩展了NetworkPanel上下文菜单,右击网络请求，而后以curl形式复制。用FETCH API替换代码库中现有的Ajax调用。若是要验证剪贴板中的FETCH API调用，能够将其粘贴到控制台面板中，并在其前缀加上await

​

【25】查看WebSocket消息

​

【26】console.dir显示一个对象全部的属性和方法

若是说你想要查看Dom节点所关联到的真实的Javasript对象，而且想要查看他的属性就可使用console.dir

​

【27】经过h来隐藏

能够按下h来隐藏在元素面板中被你选中的元素。再次按下h使它出现。某些时候这是颇有用的，例如你想截图，可是又不想里面包含一些敏感信息。

​

【28】隐藏netWork请求的时间轴

若是你仅仅只是查看请求列表- 来确认状态，大小和响应，那么你能够选择隐藏请求的时间轴，由于它占了你将近一半的空间

​

【29】Console的代码换行

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

​

【30】DOM 断点调试

基本上你们都会用JavaScript的断点调试，可是应该不少人不知道Dom节点也能够进行断点调试，DevTools提供了三种针对Dom元素的断点调试：子元素改变时、属性改变时 和元素被移除时。

1. 在Elements 标签页，选中一个元素
2. 右击，选择 Breakon->subtree modifications(子元素改变时断点)、attribute modifications （属性改变时断点）、node removal（元素被移除时断点）

​

【31】缓存上一步操做的结果$_

在DevTools上运行JavaScript表达式的时候，可使用$_来获取到上一步操做的返回值。

​

【32】console中的 $0-$4

在Elements面板中，

$0

是当前咱们选中的html节点的引用。理所固然， $1 就是咱们上一次选择的节点的引用， $2 是在那以前选择的节点的引用，一直到 $4

​

【33】选择dom节点$和$$

若是你没有在App中定义过 $ 变量 (例如JQ)的话，它在console中就是对这一大串函数document.querySelector的别名。

若是是 $$ 就更加厉害了，还能节省更多的时间，由于它不只执行document.querySelectorAll而且它返回的是一个节点的数组

​

参考文献：umaar.com/dev-tips/