VSCode的Web版(vscode.dev)：在浏览器里写代码_网络技术

发布时间 - 2026-01-03 00:00:00 点击率：次

vscode.dev 是 VS Code 官方 Web 版，支持直接编辑本地文件、浏览 GitHub 仓库及挂载 Codespaces 远程环境；无需安装，基于 WebAssembly 实现语法高亮、智能提示与调试功能。

如果您希望在不安装本地编辑器的情况下直接在浏览器中编写和编辑代码，则可以使用 vscode 的官方 web 版本 vscode.dev。该服务基于开源的 vs code 桌面端代码，通过 webassembly 和浏览器文件系统 api 实现核心功能，支持多种语言语法高亮、智能提示与基础调试能力。

本文运行环境：MacBook Air，macOS Sequoia。

一、直接访问并打开本地文件

vscode.dev 默认以只读方式加载 URL 参数指定的 GitHub 仓库，但也可通过浏览器的文件系统访问能力打开本地文件进行编辑。此方式无需任何服务器或扩展，完全离线可用。

1、在浏览器地址栏输入 https://vscode.dev 并回车，等待页面加载完成。

2、点击界面中央的 Open... 按钮，或按快捷键 Cmd+O（macOS）/ Ctrl+O（Windows/Linux）。

3、在弹出的系统文件选择窗口中，选中单个文件或整个文件夹，点击“打开”。

4、文件加载后即可开始编辑，修改内容会实时保存至浏览器的临时存储空间；关闭标签页前需手动下载文件以保留更改。

vscode.dev 支持直接解析 GitHub 仓库 URL，并以只读模式加载对应分支与路径下的全部源码。该方式适合快速浏览、审查或轻量级修改公开项目。

1、复制目标 GitHub 仓库主页 URL，例如 https://github.com/microsoft/vscode。

2、将 URL 中的 github.com 替换为 github.dev，得到新地址 https://github.dev/microsoft/vscode。

3、在浏览器中访问该地址，等待仓库结构加载完毕，点击任意 `.ts`、`.js` 或 `.py` 文件即可开始阅读与编辑。

4、如需保存修改，点击右上角 Commit changes 按钮，按提示创建新分支并提交 Pull Request。

当需要完整开发环境（含终端、调试器、扩展支持）时，可借助 GitHub Codespaces 将云端容器挂载至 vscode.dev 界面。此时浏览器端仅作为前端客户端，所有计算与运行均在远程 Linux 容器中执行。

1、访问 https://github.com/codespaces，确保已登录 GitHub 账户并拥有 Codespaces 使用权限。

2、点击 Create codespace on main 或选择已有分支启动新环境。

3、等待容器初始化完成后，在左下角状态栏点击 Open in Visual Studio Code，选择 Open in browser。

4、跳转至 vscode.dev 域名下的 Codespaces 实例页面，此时界面与桌面版高度一致，支持安装扩展、运行终端与调试任务。