AI 摘要：Chrome DevTools 139 版本专注于提升开发者体验、生产力及工具可靠性，修复了大量已知问题并增强了测试覆盖率。此次更新亮点包括在 AI 辅助中支持上传图片以提供视觉上下文，在 Network 面板中新增请求头列，以及对核心面板如 Performance、Sources 和 Elements 的持续改进，同时优化了各种调试和辅助功能，旨在提供更流畅、更稳定的开发工作流程。

1. 工具性能与稳定性改进
• 核心开发体验提升: 本版本优先提升产品卓越性，解决了大量已知问题，包括长期存在的视觉故障、可用性问题和设计不一致，将开放问题数量减少了 27%。
• 幕后测试覆盖率增强: 大幅提升了 DevTools 的测试覆盖率，调查并修复复杂的测试失败，并将测试相关问题减少了 54%，从而带来了更流畅、可靠和高效的日常调试和开发工作流程。

2. AI 辅助与智能功能
• AI 辅助支持图片上传: 在 AI 辅助面板中，现在不仅可以自动截屏，还可以上传任意图片到与 Gemini 的聊天中，为提示提供额外的视觉上下文。
• Google I/O 2025 亮点整合: 强调了在 Google I/O 2025 中展示的新 DevTools 功能，包括 Sources 面板连接工作区并保存修改、Gemini 驱动的 CSS 修改和保存、查询性能洞察、自动标注性能发现，以及新的性能洞察功能（重复 JavaScript 和遗留 JavaScript）。

3. 开发者工具面板更新
• Network 面板增强: 在 Network 面板中，现在可以右键点击请求表格中的列名，并选择多个请求头将其添加为列。
• Application 面板改进: 清除 IndexedDB 对象存储时，现在会显示确认对话框，以防止不可逆的操作。
• Sources 面板优化: Logpoints 和条件断点旁边的代码行徽章现在在悬停时会显示相应的日志消息或条件工具提示。
• Performance 面板新洞察: "Layout shift culprits" 洞察现在显示未设置大小的图片链接；"LCP request discovery" 洞察现在显示最早起始点之后的图片加载延迟；修复了部分用户本地存储的过期节流设置格式；事件日志过滤速度得到提升。
• 动画面板调整: 弃用了预览截图功能，因为点击预览动画组提供了类似且更好的体验。
• 辅助功能改进 (Accessibility): Sources > DOM 断点侧边栏（如果存在）添加了 aria-labels；修复了 Console 中 Live expression 文本字段内的 Shift + Tab 键盘导航问题；Settings 现在支持 Cmd/Ctrl + +/-/0 缩放快捷键；Elements > Styles 中的 CSS 提示和警告图标以及 Angle clock 现在可以通过键盘聚焦。

Chrome for Developers

What's new in DevTools, Chrome 139  |  Blog  |  Chrome for Developers

A more reliable and productive Chrome DevTools, support for arbitrary image upload in AI assistance for styling, and more.

《断点单步跟踪是一种低效的调试方法》

曾经我以为编程像解数学题，不同人的解法或稍有区别，但终究殊途同归。然而最近两年，我发现编程更像画画或写作，各人信奉着自己的道。云风的这篇文，坦率说标题有些骇人听闻，但读后确能感受到数十年经验特有的编程智慧，一种哲思。

交互调试工具通常缺乏回溯能力，也就是它们通常反应当下的状态，而不记录过去的。这有些可以通过改进工具来完善，有些则不能。一个常见的场景是，你定下了下一个断点的位置，当调试器停下来的时候，发现状态异常，只能确定问题出在上次断点到当前的位置之间，但想回溯到底发生了什么，某个中间状态是什么，工具却无能为力。而靠大脑推演程序的运行过程的话，一切都是静态图谱，回溯和前行并无太大区别，只是聚焦到时间轴上某个位置而已。这就是为什么受过良好训练的程序员可以一眼看出 Bug 在哪里，而调试器运用高手却需要反复运行两三次才能找到 Bug 的缘故。

试想我们在用交互调试工具时，其实是想知道些什么？无非是程序的运行路径，是不是真的走到了这里，以及程序运行到这里的时候，变量的状态是怎样的，有没有异常情况。日志输出其实在做同样的工作。关键路径上输出一行日志，可以表达程序的运行路径。把重要的变量输出在日志里，可以查询当时的程序运行状态。怎样有效的输出日志自然也是需要训练的技能。

和外挂的调试工具相比，日志具备良好的回溯查询能力。作为 Code Review 的一个辅助，我们大脑其实需要的只是对判断的一个修正：确认程序是否是沿着脑中模拟的路线在行进，内部状态是否一致正常。和调试工具不同，日志不会打断运行过程，对多个程序并行运行的软件，例如 C/S 结构的系统就更为重要了。

其实保留状态信息在交互调试工具中也是非常重要的技巧。我相信很多人和我一样，在调试程序时有时会增加一些临时的全局变量，把一些中间状态写到这些变量中。在交互调试过程中偶尔需要去查看这些状态值。这种临时状态暂存变量，其实也充当了日志的功能。