你忽略的那些 DevTools 调试技巧

背景

作为一个前端开发人员，DevTools 是我们最熟悉不过的伙伴。无论是dom检查、调试bug，断点调试、性能检测等一系列操作都离不开它的帮助。

大家经常使用的 DevTools 功能大差不差，例如控制台记录诊断信息，查看调试日志，network查看请求和网络情况、Sources查看源代码进行断点调试等等。所以这些常规操作我就不多说了。

本文主要分享一些 DevTools 冷门且有用的操作～（因为我一般只用chrome，所以只分享chrome的操作）

正文

1. 搜索 DOM 树中的节点

想必你也遇到过这种情况：用 DevTools 选择元素的箭头想要选中某个元素审查样式，却发现怎么也选不中那个元素，一般可能是上面盖了个层级更高的元素，所以无法选中被遮盖的元素。

以前遇到这种情况我只能将覆盖在上面的元素设置 pointer-events: none ，然后重新选择元素，或者自己不断展开父元素，手动找到目标元素。

但其实可以用 DevTools 的 dom搜索功能 快速找到元素并将视图定位过去。使用方式为 cmd键 + f(macOS) 或者 Ctrl + f(Windows)

而且更方便的是，它不仅可以用css选择器搜索，还支持根据字符串、XPath搜索。使用搜索dom之后审查样式效率能够提高很多。

2. 控制台访问节点

在第一点中我们搜索到元素节点后，不仅能快速定位它的位置和审查它的样式，而且搜索后的元素可以在控制台使用$0来访问 DOM 树中当前选中的节点。甚至可以使用 $1、$2、$3 等访问按历史选择的时间顺序逆序选择的节点。

直接就可以用 $0 操作当前dom了。比如我这里选中了设置按钮，可以直接执行$0.click()

3. 屏幕长截图

如果有一个很长的网页你想截图，一般肯定是想着用第三方软件了。但其实 chrome 本身就提供了截图功能。

如下，选中元素然后右键“截取节点屏幕截图”。

截出来的图如下：

那怎么截长图呢？灵活一点，直接选中最外层 标签然后截图不就能对整个网页截图了吗

4. 快速查看 rem 对应值

如果你的网站自适应采用了 rem 方案，在你审查样式时一看全是rem单位，不知道它对应的究竟是多少像素。这时候就会切到计算样式面板查看计算后的属性值。

但是这样也不太好找自己想查看的属性，当然你可以在这个面板进行过滤，但是未免太麻烦了，其实你可以直接在想查看的属性上右键选择"查看计算得出的值"。

5. 移动端调试

chrome devtools 是支持远程调试的，可以调试安卓手机上的网页。只需要一根 USB 手机线连接手机和电脑（手机需要设置允许 USB 调试），然后打开 chrome://inspect 就可以看到所有手机上的网页了，还有 APP 调试包的 webview 里的网页：

点击 inspect 就可以调试移动端网页了：

但是使用这个功能需要kxsw，dddd。因为需要fq安装一个插件，不过网上有卖离线版本的插件的，我没买过，不知道有没有用。另外，如果是webview的网页，需要app配置允许chrome调试，不然是不会被 devtools 捕获的。

6. 重新发送 XHR 请求

在接口联调阶段，如果想要重新请求接口查看数据。不需要重新走一遍流程，在network面板选中想要重新发送的请求右键选择“重访XHR”菜单即可再次发送该请求。

结语

以上的一些 DevTools 调试技巧在一定程度上都能提高我们的工作效率，你都知道吗

我是喜欢归纳总结前端相关知识的前端阿彬，个人创作不易，您的点赞·关注·评论·转发 是我坚持下去的动力