#12. Claude Code 网页端

这里的教程主要对 Claude Code 网页端做一讲解。

Claude Code 是 Anthropic 开发的代理式编码工具，能够理解整个代码库、编辑文件、执行命令并自主完成开发任务。它最早以命令行形式推出，2025 年 10 月新增网页端（claude.ai/code），开发者无需本地安装即可在浏览器中使用，2026 年又推出了桌面应用。

2026 年，Claude Code 进一步升级：默认模型切换为 Claude Opus 4.7，并新增 Code Review（代码审查）、Remote Agents（手机远程控制会话）等功能。目前 Claude Code 仅向 Pro、Max、Team 和 Enterprise 等付费订阅用户开放。

#使用设置

首次使用 Claude Code 网页端需要完成以下步骤：

第一步：访问 claude.ai/code

点击左侧边栏中的「Code（代码）」进入 Claude Code 网页端界面。

第二步：连接 GitHub

云端会话需要访问 GitHub 仓库以拉取代码、推送分支，二选一即可：

• 安装 Claude GitHub App（推荐，Auto-fix 功能必须使用此方式）
• 在本地终端运行 Claude Code，输入 /web-setup 完成授权

第三步：选择仓库与分支

云端 VM 从 GitHub 克隆代码，请先将本地改动推送到远程。

第四步：配置环境（可选）

按需设置网络访问级别、环境变量（如 GH_TOKEN）和启动脚本。

第五步：下达任务

用自然语言描述需求，Claude 自动分析代码并执行修改。也可在终端运行 claude --remote "任务描述" 启动云端会话。

第六步：审查并提交 PR

查看 diff 与测试结果，一键创建 Pull Request。如需调整，可在同一会话中继续迭代。

#适用场景

Claude Code 网页端界面简洁直观，核心组件包括：

• 任务输入区：用自然语言描述编程需求
• 实时进度追踪：查看 Claude 的工作状态和执行步骤
• 会话历史：浏览之前的对话和代码更改记录
• 环境选择器：管理和切换不同的开发环境

网页端在云端预装了主流开发工具链，大多数项目无需额外配置：

#实用技巧

描述任务要具体

错误示范

帮我改一下代码

这会导致 Claude 不知道该改什么，效果大打折扣。

正确示范

请修复 src/auth/login.js 中的登录验证逻辑，当前问题是：
1. 空密码也能提交表单
2. 邮箱格式校验不生效
请添加适当的表单验证，并编写对应的单元测试

利用 @ 引用文件

在描述中使用@符号引用特定文件，让 Claude 聚焦于相关代码：

请检查 @src/api/user.js 中的 getUserById 函数，
它在用户不存在时没有正确返回404错误

指定测试要求

让 Claude 在修改后自动运行测试验证：

修复这个bug后，请运行 npm test 确保所有测试通过

分步处理复杂任务

对于复杂任务，先让 Claude 了解代码库再动手：

第一步：先分析一下这个项目的整体架构
第二步：找出所有和支付相关的模块
第三步：告诉我你打算如何实现退款功能
第四步：确认方案后再开始编码

#注意事项

安全机制

• 隔离运行：仓库会被克隆到 Anthropic 管理的隔离虚拟机中
• 权限控制：默认只读模式，修改和命令执行需显式批准
• 网络限制：云端网络访问默认受限，仅允许连接主流包管理器
• 敏感信息：Git 凭证等敏感信息通过安全代理处理，从不进入执行环境

局限性

• 仅支持 GitHub：网页端目前仅支持 GitHub 仓库，GitLab 需使用 CLI 版本
• 网络受限：无法访问内网服务或私有包管理器
• 任务时长：单个任务有执行时间限制，超长任务建议拆分

#其他使用方式

除网页端外，Claude Code 还提供以下使用方式：

CLI 命令行版本

在终端中直接使用，适合深度开发和本地调试。

安装方式：

# macOS/Linux
curl -fsSL https://claude.ai/install.sh | bash

# 或通过 npm
npm install -g @anthropic-ai/claude-code

基本使用：

# 启动 Claude Code
cd your-project
claude

# 带初始提示启动
claude "分析这个项目的架构"

# 单次查询模式
claude -p "生成API文档"

常用命令：

• /help - 显示帮助信息
• /clear - 清除对话历史
• /model - 切换使用的模型
• !git status - 执行 shell 命令（感叹号前缀）
• @src/main.js - 引用特定文件

VS Code 扩展

在 VS Code 中按「Cmd/Ctrl+Shift+X」打开扩展面板，搜索 "Claude Code" 安装官方扩展。

主要功能：

• 侧边栏面板快速访问
• 内联差异视图实时查看代码变更
• 文件 @-提及和图片附加
• 多会话并行运行

快捷键：「Cmd/Ctrl+Esc」快速激活面板

JetBrains IDE 插件

支持 IntelliJ IDEA、PyCharm、WebStorm、PhpStorm 等全系列 JetBrains IDE。从 JetBrains Marketplace 搜索 "Claude Code" 安装即可。

版本对比与选择建议

选择建议

• 快速任务、远程协作 → 网页端
• 复杂项目、本地调试 → CLI 版本
• 偏好图形界面、已用 VS Code → VS Code 扩展
• 使用 JetBrains IDE → JetBrains 插件

三种方式可通过 Teleport 功能灵活切换，形成统一的开发体验。

#快速上手示例

示例1：修复一个 Bug

请检查 @src/components/LoginForm.jsx 文件，
用户反馈在输入邮箱后按回车键，表单没有提交。
请修复这个问题，并确保修复后运行 npm test 测试通过。

示例2：添加新功能

我需要在用户列表页面添加搜索功能：
1. 支持按用户名和邮箱搜索
2. 搜索结果实时更新（防抖300ms）
3. 搜索框放在列表上方
相关文件在 @src/pages/Users/ 目录下

示例3：代码审查

请审查 @src/api/ 目录下的所有文件，检查是否存在：
1. SQL 注入风险
2. 未处理的异常
3. 硬编码的敏感信息
输出一份安全审查报告

更多信息请访问官方文档：https://code.claude.com/docs