Chrome DevTools 在 121 版本中引入了多项新功能和改进。这些更新包括：

1. Elements 改进：支持 @font-palette-values CSS at-rule，允许自定义 font-palette 属性的默认值。还新增了一种情况，即在 Elements > Styles 中解析作为另一个自定义属性的后备的自定义属性。

2. 增强的源映射支持：默认启用了在 Settings > Experiments 中使用源映射解析表达式中的变量名的功能，以便在合并、缩小或编译代码后在 Sources 和 Scope 中调试原始代码。

3. Performance 面板改进：Interactions 跟踪增加了显示输入和呈现延迟的指示。Bottom-Up、Call Tree 和 Event Log 选项卡新增了三个高级过滤按钮：匹配大小写、正则表达式和完整单词匹配。

4. Sources 面板中的缩进标记：为方便起见，现在使用垂直线标记缩进的代码块。

5. Network 面板中的工具提示：当您将鼠标悬停在请求的 Headers 和 Response 选项卡旁边的紫色点图标上时，会显示工具提示，告知 DevTools 更改的内容。

6. 新的命令菜单选项：新增了向 Command Menu 中添加或删除网络请求阻止模式的命令。

7. 移除 CSP 违规实验：移除了在版本 89 中引入的实验性 CSP 违规选项卡。

8. Lighthouse 11.3.0：Lighthouse 面板现在运行 Lighthouse 11.3.0，支持在 404 页面上运行报告。

9. 无障碍性改进：在 Network > Payload 中，现在可以使用 tab 键聚焦查看源代码和查看 URL 编码按钮，并按 Enter 或 Space 键触发相应操作。

10. 其他显著修复和改进：包括性能方面的改进，Console 快捷键的更新，以及 Elements 中对 iframe 元素检查的错误修复等。

#Chrome #DevTools

https://developer.chrome.com/blog/new-in-devtools-121?hl=en

如何在浏览器的控制台中使用 CSS、SVG 和 HTML 来创建有趣的视觉效果。

1. 🖥 文章介绍了在浏览器控制台中使用 CSS、SVG 和 HTML 创建视觉效果的技术。

2. 🎨 通过特殊的 `%c` 语法，可以在 `console.log` 或 console.info 中应用 CSS 样式。

3. 🛠 对于调试目的，通常使用 `console.log`，而对于更相关的用户信息，则使用 console.info。

4. 🌟 可以在控制台消息中渲染 SVG 作为数据图像（data:image），但 SVG 必须包含 xmlns 属性。

5. 🚫 控制台中的 SVG 用作背景图像时，其内部的 url() 函数只能使用一次。

6. 💻 在 SVG 内部，可以通过 foreignObject 使用 HTML，但有一些限制，例如不能使用 <a>** 标签或事件监听器。

7. 🎭 使用 CSS 动画和关键帧，可以在控制台中创建动态效果，如文本或元素的动画显示。

8. 🚨 在控制台中呈现的 SVG 作为背景图像不能添加点击事件或链接。

9. 📏 在控制台中，消息的宽度由文本决定，不支持响应式宽度元素。

10. 🔧 没有直接的方法来检测控制台是否已打开，但可以使用第三方包来尝试检测。

11. 🖼 文章展示了多种在控制台中使用这些技术的例子，包括动画和 ASCII 艺术。

#Chrome #DevTools

https://frontendmasters.com/blog/console-delight/?utm_source=CSS-Weekly&utm_campaign=Issue-575&utm_medium=web

在 DevTools (Chrome 122) 的最新更新中，Chrome 开发团队为 Chrome DevTools 带来了一系列新功能和提升，以便开发者更高效地进行网页开发和优化。

以下是此次更新的亮点：

1. Recorder 扩展正式上线：可以从 Recorder 面板的动作栏直接下载并获取输出和重播 Recorder 扩展。

2. 网络改进：
- “状态”（Status）栏现在始终显示失败原因。
- “请求”（Request）的复制子菜单有了更好的组织，特别是 Windows 系统下的“复制为 cURL”（Copy as cURL）功能现在能更准确地复制命令。

3. 性能提升：
- Performance 面板顶部的时间轴现在可以设置面包屑，并在它们之间跳转。
- Performance 面板的“主轨迹”（Main track）默认显示事件启动器和接下来由其引起的事件之间的关联箭头。
- Node.js DevTools 的 Performance 面板新增了 JavaScript VM 实例选择器菜单。

4. 元素改进：
- 可编辑的 ::view-transition 伪元素出现在“样式”（Styles）面板中。
- align-content 属性现在对所有块容器有效。

5. 源码改进：
- 新快捷方式和命令，例如在 Sources 中使用特定的组合键点击行号创建 logpoint。

6. 模拟可折叠设备的姿态支持：设备模式现在允许你为模拟的可折叠设备设置连续（Continuous）或折叠（Folded）的姿态。

7. 动态主题：DevTools 现在自动与 Chrome 的颜色主题匹配。

8. 第三方 cookies 淘汰警告：Network 和 Application 面板现在都会高亮并显示受第三方限制影响的 cookies 旁边的警告。

9. Lighthouse 11.4.0：Lighthouse 面板现在运行 Lighthouse 11.4.0 版本，并增加了新的审查项目。

10. 无障碍性改进：对无障碍选项进行了多处提升，比如自动聚焦、改善屏幕阅读器的通告等。

11. 其他亮点：包括多项 bug 修复和小改进，比如改善动画和网络相关的用户体验等。

#Chrome #浏览器 #DevTools

https://developer.chrome.com/blog/new-in-devtools-122?hl=zh-cn

DevTools（Chrome 123）新功能

1. 查找复活节彩蛋：为庆祝愚人节，DevTools 团队在 DevTools 中隐藏了一个彩蛋，可以通过一个五彩斑斓的💫 emoji 找到它。

2. Elements 面板更新：
- 现在可以在 Elements > Styles 标签下 Toggle elements state`（:hov）按钮中的 `Emulate a focused page 选项下模拟焦点页面，以前这项功能只能在 Rendering 面板找到。
- Elements > Styles 现在允许使用颜色选择器、角度时钟和缓和编辑器在 var() fallbacks 中。
- CSC 长度工具被弃用了，由于用户反馈它降低了工作效率且价值不大。

3. Performance 面板更新：Performance > Main track 的火焰图现在可以在你循环搜索结果时，在相应事件上方显示一个弹出窗口。

4. Network 面板更新：
- Network > EventStream 标签新增了一个清除按钮，用于清除表格中捕获的事件，并支持使用正则表达式的搜索过滤器。
- Network > Cookies 标签现在显示第三方 cookies 的豁免原因的提示。

5. Sources 面板新功能：Sources > Breakpoints 部分将 “启用所有断点” 与 “禁用所有断点” 选项重新添加到下拉菜单中。

6. Node.js 的 DevTools 中查看加载的脚本：DevTools for Node.js 现在可以在 Sources > Scripts 导航树中显示加载的脚本。

7. Lighthouse 11.5.0：Lighthouse 面板现在运行的是 Lighthouse 11.5.0 版本，包括估算布局位移成因的新审查等重要更新。

8. 无障碍（Accessibility）更新：增加了屏幕阅读器的多项新功能及正确的表格渲染。

9. 其他亮点：更新了 DevTools 的字体以匹配 Chrome，改进了性能、Sources、Network > Responses 的相关特性与修复。

#chrome #Devtools

https://developer.chrome.com/blog/new-in-devtools-123?hl=en

现在（Chrome 123+），Chrome DevTools（Chrome开发者工具）已经可以与 Chrome 主题完美协调！Chrome 刚刚引入了动态主题功能，新加入了对 Material Design 3 的支持。

#Chrome #DevTools

https://twitter.com/addyosmani/status/1770119970263027742

Chrome 124 开发者工具的更新特性：

1. 新增 Autofill 面板：提供自动填充表单的详细信息查看功能，包括表单字段、预测的自动填充值和保存的数据。

2. 增强的网络限流功能针对 WebRTC：为自定义网络限流配置添加了与数据包相关的参数，包含丢包率、队列长度和包重排序标志，以测试实时通讯应用。

3. Animations 面板支持滚动驱动的动画：现在可以在 Animations 面板中检查滚动驱动的动画，动画组现展示像素值，而非毫秒。

4. Elements > Styles 面板改进的 CSS 嵌套支持：样式标签页现在以缩进形式展示嵌套样式，并用大括号包裹。

5. Performance 面板增强功能：可以在 flame chart (火焰图) 中隐藏不相关的函数及其子函数；当选中事件时，现在会显示从该事件发起到它引发的事件的箭头。

6. Lighthouse 更新至 11.6.0 版本：包括新增的“启用 JS 抽样”设置，该设置默认关闭，但能为性能追踪添加详细的 JavaScript 调用栈。

7. Memory > Heap snapshots 的特殊类别添加工具提示：在特殊对象组上悬停时，会显示工具提示，包含简短描述和文档的详细链接。

8. Application > Storage 更新：显示共享存储区域用量；清除了不再支持的 Web SQL 部分。

9. Coverage 面板改进：状态条现在能正确计算筛选 URL 的使用统计数据，使用的代码颜色从红色改为灰色以增强可见性。

10. Layers 面板可能会被弃用：由于使用率低，现在展示警告横幅，欢迎用户反馈意见。

11. JavaScript Profiler 面板正式弃用：无法再启用，建议用 Performance 面板取代性能剖析。

12. 其它杂项增强：包含网络、性能监视器、源码、设置和开发资源等功能的修复和改进。

#Chrome #DevTools

https://developer.chrome.com/blog/new-in-devtools-124?hl=en

前端开发者在浏览器的 DevTools 中花费大量时间，这篇文章收集了在不同浏览器中的 DevTools 使用技巧。

1. 检查悬停弹出内容：利用 Chromium 浏览器的 "Emulate a focused page" 选项，用户可以在使用 DevTools 时保持页面聚焦，轻松检查悬停时才显示的元素。

2. 使用 logpoints：在 Chromium 浏览器和 Firefox 里，可以不在代码中添加 console.log() 来输出日志，而是在 Source 面板中添加 logpoints 进行调试。

3. 模仿可折叠设备：一些浏览器允许模拟可折叠设备或双屏，通过 CSS 媒体查询和 DevTools 的设备仿真模式设计适应该类设备的网站界面。

4. 自动完成样式：Chromium 浏览器允许用户仅输入值，DevTools 会自动建议最接近的属性-值对，如 "bold" 会建议 "font-weight: bold"。

5. 颜色格式：多数浏览器的 DevTools 允许用户按住 Shift 键并点击色彩预览框来切换多种颜色格式，比如 hex、rgb、hsl 和 hwb。

6. 捕获高分辨率截图：在 Chromium 浏览器和 Firefox 中，可以使用 DevTools 内置的工具来捕获整个页面或视口的高分辨率截图，无需额外工具。

7. 检查事件流：在 Chromium 浏览器中，即使服务器使用 Server-Sent Events 发送事件流，也可以通过将请求打开，并导航至 EventStream 标签页来检查进来的流。

8. 查看和复制样式更改：Firefox 和 Safari 的 DevTools 允许查看所有更改过的样式并轻松地将其复制回编辑器。

9. 实时表达式：在 Chromium 浏览器的 Console 中，可通过 Live Expressions 功能简化重复输入同一 JavaScript
表达式的流程，它会实时评估表达式的值。

10. 调试水平滚动条：Firefox 和 Polypane 提供了独特的方式来识别页面上导致水平滚动条的元素，有助于解决前端开发中常见的问题。

这些技巧不仅可以提高工作效率，还可以帮助前端开发者更好地发挥 DevTools 的全部潜力。通过这篇文章，读者可以了解到提升开发流程的有用技巧，从而更精准和高效地使用 DevTools。

#Chrome #前端 #DevTools

https://frontendmasters.com/blog/devtools-tips-tricks/

Chrome DevTools 在其最新版本 125 中引入了一系列改进和新功能，旨在提高开发者的调试和开发效率。以下是一些关键更新的概要：

元素与样式

支持 @position-try 规则，这是一种新的 CSS 功能，用于改进元素的定位。

源代码面板改进

1. 自动美化打印和括号闭合的配置，提升了代码的可读性。
2. 已处理的被拒绝 Promise 现在会被识别为已捕获，这有助于更准确地调试异步操作。

控制台错误原因

控制台现在能够显示错误原因链，帮助开发者更快地定位问题源头。

网络面板改进

1. 新增了对 Early Hints 标头的检查功能，这是一种 HTTP 状态代码，用于提前发送关键资源的提示。
2. 用户可以根据需要隐藏网络面板中的瀑布流列。

性能面板改进

1. 新增了捕获 CSS 选择器统计信息的功能，帮助开发者识别和优化长运行时间的样式重新计算事件。
2. 新的配置模式允许更改性能面板中轨道的顺序和隐藏轨道。

内存面板

用户现在可以在内存面板中忽略保留器，这有助于更清晰地分析内存使用情况。

Lighthouse 11.7.1

Lighthouse 面板更新至 11.7.1 版本，其中包括对发布商广告插件的弃用支持。

其他亮点

1. 记录器面板正式退出预览状态，提供更稳定的使用体验。
2. 控制台和源代码面板在语法高亮和错误处理方面进行了改进。
3. 网络面板的 Cookies 标签页修复了某些 bug，提升了用户体验。

#Chrome #DevTools

https://developer.chrome.com/blog/new-in-devtools-125?hl=en

这个在 Chrome DevTools 根据 JavaScript 报错后来向 AI 提问解决方式有点东西，就是还是需要复制到对应的地方，后续可能会支持一键尝试修复。

感觉 AI Debugger 也不是不可行，只能慢慢演进。

#AI #DevTools #Google

https://developer.chrome.com/static/blog/web-at-io24/image/understand-console-error-with-ai.mp4

Chrome DevTools 最新推出的功能 “Understand console messages with AI” 可通过 AI 帮助开发人员更好地理解控制台中的错误和警告信息。本功能基于 Google 的生成式人工智能技术（Gemini）来提供详细的解释。

#DevTools #AI #Chrome #Gemini

https://levix.notion.site/Gemini-Understand-errors-and-warnings-better-with-Gemini-d71a44ec6fcd413096b11fe0e145841b?pvs=74

Chrome 126 中 DevTools 的新功能

#Chrome #DevTools

https://levix.notion.site/Chrome-126-DevTools-What-s-new-in-DevTools-Chrome-126-f65e3697959a4e88b7fb95395261ef0e?pvs=74

DevTools 中可定制性能工作流的 3 个新功能

#DevTools #性能

https://levix.notion.site/DevTools-3-3-new-features-to-customize-your-performance-workflows-in-DevTools-9ce95d5eb3754418be8af967f2a57178?pvs=74

Chrome 127 版本中 DevTools 的新增特性

#Chrome #DevTools

https://levix.notion.site/Chrome-127-DevTools-What-s-new-in-DevTools-Chrome-127-1f1ead1b1a5b4ee79fea2e655a02100f

Chrome DevTools 性能面板经过重新设计，新增实时查看本地核心网络指标（Core Web Vitals）性能的功能。无需录制，即可即时查看页面加载和交互过程中的指标变化，如最大内容绘制（Largest Contentful Paint）、累积布局偏移（Cumulative Layout Shift）和交互到下一绘制（Interaction to Next Paint）。

#DevTools #Chrome

https://developer.chrome.com/blog/devtools-realtime-cwv?hl=en

Chrome 131 版本正式宣布弃用实验性的 Performance Insights 面板。该面板将在 2025 年初的 Chrome 版本中从 DevTools 中完全移除。

Performance 面板包含了大量信息，对于如何开始调试特定性能和用户体验问题，尤其是 Core Web Vitals，可能会感到困难。

Performance Insights 面板旨在自动隔离并关注相关信息。现在，这些实验的最佳成果正在被整合回 Performance 面板，并与 Lighthouse 引擎结合，以新的形式出现在 Performance 面板中。新增的侧边栏和时间线上的额外数据覆盖将提供页面加载和运行的见解，并提供性能和用户体验改进的建议。

#Chrome #性能 #DevTools

https://developer.chrome.com/blog/insights-panel-deprecation?hl=en

Chrome DevTools 的性能面板新增了 Insights 侧边栏，旨在帮助开发者更高效地分析和优化网页性能。该功能于 Chrome 131 版本引入，并在后续版本中不断扩展和改进。

#Chrome #性能 #DevTools

https://levix.notion.site/DevTools-Insights-Insights-sidebar-in-the-DevTools-Performance-panel-1d3383a71284802badd4f05aea4370b6

Chrome DevTools 更新

Gemini 集成：开发者可以通过 Gemini 修改和保存 CSS 更改，并将更改保存到本地工作区。此外，Gemini 还可以生成性能洞察的标注，并在性能追踪中添加截图，为开发者提供更直观的视觉辅助。

性能面板更新：性能面板新增了两项洞察功能——重复的 JavaScript 和 遗留的 JavaScript。前者可以识别页面中重复加载的大体积 JavaScript 模块，后者则能检测到为兼容旧浏览器而加载的 polyfills 和转换代码，帮助开发者优化代码以适应现代浏览器。

工作区连接功能：开发者可以将本地文件夹连接到 DevTools 的工作区，从而将 JavaScript、HTML 和 CSS 的更改保存回本地源文件，这一功能支持自动和手动连接。

Lighthouse 12.6.0：Lighthouse 面板升级到 12.6.0 版本，新增了性能洞察审计功能，开发者可以在 Lighthouse 报告的性能类别中尝试使用这些洞察。

其他改进：包括网络面板新增服务器计时解析功能、性能面板中“使用高效的缓存生命周期”洞察功能改进、以及屏幕阅读器对更多功能的支持等。

#Chrome #Gemini #DevTools

https://developer.chrome.com/blog/new-in-devtools-137?hl=en