胖蔡说技术
随便扯扯

一些你可能不知道的跨浏览器DevTools功能

本文翻译自:Some Cross-Browser DevTools Features You Might Not Know

我在DevTools上花了很多时间,我相信你也会。有时我甚至会在它们之间来回切换,尤其是在调试跨浏览器问题时。DevTools很像浏览器本身——并非一个浏览器的DevTools中的所有功能都与另一个浏览器中的DevTools相同或受支持。

但有相当多的DevTools功能是可互操作的,甚至是我即将与您分享的一些鲜为人知的功能。

为了简洁起见,我在文章中使用“Chromium”来指代所有基于Chromium的浏览器,如Chrome、Edge和Opera。其中的许多DevTools提供了彼此完全相同的特性和功能,所以这只是我同时提及所有这些特性和功能的简写。

在DOM树中搜索节点

有时DOM树中充满了嵌套在其他节点中的节点,等等。这使得很难找到您要查找的确切节点,但您可以使用Cmd+F(macOS)或Ctrl+F(Windows)快速搜索DOM树。

此外,您还可以使用有效的CSS选择器(如.red)或XPath(如//div/h1)进行搜索。

在Chromium浏览器中,当您键入时,焦点会自动跳转到与搜索条件匹配的节点,如果您使用较长的搜索查询或大型DOM树,这可能会很烦人。幸运的是,您可以通过转到Settings (F1) → Preferences → Global → Search as you type → Disable.

在DOM树中定位节点后,可以滚动页面,通过右键单击节点并选择“滚动到视图”将节点带入视口。

从控制台访问节点

DevTools提供了许多不同的方式来直接从控制台访问DOM节点。

例如,您可以使用$0来访问DOM树中当前选定的节点。Chromium浏览器更进一步,允许您使用$1、$2、$3等访问按历史选择的逆时间顺序选择的节点。

Chromium浏览器允许您做的另一件事是将节点路径复制为document.querySelector形式的JavaScript表达式,方法是右键单击节点,然后选择copy→ 复制JS路径,然后可以使用该路径访问控制台中的节点。

这里有另一种直接从控制台访问DOM节点的方法:作为临时变量。此选项可通过右键单击节点并选择一个选项来使用。该选项在每个浏览器的DevTools中都有不同的标签:

  • Chromium:右键单击→ “存储为全局变量”
  • Firefox:右键单击→ “在控制台中使用”
  • Safari:右键单击→ “日志元素”

使用徽章将元素可视化

DevTools可以通过在节点旁边显示徽章来帮助可视化与某些属性匹配的元素。徽章是可点击的,不同的浏览器提供各种不同的徽章。

在Safari中,“元素”面板工具栏中有一个徽章按钮,可用于切换特定徽章的可见性。例如,如果一个节点应用了display:grid或display:inline grid CSS声明,则会在其旁边显示一个网格徽章。单击徽章将在页面上高亮显示网格区域、轨迹大小、行号等。

Firefox的DevTools中当前支持的徽章列在Firefox源文档中。例如,滚动徽章表示可滚动元素。单击徽章会高亮显示导致溢出的元素,旁边会有一个溢出徽章。

在Chromium浏览器中,您可以右键单击任何节点并选择“徽章设置…”以打开一个列出所有可用徽章的容器。例如,具有滚动捕捉类型的元素旁边会有一个滚动捕捉徽章,单击后会切换该元素上的滚动捕捉覆盖。

截屏

我们已经能够从一些DevTools中进行屏幕截图有一段时间了,但现在它在所有DevTools中都可用,并包括新的全页截图方式。

该过程首先右键单击要捕获的DOM节点。然后选择捕获节点的选项,根据您使用的DevTools,节点会有不同的标记。

在html节点上重复相同的步骤以获取完整页面的屏幕截图。不过,当你这样做时,值得注意的是Safari保留了元素背景色的透明度——Chromium和Firefox会将其捕捉为白色背景。

还有另一种选择!您可以拍摄页面的“响应式”屏幕截图,这允许您以特定的视口宽度捕获页面。正如你所料,每个浏览器都有不同的方法来实现这一目标。

  • Chromium:Cmd+Shift+M(macOS)或Ctrl+Shift+M(Windows)。或者单击“检查”图标旁边的“设备”图标。
  • Firefox:工具→ 浏览器工具→ “响应式设计模式”
  • Safari:开发→ “进入响应式设计模式”

Chrome提示:检查顶层

Chrome允许您可视化和检查顶层元素,如对话框、警报或模态。当一个元素被添加到#top layer时,它会在旁边获得一个top layer徽章,单击后会跳转到位于标记后面的top layer容器。

顶层容器中元素的顺序遵循堆叠顺序,这意味着最后一个元素在顶部。单击显示徽章以跳回节点。

Firefox提示:跳转到ID

Firefox将引用ID属性的元素链接到同一DOM中的目标元素,并用下划线突出显示它。使用CMD+Click(macOS)或CTRL+Click(Windows))跳转到具有标识符的目标元素。

总结

很多事情,对吧?Chromium、Firefox和Safari都支持一些非常有用的DevTools功能,这真是太棒了。你喜欢这三种功能,还有其他鲜为人知的功能吗?

我有一些资源可以随时掌握最新动态。我想在这里分享一下:

  • DevTools提示(Patrick Brosset):精心策划的跨浏览器DevTools提示和技巧集。
  • Dev提示(Umar Hansa):DevTools提示发送到您的收件箱!
  • 我可以开发工具吗?:DevTools的容器。
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » 一些你可能不知道的跨浏览器DevTools功能
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏