今天给大家分享一些使用“Chrome开发者工具”的小技巧。包括调试，优化页面渲染速度等。希望能提升Web开发人员的工作效率。

浏览器对例如Video、Password等组件进行了封装，无法查看到组件的详细代码，不利于调试。幸好，通过配置能够在元素标签器中显示被隐藏的组件代码。

实现：Settings → General → Elements → Show user agent shadow DOM

在Chrome Dev Tools 控制台中还可以通过$变量来选择DOM元素：

$：Chrome控制台中原生支持类jQuery的选择器。用$加上熟悉的css选择器就能选择DOM节点。
$0 ~ $4：最近选择过的5个DOM节点。$0会返回最近一次点选的DOM结点。以此类推，$1返回的是上上次点选的DOM节点。最多可以保存5个，如果不满5个，则返回undefined。

在Sources编辑框中，按住Ctrl（Cmd for Mac），在要编辑的地方点击鼠标，可以设置多个插入符。按下Ctrl + U 撤销编辑，快速输入，快速删除。

现在应该已经可以看到一组新的泄露对象的集合，选择其中的一个然后查看是什么导致的内存泄露。

实现：

实现：Sources面板下 Ctrl+P（Cmd+P for mac）

开发者工具支持在源代码中搜索特定的字符串的功能，这种搜索方式不但能区分大小写，还支持正则表达式。

实现：Sources面板下 Ctrl + Shift + F（Cmd + Shift + F for mac）

实现：

开发者工具支持在rgba、hsl和hexadecimal来回切换颜色模式和实时编辑预览页面颜色。

实现：

开发者工具能够模拟不同移动设备，快速测试移动端的用户体验，解决调试困难的问题。

设备模式的另一个很酷的功能是模拟移动设备的传感器，例如触摸屏幕和加速计，甚至可以更改你的地理位置。

实现：Esc键 → Emulation → Enable emulation → Sensors

Workspace把开发者工具变成了一个真正的IDE。将Sources选项卡中的文件和本地项目中的文件进行匹配，直接编辑和保存，不必复制/粘贴到编辑器。

实现：Source左侧面板下右击 → Add Folder to worksapce

-END-