最近我身边很多程序员朋友开始从 Claude Code 转向了另一个工具，正是突然大火的开源项目 OpenCode。

Claude Code 完全指南:使用方式、技巧与最佳实践 最近在深度使用 Claude Code，发现真的很香！即整理了一份全面的指南，从零开始逐步了解 Claude Code 的核心功能、高级特性

这篇上篇主要讲 MCP 背景与价值、chrome-devtools-mcp 的定位与 26 个工具分类、四层架构（工具/响应/上下文/浏览器）等实践。

哈喽大家好，我是成峰！ 我花了一个周末测试，用 Chrome mcp 替代了 大部分付费AI工具！ Chrome MCP就是让Claude直接控制Chrome浏览器的工具。 听起来没啥特别，但它能做的

做前端开发的时候，经常遇到这样的场景： 页面性能慢，想看看是哪里拖慢了加载？ 控制台报错了，想让 AI 帮忙分析错误原因？ 想自动化测试页面交互，但写 E2E 测试太繁琐？ 网络请求出问题了，想快速定

让chrome浏览器变成你的智能助手，让AI接管你的浏览器，将您的浏览器转变为强大的 AI 控制自动化工具。

开篇真话：你该恐惧吗？ 你可能听过这样的论调： "AI会替代80%的程序员工作" "如果你不学AI，3年后就没竞争力了" "现在的程序员都在卷AI，你落伍了吗？" 但这些说法都是片面的。 现实要复杂得

持续整理并更新前端开发中实用 MCP 工具，围绕开发、调试、文档查询、效率优化等可落地场景，进行补充更新。

本文从前端视角带你入门AI：从大模型原理、提示词技巧，到LangChain与RAG技术，并附上多模态前端代码，助你对AI理解更上一层。