\color{red}{ }

I spend a lot of time in DevTools, and I’m sure you do too. Sometimes I even bounce between them, especially when I’m debugging cross-browser issues. DevTools is a lot like browsers themselves — not all of the features in one browser’s DevTools will be the same or supported in another browser’s DevTools.

我花费很多时间在 开发工具上，我确信你也是，有时我甚至在他们之间切换，特别是当我调试跨浏览器问题的时候。 开发工具很像浏览器本身 - 一个浏览器的不是所有特性在另一个浏览器是一样的或者是支持的

But there are quite a few DevTools features that are interoperable, even some lesser-known ones that I’m about to share with you.

但是有许多开发工具特性是可以交互的，我将要分享给你一些鲜为人知的特性

For the sake(目的)\color{red}{sake(目的)} sake(目的)of brevity(简短)\color{red}{brevity(简短)}brevity(简短) , I use “Chromium” to refer to all Chromium-based browsers, like Chrome, Edge, and Opera, in the article. Many of the DevTools in them offer the exact same features and capabilities as one another, so this is just my shorthand for referring to all of them at once.

为了简洁这个目的，我使用 Chromium 去指代那些以Chromium 为基础的浏览器，像 chorme,Edge 和 Opera，在这一篇文章里，他们的很多开发工具提供了完全相同的特性和功能，所以这只是我同时提到所有这些的简写(有点奇怪，不知道怎么翻译)

Search nodes in the DOM tree

在 dom 树中查询 node

Sometimes the DOM tree is full of nodes nested in nodes that are nested in other nodes, and so on. That makes it pretty tough to find the exact one you’re looking for, but you can quickly search the DOM tree using + (macOS) or + (Windows).Cmd``F``Ctrl``F

有时候 dom 树 被不断的嵌套在很深的 节点 里，我们想要找到非常精确的那一个变得非常困难，但是你可以，(macOs) Cmd 或者 (Windows) Ctrl F 快速的搜索 Dom 树

Additionally, you can also search using a valid CSS selector, like , or using an XPath, like .red``//div/h1

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

In Chromium browsers, the focus automatically jumps to the node that matches the search criteria(条件) as you type, which could be annoying if you are working with longer search queries or a large DOM tree. Fortunately, you can disable this behavior by heading to  Settings → Preferences → Global → Search as you type → Disable.F1

在 Chromium 浏览器中，焦点会在您键入时自动跳转到与搜索条件匹配的节点，如果您正在使用较长的搜索查询或大型 DOM 树，这可能会很烦人。幸运的是，您可以通过在 → 键入禁用时前往Settings → Preferences → Global → Search as you type → Disable.f1(不知道配置项该不该翻译)

After you have located the node in the DOM tree, you can scroll the page to bring the node within the viewport by right-clicking on the nod(点头，我觉得是作者写错了应该是 node), and selecting “Scroll into view”.

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

Access nodes from the console

从控制台访问节点

DevTools provides many different ways to access a DOM node directly from the console.

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

For example, you can use to access the currently selected node in the DOM tree. Chromium browsers take this one step further by allowing you to access nodes selected in the reverse chronological order of historic selection using, , , , etc.$0``$1``$2``$3(不知道为啥这样写)

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

Another thing that Chromium browsers allow you to do is copy the node path as a JavaScript expression in the form(以什么样的形式出现) of by right-clicking on the node, and selecting Copy → Copy JS path, which can then be used to access the node in the console.document.querySelector

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

Here’s another way to access a DOM node directly from the console: as a temporary variable. This option is available by right-clicking on the node and selecting an option. That option is labeled(有标签的) differently in each browser’s DevTools:

• Chromium: Right click → “Store as global variable”
• Firefox: Right click → “Use in Console”
• Safari: Right click → “Log Element”

这里有另外的方式从控制台去直接访问dom 节点，那就是作为临时变量，通过右键点击这个节点，然后选择一个选项，这个有标签的选项在不同的浏览器是不同的

• Chromium: 右键 → “Store as global variable”
• Firefox: 右键 → “Use in Console”
• Safari: 右键 → “Log Element”

Visualize(使看的见) elements with badges

使用标记使元素看的见

DevTools can help visualize elements that match certain properties by displaying a badge next to the node. Badges are clickable, and different browsers offer a variety(多样的) of different badges.

开发者工具可以在节点旁边显示标记来帮助可视化匹配特定属性的元素，标记是可点击的，而且在不同的浏览器中提供了不同的标记

In Safari, there is a badge button in the Elements panel toolbar which can be used to toggle the visibility of specific badges. For example, if a node has a display: grid or display: inline-grid CSS declaration(宣言，声明) applied to it, a grid badge is displayed next to it. Clicking on the badge will highlight grid areas, track sizes, line numbers, and more, on the page.

在 safari 中，元素面板工具有一个标记按钮可以用来切换特定标记的可见性，例如，如果一个节点有应用了display: grid 或者 display: inline-grid css 声明，一个 grid 标记会在旁边展示，点击这个标记可以将这个 grid 使高亮这个区域，轨道线，行号，等等在标记上

The badges that are currently supported in Firefox’s DevTools are listed in the Firefox source docs. For example, a scroll badge indicates(指示/显示) a scrollable element. Clicking on the badge highlights the element causing the overflow with an overflow badge next to it.

这个标记最近被支持在火狐开发者工具在源文件中被列出来，一个滚动的标记指示一个可滚动的元素，点击这个标记可以使导致溢出的元素高亮，并且可以在旁边显示一个 overflow 的标记

In Chromium browsers, you can right-click on any node and select  “Badge settings…”  to open a container that lists all of the available badges. For example, elements with scroll-snap-type will have a scroll-snap badge next to it, which on click, will toggle the scroll-snap overlay(覆盖) on that element.

在Chromium 浏览器，你可以右键点击任何元素，然后选择Badge settings去打开一个可以选择所有可用列表的容器，例如，带有scroll-snap-type 的元素会在旁边有一个scroll-snap 的标记,点击切换在元素身上的scroll-snap遮罩

Taking screenshots

快照

We’ve been able to take screenshots from some DevTools for a while now, but it’s now available in all of them and includes new ways to take full-page shots.

我们可以从一些开发者工具截图一段时间了，但是它们所有的开发者工具都是可用的，包括一些新的方法截图整个页面

The process starts by right-clicking on the DOM node you want to capture. Then select the option to capture the node, which is labeled differently depending on which DevTools you’re using.

当你右键点击你想要捕获的 Dom 节点时，过程已经开始了，选择捕获节点的那个选项，该节点会被标记不同依赖于你使用的哪个开发者工具

Repeat the same steps on the html node to take a full-page screenshot. When you do, though, it’s worth noting(值得注意的是) that Safari retains(保持) the transparency of the element’s background color — Chromium and Firefox will capture it as a white background.

在html 节点上重复相同的步骤可以对整个页面截图，当你这样做的时候，Safari 会保持元素背景色的透明度，Chromium 和 Firefox 会使用白色背景捕获

There’s another option! You can take a “responsive” screenshot of the page, which allows you to capture the page at a specific viewport width. As you might expect, each browser has different ways to get there.

• Chromium: Cmd + Shift + M (macOS) or Ctrl + Shift + M (Windows). Or click the “Devices” icon next to the “Inspect” icon.
• Firefox: Tools → Browser Tools → “Responsive Design Mode”
• Safari: Develop → “Enter Responsive Design Mode”

这里有另外的选项！在页面上你可以使用响应式的截图，它可以允许你以一个特定的视口宽度去捕获，正如你所希望的，每一个浏览器有不同的方式去做到

• Chromium:Cmd + Shift + M (macOS) or Ctrl + Shift + M (Windows). 或者点击Devices 图标旁边的 Inspect 图标
• Firefox: Tools → Browser Tools → “Responsive Design Mode”
• Safari: Develop → “Enter Responsive Design Mode”

Wrapping up

结束

Quite a few things, right? It’s awesome that there are some incredibly(不能相信) useful DevTools features that are supported in Chromium, Firefox, and Safari alike(相似的). Are there any other lesser-known features supported by all three that you like?

There are a few resources I keep close by to stay on top of what’s new. I thought I’d share them with here:

• DevTools Tips (Patrick Brosset): A curated collection of helpful cross-browser DevTools tips and tricks.
• Dev Tips (Umar Hansa): DevTools tips sent to your inbox!
• Can I DevTools?: The Caniusefor DevTools.

很多东西，对吗？有一些难以相信的有用的特性被Chromium,Firefox,Safari支持，还有三种鲜为人知的特性被支持，你喜欢吗

• DevTools Tips (Patrick Brosset): 精选有用的跨浏览器开发者工具的提示的集合
• Dev Tips (Umar Hansa): 开发者工具提示发送到你收件箱
• Can I DevTools?: The Caniuse for DevTools.

最后

感觉翻译老累了，但是确实能学到不少单词，上学的时候没好好学英语，感觉自己用不到，真的用到了才留下了悔恨的泪水哭泣😭

[来源：css-tricks.com/some-cross-…]