你不知道的 DevTools

大家好我是小麦，欢迎来到新一期的《前端杂谈》。

这一期的主题是 Chrome 浏览器的开发者工具 DevTools，想必大家并不陌生。

它的核心使用场景无非是审查元素、分析请求、检查报错，或是断点调试。

实际上它能做的远不止于此。

那么今天就来分享几个你或许没用过，但又非常实用的功能。

特别是它最新的 AI innovations 系列功能，能为你带来非常不一样的开发体验。

在 Elements 面板中，选中使用了 Flexbox 或 Grid 布局的元素，点击右侧的 flex 按钮，即可查看布局框的位置和尺寸。

在右侧样式面板也可调整关联属性查看布局效果。这对于学习理解 Flexbox 或 Grid 布局原理非常有帮助。

logpoint 顾名思义为“打印点”，在 Sources 面板中使用右键 Add logpoint 即可添加一个 JS 表达式，可以看到出现一个紫色的标签，当代码执行到此处时，会自动在控制台打印该表达式的值。

使用 logpoint 可以在不改动源代码的情况下打印内容，是一种快速审查程序运行态变量值的做法。

Code Coverage 是一种可视化代码覆盖率的工具，点击右上角菜单 -> More tools -> Coverage 打开覆盖率面板。

点击记录按钮后刷新页面，可以看到当前页面执行了哪些 JS 或 CSS 代码，红色表示已执行或使用，灰色表示尚未执行或使用。

和单元测试覆盖率不同的是，这里的运行时覆盖率，能帮助我们检查项目在运行状态下死代码的分布情况，给后续性能优化提供参考依据。

CSS Overview 是一个可以一键提取网站 CSS 信息的工具。

点击右上角菜单 -> More tools 选择 CSS Overview。

点击 Capture overview 即可看到网站的配色方案、字体信息、无效 CSS、屏幕适配参数等信息。

有了它我们不仅可以检查自己的项目是否符合设计规范，还能轻松“参考”他人的设计。

AI innovations（AI 创新）是 Google 将自家 Gemini AI 模型融入 DevTools 的一次大胆尝试。

目前 AI innovations 包含四大功能，可在 DevTools 设置面板下的 AI innovations 选项卡中开启。

控制台洞察可以利用控制台数据自动分析错误。

点击报错内容右上角的灯泡图标，即可查看关于该错误的详细解释和解决方法。

这个例子演示了一个跨域错误，跨域错误很常见但也分许多场景。

AI 可以根据报错信息的上下文给出具体解法，我们不仅可以了解什么是 CORS 安全策略，还能有针对性地解决当前这个场景下的问题。

AI 助理是一个非常强大的功能，它可以从多个维度帮助你分析和解决问题。

在 Elements 面板下选中元素，右键点击 Ask AI，即可结合该元素的上下文进行对话。

比如询问为什么这个元素看不见，为什么这个元素和别的重叠了，如何居中元素等等。

你甚至可以在这里通过自然语言调整元素样式，然后参考它提供的代码。

在 Network 面板中，同样可以使用 Ask AI，

比如询问为什么这个请求很慢，为什么请求失败了等等。

它会去分析与这个请求关联的上下文，然后给出相应答案。

在 Sources 面板中，同样可以使用 Ask AI 进行对话，

比如询问这个脚本是干什么的，用到了哪些 Web API，这个样式文件是否适配了小屏幕等等。

较为进阶的 Web 开发者会使用 Performance 性能面板分析应用性能。这个功能很强大，但也非常复杂。

比如在分析不同程序耗时、观察调用栈、排查火焰图性能瓶颈时依旧十分繁琐。

现在，通过 AI 助理的性能分析功能，可以更有目的和效率地排查性能问题。

比如通过 Ask AI 直接询问最影响页面加载时间的是哪段代码？

它会像一位经验丰富的老登一样，简明扼要地给出关键信息，直击问题根源。

自动注解是一个比较简单但挺有价值的功能。

在性能面板中，选择轨迹或火焰图中的方块，可右键让 AI 自动打上一个标签，这有助于我们与他人共享自己的发现，适合团队协作的场景。

比如给质量管理人员提供一份可交互的性能分析报告。

如果说把代码编辑器搬到任何地方是程序员的一种执念，

那现在为什么不给它加入 AI 功能呢？

过往我们很少会在 DevTools 中编写大段代码，因为它的体验不够理想。

现在在 DevTools 的控制台或源代码面板中编写代码时，即可看到 AI 代码补全提示。

DevTools 作为宇宙级 Web 调试神器，上面展示的不过冰山一角。

它的价值不仅在于提升工作效率，在我看来更重要的是，可以通过它了解更深层次的 Web 技术。

比如借助 Performance 工具了解用户体验的度量指标。

借助 Network Timing 工具理解 HTTP 请求会经历哪几个阶段的耗时。

借助 Memory 工具理解游离 DOM、内存快照和浏览器 JS 对象的内存分布。

借助 Animations 工具观察和调整 CSS 动效曲线等等。

这些功能可能平时很少用到，但只要稍微深入一番定会有所收获，快快探索起来吧。

那么这就是本期视频的全部内容了，我是小麦，我们下期再见。