你所不知道的10个“Chrome开发者工具”使用技巧
作为一名Web开发人员，想必你一定听说过Chrome开发者工具了。想象一下，你正在浏览一个很酷炫的页面，里面的色彩，字体，动画，UI交互，页面打开速度等等都让你惊叹不已，赞不绝口。你在惊叹之余，是不是也想了解下Web开发人员制作该页面的思路呢；或者你自己已经做好了一个页面，但是不知道怎么回事，一段JavaScript代码就是不能执行；页面在向下滚动的时候，感觉像是在播放ppt，卡顿感很强；有了“Chrome开发者工具”这个神器，一切问题都能解决。
“Chrome开发者工具”是一个嵌入到Google Chrome浏览器中，集网页制作和调试为一体的工具，有了它，Web开发人员就能够深入地进入到浏览器和网页应用程序的内部去查看页面布局，调试一段JavaScript代码，并且优化页面的渲染速度。
“工欲善其事，必先利其器”，既然我们已经知道了“Chrome开发者工具”是一个很有用且功能很全的工具，那么我们平时在使用它的时候，有哪些功能是我们平时忽略的呢，这里给大家分享一些我在平时使用“Chrome开发者工具”的一些小技巧，希望能对Web开发人员的工作效率的提升有所帮助。
1，可视化Shadow-Dom
什么是Shadow-Dom？
Shadow DOM是指浏览器的一种能力，它允许在文档（document）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。它的最大的用处在于隔离外部环境用于封装组件。
Web浏览器在构建例如<video>、<input type=”range”/>、<input type=”password”/>标签的时候，在Elements面板下看到的也只是基本的元素，其他的元素都被隐藏了。不过借助Chrome开发者工具能够在元素标签页中显示被隐藏的代码，甚至能够通过例如“::slider-thumb”这样的伪类来定义样式。
实现：Settings → General → Elements → Show user agent shadow DOM
2，在控制台选择元素,
Console面板支持变量来选择DOM元素：
1. Chrome控制台中原生支持类jQuery的选择器。
用$加上熟悉的css选择器就能选择DOM节点。
2. $0~$4：最近你选择过的5个DOM节点。
$0会返回最近一次点选的DOM结点，以此类推，$1返回的是上上次点选的DOM节点，最多保存了5个，如果不够5个，则返回undefined。
3，多行插入符编辑内容
在编辑一个文件的时候，还在每行逐一地编写重复的代码？试试开发者工具的“多行插入”的功能。
实现：按住Ctrl（Cmd for Mac），在要编辑的地方点击鼠标，可以设置多个插入符。按下Ctrl + U可以撤销编辑
4，使用”3步快照”技术来找出JavaScript内存泄露
- 打开开发者工具并且切换到Profiles面板里；
- 在你的页面执行一个能引起内存泄露的操作；
- 点击“Take Snapshot”来执行一个堆快照；
- 重复执行步骤 2 和步骤 3 三次；
- 选择最后一个堆快照；
- 将过滤器从“所有对象”改为“快照 1 和 2 之间的对象”；
- 你现在应该已经可以看到一组新的泄露对象的集合，可以选择其中的一个然后查看是什么导致的内存泄露。
5，强制改变元素状态
有时我们在写css的时候，需要用到一些伪类，例如鼠标悬浮效果 :hover或者已经访问过链接的状态 :visited， 开发者工具能够模拟出这样的状态。
实现：
- Elements面板右侧Styles标签 → Toggle Element State
- Elements面板左侧右击 → Force element state
6，快速查找文件&搜索特定字符串
当Sources面板下有很多的文件，有时我们为找到一个文件可能要花费不少的时间，这时我们可以使用开发者工具的“快速查找文件”功能。
实现：Sources面板下 Ctrl+P（Cmd+P for mac）
但如果需要在源代码中搜索特定的字符串怎么办呢？别担心，开发者工具也提供了这种功能，这种搜索方式还能区分大小写和支持正则表达式。
实现：Sources面板下 Ctrl + Shift + F（Cmd + Shift + F for mac）
7，多列内容选择&匹配相同选项
实现：
多列内容选择：按住Alt键，当鼠标箭头变为“+”号后，点击鼠标
匹配相同选项：选中需要匹配的元素，快捷键Ctrl + D（Cmd + D for mac）
在Sources面板中选择一个资源文件进行编辑时，有时可能需要对多行代码的部分内容进行修改，一行一行去改又太耽误时间，使用开发者工具能够帮助我们节省时间。
8，改变颜色模式&自定义调色板
开发者工具支持在rgba、hsl和hexadecimal来回切换颜色模式和实时编辑预览页面颜色，当点击颜色预览时，会弹出一个颜色选择器，当选择器开启时，鼠标滑到页面鼠标指针会变成一个放大镜，让你去选择像素精度级别的颜色。
实现：
改变颜色模式：Shift + 点击鼠标
自定义调色板：点击样式区域颜色前面的小方块
9，设备模式&移动仿真
随着移动用户的增长，移动端友好的响应式网站设计变得越来越重要。网页的内容要在不同的设备以及各种网络环境下看起来都不错才行。但是想要测试移动端的体验需要较长时间，并且调试也相当困难。幸运的是开发者工具能够让你在不同的移动设备上看到展示效果。
有了它你就可以：
- 通过模拟不同的屏幕大小和分辨率来测试你的响应式设计效果如何，此模式下 Retina 屏幕也可以模拟。
- 使用网络模拟器来评估你的站点的性能，并且不会影响到其他选项卡。
- 可视化并审查 CSS 媒体问题。
- 准确模拟设备输入，比如触控事件、地理位置以及设备屏幕朝向。
设备模式的另一个很酷的功能是模拟移动设备的传感器，例如触摸屏幕和加速计，甚至可以更改你的地理位置。
实现：Esc键 → Emulation → Enable emulation → Sensors
10，workspace编辑本地文件
Workspace是开发者工具的一个强大功能，这使开发者工具变成了一个真正的IDE。Workspace会将Sources选项卡中的文件和本地项目中的文件进行匹配，所以你可以直接编辑和保存，而不必复制/粘贴到编辑器。,
实现：Source左侧面板下右击 → Add Folder to worksapce
-END-
本站内容采用 知识共享署名 4.0 国际许可协议 进行许可。
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
