前端调试效率低？试试这10个“Chrome开发者工具”使用技巧

古城微笑少年丶 2023-10-12 03:24 16阅读 0赞

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

![chQ8tuBMs6Lf7tqddTZH.jpg][]

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

### **1****，打开Shadow DOM显示** ###

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

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

![1][]

### 2，在控制台快速选择元素 ###

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

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

![2][]

### 3，多行插入符编辑内容 ###

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

![3][]

### 4，使用”3步快照”技术来找出JavaScript内存泄露 ###

1.  打开开发者工具并且切换到Profiles面板里；
2.  在页面执行一个能引起内存泄露的操作；
3.  点击“Take Snapshot”来执行一个堆快照；
4.  重复执行步骤 2 和步骤 3 三次；
5.  选择最后一个堆快照；
6.  将过滤器从“所有对象”改为“快照 1 和 2 之间的对象”；

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

![4][] ![5][]

### 5，强制改变元素状态 ###

实现：

*  Elements面板右侧Styles标签 → Toggle Element State
 *  Elements面板左侧右击 → Force element state

![6][]

### 6，快速查找文件&搜索特定字符串 ###

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

![7][]

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

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

![8][]

### 7，多列内容选择&匹配相同选项 ###

实现：

*  多列内容选择：按住Alt键，当鼠标箭头变为“+”号后，点击鼠标
 *  匹配相同选项：选中需要匹配的元素，快捷键Ctrl + D（Cmd + D for mac）

![9][]

### 8，改变颜色模式&自定义调色板 ###

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

实现：

*  改变颜色模式：Shift + 点击鼠标
 *  自定义调色板：点击样式区域颜色前面的小方块

![10][]

### 9，设备模式&移动仿真 ###

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

*  通过模拟不同的屏幕大小和分辨率来测试响应式的设计效果， 也可以模拟Retina 屏幕；
 *  使用网络模拟器来评估你的站点的性能，并且不会影响到其他选项；
 *  可视化并审查 CSS 样式；
 *  准确模拟设备输入，比如触控事件、地理位置以及设备屏幕朝向。

![11][]

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

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

![12][]

### 10，Workspace编辑本地文件 ###

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

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

![13][]

\-END-

转载于:https://www.cnblogs.com/kuangke/p/5460611.html

[chQ8tuBMs6Lf7tqddTZH.jpg]: https://dn-sdkcnssl.qbox.me/article/chQ8tuBMs6Lf7tqddTZH.jpg
[1]: https://blog.wilddog.com/wp-content/uploads/2015/12/1.gif
[2]: https://blog.wilddog.com/wp-content/uploads/2015/12/2.gif
[3]: https://blog.wilddog.com/wp-content/uploads/2015/12/3.gif
[4]: https://blog.wilddog.com/wp-content/uploads/2015/12/42.jpg
[5]: https://blog.wilddog.com/wp-content/uploads/2015/12/51.jpg
[6]: https://blog.wilddog.com/wp-content/uploads/2015/12/6.gif
[7]: https://blog.wilddog.com/wp-content/uploads/2015/12/7.gif
[8]: https://blog.wilddog.com/wp-content/uploads/2015/12/8.gif
[9]: https://blog.wilddog.com/wp-content/uploads/2015/12/9.gif
[10]: https://blog.wilddog.com/wp-content/uploads/2015/12/101.gif
[11]: https://blog.wilddog.com/wp-content/uploads/2015/12/11.png
[12]: https://blog.wilddog.com/wp-content/uploads/2015/12/122.jpg
[13]: https://blog.wilddog.com/wp-content/uploads/2015/12/13.gif