- 本文来源: 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 开发者工具的新特性和主要改动包括:
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
继续阅读, 或者是观看该页面的视频版本:
译者注: 视频中提到的 Mordor(摩多) -> en.wikipedia.org/wiki/Mordor
视频说明(源自 YouTube)
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 节点
当一个 Live Expression 的执行结果为一个 DOM 节点时, 悬浮在 Live Expression 的结果之上来在视口中高亮该结果.
存储 DOM 节点为全局变量
为了存储一个 DOM 节点为全局变量, 在 Console 中执行一个表达式, 其执行结果为一个节点, 右击执行结果, 然后选择 Store as Global variable.
或者, 在 DOM 树中右击该节点, 然后选择 Store as global variable.
Initiator 和 priority 信息现在存在 HAR 导入和导出中
如果你想要和同事分享诊断网络的日志, 你可以将网络请求导出到一个 HAR 文件
要导入这个文件回到网络面板中, 只要拖拽和放下该文件(译者注: 必须在网络面板中)
当你导出一个 HAR 文件的时候, DevTools 现在在 HAR 文件中包含 initiator 和 priority 信息. 当你导入一个 HAR 文件回到 DevTools的时候, initiator 和 Priority 列现在将被填充.
_initiator
字段提供了有关导致该资源被请求的更多上下文. 其和 Requests 表格中的 Initiator 列相对应.
你可以 按住 Shift 并且悬浮在一个请求 之上来查看它的启动器(译者注: 引起 该请求被发起 的请求)和依赖项(译者注: 依赖该请求的请求)
_priority
字段说明浏览器分配给该资源的优先级. 其和 Requests 表格中的 Priority 列相对应, 这一列默认是隐藏的.
右击 Requests 表格的头部, 然后选择 Priority 来显示 Priority 列.
注意: _initiator
和 _priority
字段以下划线开头是因为 HAR 规范 说明自定义的字段必须以下划线开头.
从主菜单进入命令菜单
使用命令菜单来快速进入 DevTools 面板, 标签, 和特性.
你现在可以从主菜单打开命令菜单. 点击主菜单 按钮, 然后选择 Run command.
Picture-in-Picture 断点
Picture-in-picture 是一个新的实验性 API, 其允许一个页面在桌面上面创建一个浮动的视频窗口.
在 Event Listener Breakpoints 面板 选中 enterpictureinpicture
, leavepictureinpicture
, resize
复选框, 来在任意一个 picture-in-picture 事件触发的时候停止执行. DevTools 停止在 处理函数 的第一行.
(惊喜提示) 在 Console 中执行 monitorEvents() 来监听一个元素的事件触发
注意: 该段介绍一个较不为人所知的特性, 但是其已经存在于 DevTools 中很长时间了.
假设你想要在这个 button 被聚焦同时依次按下 R
, E
, D
的时候给它的周围添加一个红色的边框, 但是你不知道要监听什么事件. 使用 monitorEvents() 来在 Console 中打印关于该元素的所有事件.
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. -
将该节点作为第一个参数传递给
monitorEvents()
Pass the node as the first argument to monitorEvents(). -
和该节点做交互. DevTools 在 Console 中打印关于该节点的所有事件.
Interact with the node. DevTools logs all of the node's events to the Console.
调用 unmonitorEvents()
来停止在 Console 中打印事件.
unmonitorEvents(temp1);
如果你只想监听某一个特定的事件或者是某类型的事件, 给 monitorEvents()
传递第二个参数, 其为数组:
monitorEvents(temp1, ['mouse', 'focus']);
mouse
类型告诉 DevTools 去打印所有和鼠标相关的事件, 比如 mousedown
和 click
. 支持的其他类型为 key
, touch
, control
.
查看 Command Line Reference, 来获得你可以在 Console 中调用的其他方便的函数.
反馈
想要讨论关于该篇文章的新特性和改动, 或者是其他任何和 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 稍作贡献)
注意: Canary 一旦构建就会发布, 没有测试. 这意味着 Canary 几乎每月崩溃一次. 通常在一天之内就会被修复. 在 Canary 崩溃的时候你可以回到使用 Chrome Stable.
译者注:
译者在翻译的时候保留了英语原文, 希望给你一个原滋原味的阅读体验并且能熟悉一些常见的英文.
希望有读者可以指出我的翻译错误, 感激不尽.
译文转载请注明出处, 文中所有资源 LISENCE 均跟随源资源.
其他双语译文:
翻译本文时用到的一些工具:
- 视频下载工具: qdownloader.net/
- 双语字幕制作工具: arctime.org/index.html
- 双语字母稿: github.com/Jiang-Xuan/…