开发者工具的新特性 (Chrome 71) [双语+视频]

本文来源: developers.google.com/web/updates…

文章作者: Kayce Basques Chrome DevTools & Lighthouse 技术文档工程师

文章 LISENCE: creativecommons.org/licenses/by…

文章中的代码 LISENCE: www.apache.org/licenses/LI…

视频来源: www.youtube.com/watch?v=fJx…

视频 LISENCE: support.google.com/youtube/ans…

译者: 蒋璇, 就职于丁香园, 任职 Insight 医药数据库前端开发. 开源社区热爱者

Chrome 71 开发者工具的新特性和主要改动包括:

悬停在 Live Expression 来高亮 DOM 节点
存储 DOM 节点作为全局变量
Initiator 和 priority 信息现在在 HAR 导出和导入中
从主菜单访问命令菜单
Picture-in-Picture 断点
(惊喜提示) 在 Console 运行 monitorEvents() 来监听元素的事件触发

New features and major changes coming to Chrome DevTools in Chrome 71 include:

Hover over a Live Expression to highlight a DOM node
Store DOM nodes as global variables
Initiator and priority information now in HAR imports and exports
Access the Command Menu from the Main Menu
Picture-in-Picture breakpoints
(Bonus Tip) Run monitorEvents() in the Console to watch an element's events fire

继续阅读, 或者是观看该页面的视频版本:

Read on, or watch the video version of this page:

译者注: 视频中提到的 Mordor(摩多) -> en.wikipedia.org/wiki/Mordor

视频说明(源自 YouTube)

New to DevTools in Chrome 71

0:10 → Hover over Live Expression to highlight DOM node

0:46 → Store DOM nodes as global variables

1:19 → Initiator and priority info in HAR file

2:13 → Access Command Menu from Main Menu

2:32 → Bonus Tip!

What’s New in DevTools (Chrome 71) Blog → bit.ly/Chrome71

Discuss these features and changes on the mailing list → goo.gl/RvWtFx Or tweet us → twitter.com/chromedevto…

What's New in DevTools playlist → bit.ly/2JrUPYi

Subscribe to the Google Chrome Developers channel → bit.ly/ChromeDevs1

悬浮在一个 Live Expression 来高亮一个 DOM 节点

Hover over a Live Expression to highlight a DOM node

当一个 Live Expression 的执行结果为一个 DOM 节点时, 悬浮在 Live Expression 的结果之上来在视口中高亮该结果.

When a Live Expression evaluates to a DOM node, hover over the Live Expression result to highlight that node in the viewport.

图片 1. 悬浮在一个 Live Expression 的结果之上来在是口中高亮这个节点

Figure 1. Hovering over a Live Expression result to highlight the node in the viewport

存储 DOM 节点为全局变量

Store DOM nodes as global variables

为了存储一个 DOM 节点为全局变量, 在 Console 中执行一个表达式, 其执行结果为一个节点, 右击执行结果, 然后选择 Store as Global variable.

To store a DOM node as a global variable, run an expression in the Console that evaluates to a node, right-click the result, and then select Store as global variable.

图片 2. 在 Console 中 Store as global variable

Figure 2. Store as global variable in the Console

或者, 在 DOM 树中右击该节点, 然后选择 Store as global variable.

Or, right-click the node in the DOM Tree and select Store as global variable.

图片 3. 在 DOM树中 Store as global variable

Figure 3. Store as global variable in the DOM Tree

Initiator 和 priority 信息现在存在 HAR 导入和导出中

Initiator and priority information now in HAR imports and exports

如果你想要和同事分享诊断网络的日志, 你可以将网络请求导出到一个 HAR 文件

If you'd like to diagnose network logs with colleagues, you can export the network requests to a HAR file.

图片 4. 导出网络请求到一个 HAR 文件中

Figure 4. Exporting network requests to a HAR file

要导入这个文件回到网络面板中, 只要拖拽和放下该文件(译者注: 必须在网络面板中)

To import the file back into the Network panel, just drag and drop it.

当你导出一个 HAR 文件的时候, DevTools 现在在 HAR 文件中包含 initiator 和 priority 信息. 当你导入一个 HAR 文件回到 DevTools的时候, initiator 和 Priority 列现在将被填充.

When you export a HAR file, DevTools now includes initiator and priority information in the HAR file. When you import HAR files back into DevTools, the Initiator and Priority columns are now populated.

_initiator 字段提供了有关导致该资源被请求的更多上下文. 其和 Requests 表格中的 Initiator 列相对应.

The _initiator field provides more context around what caused the resource to be requested. This maps to the Initiator column in the Requests table.

图片 5. initiator 列

Figure 5. The initiator column

你可以按住 Shift 并且悬浮在一个请求之上来查看它的启动器(译者注: 引起该请求被发起的请求)和依赖项(译者注: 依赖该请求的请求)

You can also hold Shift and hover over a request to view its initiator and dependencies.

图片 6. 查看启动器和依赖项

Figure 6. Viewing initiators and dependencies

_priority 字段说明浏览器分配给该资源的优先级. 其和 Requests 表格中的 Priority 列相对应, 这一列默认是隐藏的.

The _priority field states what priority level the browser assigned to the resource. This maps to the Priority column in the Requests table, which is hidden by default.

图片 7. Priority 列

Figure 7. The Priority column

右击 Requests 表格的头部, 然后选择 Priority 来显示 Priority 列.

Right-click the header of the Requests table and select Priority to show the Priority column.

图片 8. 如何展示 Priority 列

Figure 8. How to show the Priority column

注意: _initiator 和 _priority 字段以下划线开头是因为 HAR 规范说明自定义的字段必须以下划线开头.

Note: The _initiator and _priority fields begin with underscores because the HAR spec states that custom fields must begin with underscores.

从主菜单进入命令菜单

Access the Command Menu from the Main Menu

使用命令菜单来快速进入 DevTools 面板, 标签, 和特性.

Use the Command Menu for a fast way to access DevTools panels, tabs, and features.

图片 9. 命令菜单

Figure 9. The Command Menu

你现在可以从主菜单打开命令菜单. 点击主菜单 按钮, 然后选择 Run command.

You can now open the Command Menu from the Main Menu. Click the Main Menu button and select Run command.

图片 10. 从主菜单打开命令菜单

Figure 10. Opening the Command Menu from the Main Menu

Picture-in-Picture 断点

Picture-in-Picture breakpoints

Picture-in-picture 是一个新的实验性 API, 其允许一个页面在桌面上面创建一个浮动的视频窗口.

Picture-in-Picture is a new experimental API that enables a page to create a floating video window over the desktop.

在 Event Listener Breakpoints 面板选中 enterpictureinpicture, leavepictureinpicture, resize 复选框, 来在任意一个 picture-in-picture 事件触发的时候停止执行. DevTools 停止在处理函数的第一行.

Enable the enterpictureinpicture, leavepictureinpicture, and resize checkboxes in the Event Listener Breakpoints pane to pause whenever one of these picture-in-picture events fires. DevTools pauses on the first line of the handler.

图片 11. Event Listener Breakpoints 面板下的 Picture-in-Picture 事件

Figure 11. Picture-in-Picture events in the Event Listener Breakpoints pane

(惊喜提示) 在 Console 中执行 monitorEvents() 来监听一个元素的事件触发

(Bonus Tip) Run monitorEvents() in the Console to watch an element's events fire

注意: 该段介绍一个较不为人所知的特性, 但是其已经存在于 DevTools 中很长时间了.

Note: This section covers a lesser-known feature that has been in DevTools for a long time.

假设你想要在这个 button 被聚焦同时依次按下 R, E, D 的时候给它的周围添加一个红色的边框, 但是你不知道要监听什么事件. 使用 monitorEvents() 来在 Console 中打印关于该元素的所有事件.

Suppose you want to add a red border around a button after focusing it and pressing R, E, D, but you don't know what events to add listeners to. Use monitorEvents() to log all of the element's events to the Console.

获取该节点的一个引用.

Get a reference to the node.

图片 12. 使用 Store as global variable 来获取该节点的一个引用

Figure 12. Using Store as global variable to get a reference to the node
将该节点作为第一个参数传递给 monitorEvents()
Pass the node as the first argument to monitorEvents().

图片 13. 传递该节点给 monitorEvents()

Figure 13. Passing the node to monitorEvents()
和该节点做交互. DevTools 在 Console 中打印关于该节点的所有事件.
Interact with the node. DevTools logs all of the node's events to the Console.

图片 14. Console 中的该节点的事件

Figure 14. The node's events in the Console

调用 unmonitorEvents() 来停止在 Console 中打印事件.

Call unmonitorEvents() to stop logging events to the Console.

unmonitorEvents(temp1);
复制代码

如果你只想监听某一个特定的事件或者是某类型的事件, 给 monitorEvents() 传递第二个参数, 其为数组:

Pass an array as the second argument to monitorEvents() if you only want to monitor certain events or types of events:

monitorEvents(temp1, ['mouse', 'focus']);
复制代码

mouse 类型告诉 DevTools 去打印所有和鼠标相关的事件, 比如 mousedown 和 click. 支持的其他类型为 key, touch, control.

The mouse type tells DevTools to log all mouse-related events, such as mousedown and click. Other supported types are key, touch, and control.

查看 Command Line Reference, 来获得你可以在 Console 中调用的其他方便的函数.

Check out Command Line Reference for other handy functions that you can call from the Console.

反馈

Feedback

想要讨论关于该篇文章的新特性和改动, 或者是其他任何和 DevTools 相关的:

在 Chromium Bugs 发起一个 bug 报告
在 Mailing List 中讨论新特性和改变. 请不要使用该邮件列表寻求帮助. 使用 Stack Overflow, 替代.
使用 Stack Overflow 获取如何使用 DevTools 的帮助. 请不要再 Stack Overflow 上提出 bug. 使用 Chromium Bugs, 替代.
Tweet us at @ChromeDevTools.
在 Web Fundamentals 仓库提出关于该文档的 bug.

To discuss the new features and changes in this post, or anything else related to DevTools:

File bug reports at Chromium Bugs.
Discuss features and changes on the Mailing List. Please don't use the mailing list for support questions. Use Stack Overflow, instead.
Get help on how to use DevTools on Stack Overflow. Please don't file bugs on Stack Overflow. Use Chromium Bugs, instead.
Tweet us at @ChromeDevTools.
File bugs on this doc in the Web Fundamentals repository.

Consider Canary

如果你使用 Mac 或者是 Windows, 考虑使用 Chrome Canary 作为你的默认开发浏览器. Canary 可以让你体验到最新的 DevTools 特性.(译者注: 译者已经将 Chrome Canary 作为默认浏览器很久了, 为 Web 稍作贡献)

If you're on Mac or Windows, consider using Chrome Canary as your default development browser. Canary gives you access to the latest DevTools features.

注意: Canary 一旦构建就会发布, 没有测试. 这意味着 Canary 几乎每月崩溃一次. 通常在一天之内就会被修复. 在 Canary 崩溃的时候你可以回到使用 Chrome Stable.

Note: Canary is released as soon as its built, without testing. This means that Canary breaks about once-a-month. It's usually fixed within a day. You can go back to using Chrome Stable while Canary is broken.

译者注:

译者在翻译的时候保留了英语原文, 希望给你一个原滋原味的阅读体验并且能熟悉一些常见的英文.

希望有读者可以指出我的翻译错误, 感激不尽.

译文转载请注明出处, 文中所有资源 LISENCE 均跟随源资源.

其他双语译文:

React 16.x 蓝图[双语版]

翻译本文时用到的一些工具:

视频下载工具: qdownloader.net/

双语字幕制作工具: arctime.org/index.html

双语字母稿: github.com/Jiang-Xuan/…