\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(意图)$of $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 selectingCopy→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.

开发者东西能够在节点周围显示符号来协助可视化匹配特定特点的元素，符号是可点击的，而且在不同的浏览器中供给了不同的符号

InSafari, 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 adisplay: gridordisplay: inline-gridCSS declaration(宣言，声明) applied to it, agridbadge 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 inFirefox’s DevTools are listed in the Firefoxsource docs. For example, ascrollbadge indicates(指示/显示) a scrollable element. Clicking on the badge highlights the element causing the overflow with anoverflowbadge next to it.

这个符号最近被支撑在火狐开发者东西在源文件中被列出来，一个翻滚的符号指示一个可翻滚的元素，点击这个符号能够使导致溢出的元素高亮，而且能够在周围显示一个 overflow 的符号

InChromiumbrowsers, 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 withscroll-snap-typewill have ascroll-snapbadge next to it, which on click, will toggle thescroll-snapoverlay(掩盖) 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 thehtmlnode 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) orCtrl+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) orCtrl+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?: TheCaniusefor DevTools.

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

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

最后

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

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