颠覆性创新：谷歌 Chrome 92 带来的 DevTools 新功能指南

2023-11-02 12:04:56

构建、编辑、调整 CSS Grid 布局的强大助手：CSS Grid 编辑器

CSS 网格布局作为一种强大的布局方式，受到了广泛的欢迎。然而，手动编码 CSS 网格布局却是一项十分费时的工作。幸运的是，Chrome 92 推出了全新的 CSS Grid 编辑器，它可以让您像构建积木一样直观地创建和调整 CSS Grid 布局。

该编辑器会将页面元素按照网格布局进行呈现，您可以通过简单的拖拽来调整元素的位置和大小，而无需手动输入代码。此外，CSS Grid 编辑器还支持多种辅助功能，比如对齐网格线、显示网格区域边框、隐藏网格线等，帮助您轻松完成 CSS 网格布局的构建。

2. 代码审视更高效：JavaScript 调试器改进

Chrome 92 中的 JavaScript 调试器也得到了显著增强。新版本中，调试器支持了断点条件，允许您在满足特定条件时暂停执行代码。这可以帮助您更轻松地追踪代码中的异常情况，并快速定位问题的根源。

此外，JavaScript 调试器还改进了变量监视功能。现在，您可以将变量添加到监视列表中，并在调试过程中实时跟踪变量的值。这对于调试复杂代码非常有用，因为它可以帮助您快速找到变量值的变化情况，并及时发现潜在的问题。

3. 深入了解页面性能：性能工具优化

Chrome 92 还对性能工具进行了优化，使您能够更深入地了解页面的性能状况。新版本中，性能工具可以显示页面加载过程中各个阶段的详细时间线，帮助您快速找出页面加载缓慢的原因。

此外，性能工具还新增了对 HTTP/3 协议的支持。HTTP/3 是下一代 HTTP 协议，它可以提高页面的加载速度和可靠性。通过性能工具，您可以查看页面是否使用了 HTTP/3 协议，并分析 HTTP/3 协议对页面性能的影响。

4. 确保应用程序安全：安全工具增强

Chrome 92 中的安全工具也得到了增强。新版本中，安全工具增加了对跨站点脚本（XSS）攻击的检测和预防功能。XSS 攻击是一种常见的网络攻击，它允许攻击者在您的网站上执行恶意代码。

此外，安全工具还增加了对混合内容的检测和阻止功能。混合内容是指在安全页面（使用 HTTPS 协议）中加载了不安全的资源（使用 HTTP 协议）。这可能会导致安全问题，因为攻击者可以利用不安全的资源来窃取用户数据或植入恶意代码。

5. 提高网站可访问性：辅助功能工具扩展

Chrome 92 中的辅助功能工具也得到了扩展。新版本中，辅助功能工具增加了对色彩对比度的检测功能。色彩对比度是指文本和背景的颜色之间的差异。足够的色彩对比度可以确保文本清晰易读，从而提高网站的可访问性。

此外，辅助功能工具还增加了对 ARIA 标签的支持。ARIA 标签是一种特殊的 HTML 属性，它可以为残障人士提供额外的信息，帮助他们更好地理解网站的内容和结构。

6. 全面掌握网络状况：网络工具更新

Chrome 92 中的网络工具也得到了更新。新版本中，网络工具增加了对 HTTP/3 协议的支持。HTTP/3 是下一代 HTTP 协议，它可以提高网络的速度和可靠性。通过网络工具，您可以查看网站是否使用了 HTTP/3 协议，并分析 HTTP/3 协议对网站性能的影响。

此外，网络工具还增加了对 Service Worker 的支持。Service Worker 是一种特殊的脚本，它可以在浏览器中运行，即使页面已经关闭。Service Worker 可以用来实现离线功能、推送通知等功能。通过网络工具，您可以查看 Service Worker 的状态，并分析 Service Worker 对网站性能的影响。