Chrome 66 开发者工具新特性介绍

原文链接： developers.google.com/web/updates…

编者注：

本文对是对Google开发者网站发布的关于“Chrome 66中开发者工具新特性介绍”的转译（非纯翻译）

如果你想体验这些特性，需要安装相应的Chrome的Canary通道版本。

来自原作者 Kayce Basques 的提醒：本次更新的视频介绍版本，将在2018年4月中旬发布。

Network 面板中加入了“列入黑盒（Blackboxing）”功能

我们都知道，Network面板中的请求列表中有一个“发起者（Initiator）”列，该列会给出资源被请求的原因。例如，某段Javascript代码发起了一个图片请求，那么“发起者”列将会给出发起该请求的代码所在的文件及其行号。

提示: 右键点击列表的表头可以显示/隐藏指定的列。

这个特性非常棒，但是这有一个问题：假如所有的请求都是通过调用框架中封装好的接口发起的，那么该列其实就没什么用了，因为所有的请求都指向框架中的同一行代码，以下图为例：

上图中，“发起者”列显示所有的请求的“发起者”都在request.js中的弟2行。

这并不是我们想要的，我们真正想知道的是发起请求的应用层代码的信息，这次的更新就可以满足这种场景，步骤是：

将光标悬停在“发起者”列上，在浮出的气泡中，会显示发起这次请求的调用栈。
右击你希望从“发起者”信息中隐藏的调用。
选择“列入黑盒脚本（Blackbox script）”。现在，“发起者”列将隐藏所有来自这个脚本的调用。

上图中，我们将request.js列入了黑盒脚本，来看下效果：

现在，“发起者”显示的信息就变得非常有用了。

提示

可在设置(Settings)中的“黑盒(Blockboxing)”标签页中管理你的“黑盒脚本列表”。

更多关于“列入黑盒”功能的介绍，可查看《如何忽略某个脚本或符合某种规则的一系列脚本（Ignore a script or pattern of scripts）》。

预览(Preview)标签和响应(Response)标签中的“美化显示”功能

现在，Network面板中的Preview标签页如果检测到了资源是经紧缩(minified)的，则默认会对资源进行美化显示(Pretty-printing)。

如果要查看未紧缩(unminified)过的版本，可以切换至响应(Response)标签。在Response标签页中，同样你可以打开美化显示效果，点击左下角新加入的格式化(Format)功能按钮即可。

预览标签页支持预览HTML内容

对于HTML资源，在本次更新之前的版本里，预览(Preview)标签在某些情况下显示的是HTML的源代码。而现在，预览标签显示的总是对HTML进行基础渲染过后的效果。因为这个特性的目的并不是用来查看实际效果的，所以显示出来的可能与真实浏览器窗口中显示的有些许出入。如果你想查看HTML代码，需要切换至响应(Response)标签页，也可以右击资源（请求列表），在弹出菜单中选择“在源代码面板中打开(Open In Sources panel)”。

设备模式支持自动调整缩放比例

当“设备模式(Device Mode)”启用后，打开“缩放比例（Zoom）”下拉菜单，选择“自动调整（Auto-adjust）缩放”，这样，当你改变设备的持拿方向时，视窗的大小会自动调整，以此保证页面的缩放效果。（编者注：该处可能转译不到位，请读者留意，原文如下）

When in Device Mode, open the Zoom dropdown and select Auto-adjust zoom to automatically resize the viewport whenever you change device orientation.

视频演示（需越墙）：www.youtube.com/watch?v=OCX…

本地覆盖(Local Overrides)功能现在支持HTML内的样式

在Chrome 65首次引入“本地覆盖(Local Overrides)”功能时候，还无法跟踪定义在HTML内的样式改动。以下图举例：图中显示，在文档中声明了一个设置h1的字体为粗体的样式规则。

在Chrome 65中，如果你通过样式（Styles)面板修改了这个font-weight的声明，本地覆盖功能并不会发现到这个修改。换言之，如果你再次重载这个页面，像这类的修改就并不会生效。

注意：本地覆盖功能能跟踪到这类修改的前提是这些样式必须是事先定义在HTML文档中的，那些通过脚本动态添加到 HTML文档上的样式，本地覆盖功能还跟踪不到。

题外提示：将框架脚本列入黑盒脚本来让事件断点变得有用

在我发布Javascript调式入门(Get Started With Debugging JavaScript)视频后，一些观看的朋友在评论中指出事件断点在基于框架之上开发的应用中并没有没什么帮助，因为事件监听器通常会被框架包装起来。例如，在下图中，我设置了一个单击事件的断点，当我单击图中的按钮后，开发者工具会自动将JS的执行暂停在监听函数代码第一行所在位置，这个例子中，暂停在了Vue.js的内部代码中的第1802行，显然这对我们是没有什么帮助。