DevTools (Chrome 66) 上的新功能

Posted 2021-04-28 前端开发与NodeJS全栈开发

 

Chrome 66 即将发布（4月17日），下面罗列了 Chrome DevTools 中新增功能：

• 网络请求面板内的脚本支持黑盒化（Blackboxing in the Network panel）

• 设备模式支持自适应缩放（Auto-adjust zooming in Device Mode）

• 预览及响应标签页支持代码美化（Pretty-printing in the Preview and Response tabs）

• 预览标签内直接渲染 html 页面（Previewing HTML content in the Preview tab）

• style 标签内的样式支持“本地重载”了（Local Overrides with styles inside of HTML）

黑盒化网络请求

我们经常会使用网络面板来查看当前页面请求了哪些网络资源，下图表格中的第四栏会告诉你各个资源是哪个脚本请求的。将鼠标移动到具体请求上，还会出现请求脚本的调用栈。

如果你想屏蔽某个脚本的具体实现细节，你可以使用黑盒化选项，将这个脚本从调用栈中隐藏起来。 

将 request.js 黑盒化过后，我们可以清楚的看到是哪些脚本调用了网络请求库并请求了这些图片资源。 

预览及响应标签支持自动美化代码

如下图，现在网络请求页里预览 JS 脚本时会自动格式化代码

响应标签页里的代码也可以手动进行格式化 

预览标签内可以查看 HTML 页面渲染后的样子

在旧版开发者工具里，对 HTML 文件进行预览时，只有在特定条件下才会触发对 HTML 的简单渲染。

而在新版中，取消了这些限制，现在每次打开预览标签，都会对页面进行渲染。如下图，你可以直接看到看到禁用 JS后 HTML 文件渲染出来的样子。 

设备模式支持自适应缩放

就是设备模式横屏时自动缩放，明明已经实现了呀。。。 

style 标签内的样式支持“本地重载”了

上一个版本的开发者工具引入了一个新的功能：本地重载，它可以将你对页面的修改持久化。之前我们在调试时对页面进行的样式修改，在刷新后都会消失，而本地重载功能能将这些样式调整保存在本地，当你刷新页面时，这些更改不会消失。

上一个版本遗留了一个小问题，就是 style 标签内的样式修改后不能持久化保存，新版开发者工具修复了这一问题。

如下图，如果你开启了本地重载，你现在将 style 标签内的 font-weight 设为其它值后刷新页面，这一修改不会丢失。

小技巧：利用黑盒化功能快速定位监听器代码的原始位置

前端开发者都知道开发者工具可以对各种 DOM 事件打断点，但是由于我们现在使用的框架做了很多包装工作，导致 DOM 断点中断的位置并不是监听器的原始代码。

比如下面这段代码中，click 事件的注册是通过框架来进行的，我们看不到 click 事件的回调函数。 

我们可以将这段进行事件封装的代码黑盒化，因为我们并不关心框架的实现细节

黑盒化过后，框架的代码在调用栈中被隐藏了，我们可以看到原始的事件监听函数。 

原文链接：https://developers.google.com/web/updates/2018/02/devtools

视频版原链：https://www.youtube.com/watch?v=eaYXFTJVewA&t=3s

点击查看原文，可以在 B 站上看视频版。