0-1 搭建Claude code并实现集成Chrome DevTools MCP实现网页截图
目录
实践:现集成Chrome DevTools MCP实现网页截图
1. 确认是否集成了chrome devetools mcp
0-1搭建Claude Code
1. 前置准备(必须安装):
git下载:
访问 git官网,一直next,安装完成之后在终端验证一下,出现版本号即可

nodejs下载
Claude Code 官方客户端本身就是用 JavaScript/Node.js 写的,它必须依赖 Node.js 才能运行
访问 nodejs官网,一直next,安装完成之后在终端验证一下,出现版本号即可

2. Claude code安装
npm 官方源(registry.npmjs.org)在国内访问速度极慢、经常超时,@anthropic-ai/claude-code 包体积不小,直接安装基本无法成功,所以使用npm 镜像源(registry.npmmirror.com),
# 方式一
npm config set registry https://registry.npmmirror.com
npm install -g @anthropic-ai/claude-code
# 方式二
npm install -g @anthropic-ai/claude-code --registry=https://registry.npmmirror.com
安装完成之后在终端验证一下,出现版本号即可
3. 配置API 中转服务
通过第三方合规中转平台,将 Claude API 转发到国内可访问的节点,无需翻墙、直接配置,是国内开发者最常用的方案。以下是本人试过的一些(新人会有一些免费次数,后续是要收费的哦),仅供参考
乘风AI
https://api.cphone.vip/console/token
ANTHROPIC_BASE_URL:https://api.cphone.vip
ANTHROPIC_AUTH_TOKEN:乘风API Key(令牌分组选择 cc特惠分组)
智谱开发平台
https://open.bigmodel.cn/usercenter/proj-mgmt/apikeys
ANTHROPIC_BASE_URL:https://open.bigmodel.cn/api/anthropic
ANTHROPIC_AUTH_TOKEN:你的智谱API Key
AICodeMirror
https://www.aicodemirror.com/dashboard/apikeys
ANTHROPIC_BASE_URL:https://api.aicodemirror.com/api/claudecode
ANTHROPIC_AUTH_TOKEN:平台API Key
以上方案选其一,进行环境变量配置:
$env:ANTHROPIC_BASE_URL = "平台url"
$env:ANTHROPIC_AUTH_TOKEN = "你的Key"
4. Claude code运行
随便找一个项目进去,
cd C:\Users\issuser\IdeaProjects\Demo
进去之后运行Claude
claude
正常的效果:
不正常的效果:
claude --version执行成功,但claude 命令执行时报 “be unavailable in region”

排查方向:
- 是否使用的是国内镜像
npm config set registry https://registry.npmmirror.com
2. 正确配置系统环境变量(系统属性-高级-环境变量-系统变量)


实践:现集成Chrome DevTools MCP实现网页截图
1. 确认是否集成了chrome devetools mcp
claude mcp list
2. 如果没有集成则执行
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

3. 实践
谷歌浏览器访问 https://eco.issedu365.com/application/appcoursedetail/?id=COR8CK4NSYIW8JC5&chapterid=CHA03Q2NJZCC16HV
课程刷新成功后,并全屏截图


AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)