AI软件产品创业者 | 致力于研究小而美AI产品
Hangzhou
Joined January 2017
- Tweets 616
- Following 1,080
- Followers 1,535
- Likes 939
claude code 4.5 写前端还行，后端逻辑就有点吃力了，之前我都是用codex写后端的，今天早上尝试用claude code 4.5对接api，调了1多小时没有调通，codex一次就定位到错误给解决了。
codex和claude sonnet 4.5左右互博，最后还是gpt-5-codex胜出。
同一个提示词，让它俩出方案，然后互相分析对方方案。
最后sonnet 4.5说，codex分析的非常准确，指出了它方案的关键缺陷😅
现在用 AI 开发网页应用，一个痛点就是 AI 看不到网页运行情况，需要去 Chrome Dev Tool 手动截图，但现在有 Chrome DevTools 的 MCP 工具了，可以集成到你喜欢的 Coding Agent，比如 Codex、Claude Code、GitHub Copilot，这样这些 Agents 可以直接使用 Chrome DevTools 调试网页。
安装方法和常用提示词如下：
-------
Chrome DevTools 为 AI 智能体推出 MCP 协议 | 博客
作者：Chrome 开发者团队
今天，我们正式发布了 Chrome DevTools 模型上下文协议（Model Context Protocol，简称 MCP） 服务器的公开预览版。通过这个新工具，你的 AI 编程助手将可以直接使用 Chrome DevTools 强大的调试功能，极大提升网页开发效率。
很多 AI 编程助手都存在一个基本的缺陷：它们并不能看到自己生成的代码在浏览器中的真实运行状况，就像是闭着眼睛写代码一样。
而 Chrome DevTools MCP 服务器的出现，彻底解决了这个问题。AI 智能体现在能够直接在 Chrome 浏览器中调试网页，享受到 DevTools 的调试功能和性能分析能力，这能有效提高它们定位和修复问题的准确性。
你可以观看下面的视频，直观感受一下：
⸻
什么是模型上下文协议（MCP）？
模型上下文协议（MCP）是一套开源标准，专门用于将大语言模型（LLMs）与外部工具和数据源进行连接。而 Chrome DevTools MCP 服务器正是利用了这一协议，为 AI 智能体带来了浏览器级的调试能力。
举个例子：Chrome DevTools MCP 提供了一个叫做 performance_start_trace 的工具。当你要求 AI 智能体分析网站性能时，它可以调用这个工具自动启动 Chrome、打开你的网页，并记录下性能追踪（performance trace）。随后，AI 智能体可以分析这些数据，为你提供具体的优化建议。
简单来说，Chrome DevTools MCP 让你的 AI 智能体更擅长网页开发中的调试与优化。
想了解更多细节？可以查阅 MCP 官方文档。
⸻
MCP 可以为你做什么？
以下是一些具体示例，你可以用自己喜欢的 AI 工具（例如 Gemini CLI）立即体验一下：
✅ 实时验证代码修改
用 AI 智能体生成修复方案后，立即让 Chrome DevTools MCP 在浏览器中验证修改是否达到了预期效果。
你可以试试这个提示：
Verify in the browser that your change works as expected.
✅ 快速诊断网络和控制台错误
AI 智能体能分析网络请求，快速定位 CORS 跨域错误，或检查控制台日志，弄清楚为什么功能没有按预期运行。
你可以试试这个提示：
A few images on localhost:8080 are not loading. What's happening?
✅ 模拟用户行为
智能体可以自动浏览网页、填写表单、点击按钮，重现 bug 和测试复杂的用户流程，并实时查看运行环境。
你可以试试这个提示：
Why does submitting the form fail after entering an email address?
✅ 调试实时样式和布局问题
让 AI 智能体直接连接到实时网页，检查 DOM 和 CSS，快速给出如何解决布局错乱或元素溢出问题的具体建议。
你可以试试这个提示：
The page on localhost:8080 looks strange and off. Check what's happening there.
✅ 自动化性能审查
AI 智能体能自动进行性能追踪分析，诊断具体的性能瓶颈，比如过高的 LCP（最大内容绘制）指标。
你可以试试这个提示：
Localhost:8080 is loading slowly. Make it load faster.
完整的工具列表可参考工具参考文档。
⸻
快速开始使用
想尝试一下？在你的 MCP 客户端配置中添加以下内容即可：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
测试配置是否成功，可以运行以下提示：
> Please check the LCP of web .dev.
更多详细操作步骤，请访问 Chrome DevTools MCP 官方文档。
Announcing @ChromeDevTools MCP! 🚀
Connect your AI coding agent to Chrome's powerful automation & debugging capabilities with ease.
Key features:
✅ Reliable automation: It can programmatically handle clicks, form fills, dialogs, and page navigation with ease.
✅ Performance insights: Go beyond simple audits. Instruct your agent to record a performance trace and extract actionable insights to optimize your web apps.
✅ Advanced debugging: Empower your AI to analyze network requests, list console messages, take screenshots, and even evaluate scripts in the browser context.
✅ Browser emulation: Easily test different conditions by emulating CPU slowdowns, network throttling, or various screen sizes.
Works well with modern web apps and believe this will unlock new workflows for automated testing, AI-driven debugging, and interactive web development.
And there's much more to come!
昨天用户反馈无法登录,搞了半天才发现,登录按钮有bug，点击有时不能触发，体验极差，
用codex和Claude code搞了几轮都没解决。
后来让codex提出一个排查方法，我按照他说的去截图，一次就定位到问题了。
在 Google 结果页点击 Tools → Time → Custom range，时间设定8月14到8月16日，
这样就可以看到网站这3天的外链情况。当然，用这种方法，会有一些干扰，需要自己排除一下。
我用这种方法，找到了这个网站最开始上线时提交外链的地方，快去试试吧！
ChatGPT告诉了我一个方法：
用"example.com" -site:example.com + 设置时间，可以看到这个网站在这段时间内的外链情况，
还是拿nanobanana.ai举例，Google搜索输入"nanobanana.ai" -site:nanobanana.ai，
怎么分析一个网站的冷启动外链是什么？
如果一个网站已经上线了一段时间，那么有些外链就不容易发现了，
比如免费版ahrefs.com/zh/backlink-check… 最多只能看20个外链。
Semrush我看了，有的外链会没有，不知道为什么，nanobanana.ai有的外链，在上面就找不到。
那么还有什么其他的方法吗？
