#优质博文 #前端 #CSS #AI #MCP #debug
这个好啊，Chrome DevTools MCP 终于能直接介入浏览器调试了。

Let your Coding Agent debug your browser session with Chrome DevTools MCP

AI 摘要：Chrome DevTools MCP 迎来了重大更新，现在允许 AI 编程助手直接连接到活跃的浏览器会话。这项新功能极大地提升了调试效率，编程助手可以重用现有登录会话、访问活跃的调试面板（如网络面板和元素面板），从而实现手动调试与 AI 辅助调试的无缝切换。文章详细介绍了这一功能的实现原理、安全措施（如用户授权弹窗和控制横幅）以及如何配置和使用，为开发者提供了更智能、更便捷的调试体验。

以下是方便搜索索引的大纲(AI 生成)，请读原文

1. Chrome DevTools MCP 新功能概述
• 核心更新：Chrome DevTools MCP 服务器现在支持 AI 编程助手直接连接到活跃的浏览器会话。
• 主要优势
• 重用现有浏览器会话：编程助手可以直接访问已登录的会话，无需重新登录。
• 访问活跃调试会话：编程助手可以直接从 DevTools UI 访问并调查选定的元素或网络请求。
• 工作流改进：实现手动调试与 AI 辅助调试的无缝切换。

2. Chrome DevTools MCP 连接方式
• 现有连接方式
• 使用特定用户配置文件运行 Chrome。
• 通过远程调试端口连接到运行中的 Chrome 实例。
• 在独立临时配置文件中运行多个 Chrome 实例。
• 新增自动连接功能：通过 --autoConnect 选项，MCP 服务器可以请求远程调试连接。

3. 远程调试工作原理及安全措施
• 基础机制：基于 Chrome 现有的远程调试能力。
• 启用步骤：用户需在 chrome://inspect#remote-debugging 中手动启用远程调试。
• 连接流程：
• MCP 服务器配置 --autoConnect 选项后，将尝试连接活跃的 Chrome 实例。
• 用户授权：Chrome 会弹出对话框，要求用户授权远程调试会话，以防止滥用。
• 状态提示：调试会话激活时，Chrome 顶部会显示“Chrome is being controlled by automated test software”横幅。

4. 如何开始使用
• 步骤一：在 Chrome 中设置远程调试
• 导航至 chrome://inspect/#remote-debugging。
• 根据对话框提示允许或禁止传入的调试连接。
• 步骤二：配置 Chrome DevTools MCP 服务器
• 在 MCP 服务器配置中，为 chrome-devtools 服务添加 --autoConnect 命令行参数。
• 示例配置适用于 gemini-cli。
• 步骤三：测试设置
• 运行 gemini-cli 并输入性能检查指令。
• 允许 Chrome 弹窗中的远程调试请求。
• 验证 MCP 服务器是否能成功打开网页并执行性能追踪。
• 更多信息：可参考 GitHub 上的 README 文档获取完整说明。

5. 未来展望
• 调试任务交接：AI 编程助手可以接管调试任务，提升效率。
• 面板数据暴露：计划逐步向编程助手暴露更多 DevTools 面板数据。

author Sebastian Benz

Chrome for Developers

Let your Coding Agent debug your browser session with Chrome DevTools MCP  |  Blog  |  Chrome for Developers

We shipped a new feature to the Chrome DevTools MCP server that is going to make it a lot easier for your coding agent to debug your current browser sessions.

#优质博文 #前端 #css #javascript #debug
What a diff'rence a semicolon makes

AI 摘要：本文通过作者在调试 JavaScript 代码时遇到的一个由分号 (semicolon) 缺失引发的 TypeError: console.log(...) is not a function 问题，强调了分号在 JS 语法中的关键作用。作者通过简短实例和社区讨论，剖析了分号自动插入机制导致的意外行为，并分享了这一微小失误引发长时间调试的经历，提醒开发者关注代码细节。

1. 问题背景与经历
• 作者在调试时随意插入了 console.log('here') 语句并未加分号，位置恰好出现在 IIFE（立即执行函数）之前。
• 缺少分号导致 JavaScript 引擎将后续的 function 代码当作 console.log 的参数，最终抛出 TypeError。

2. 原因分析
• StackOverflow 社区成员 Sebastian Simon 解释了该错误机制：没有分号时，代码被解析为 console.log()(function(){})，而 console.log() 的返回值是 undefined，无法作为函数调用。
• 提供了最小可复现实例代码来说明问题本质。

3. 社区互动与反思
• 在 Mastodon 社区，Andre 提醒作者 Chris Coyier 的 Web Development Merit Badges（网页开发徽章）。
• 作者幽默地调侃自己，为“因为一个字符小失误花了一小时调试”自豪地领取了徽章，凸显开发中对细节的重视与共鸣。

author Thomas Steiner

Tomayac

What a diff'rence a semicolon makes

The personal blog of Thomas Steiner

#优质博文 #前端 #debug #javascript
专业前端都这么使用console?

AI 摘要：本文主要介绍了 JavaScript 中 console 对象的高级用法，以提高前端开发调试效率。首先，介绍了 console.time() 和 console.timeEnd() 用于计算代码块的执行时间。接着，通过 console.profile() 和 console.profileEnd() 分析复杂逻辑的性能瓶颈。此外， console.count() 用于追踪特定代码块或函数的执行次数，而 console.trace() 帮助开发者理解代码执行流程，通过输出调用堆栈。 console.table() 则以表格形式清晰展示对象或数组数据。 console.group() 和 console.groupEnd() 允许开发者将输出信息进行分组，以便更好地组织和理解。最后，文中还讨论了 console.log() 的进阶用法，如支持自定义CSS样式输出和格式化输出内容，这些占位符的使用能使输出信息更加结构化和清晰。这些高级用法不仅仅限于调试，还可以在性能分析和代码优化中发挥重要作用。

via 微信公众号 JS每日一题

微信公众平台

专业前端都这么使用console?

console对于前端人员来讲肯定都不陌生，相信大部分开发者都会使用console来进行调试，但它能做的绝不