VSCode for WebGPU开发需五步：一安装WGSL扩展；二启用Chrome的WebGPU实验标志；三用Vite创建含WGSL着色器的项目；四通过Live Server启动本地HTTP服务；五配置launch.json实现Chrome远程调试。
如果您希望在浏览器中直接开发和调试WebGPU应用，VSCode for WebGPU提供了必要的工具链支持。以下是为WebGPU开发做好准备的具体步骤：
本文运行环境：MacBook Pro，macOS Sequoia。
一、安装支持WebGPU的VSCode扩展
VSCode本身不原生支持WebGPU调试，需通过扩展启用着色器语言支持、语法高亮及调试能力。这些扩展可识别WGSL（WebGPU Shading Language）并提供类型检查与自动补全。
1、打开VSCode，点击左侧活动栏的扩展图标（或按快捷键Ctrl+Shift+X）。
2、在搜索框中输入WGSL，找到官方推荐的“WGSL”扩展（由Microsoft发布）。
3、点击“安装”，安装完成后重启VSCode窗口（Cmd+Shift+P → “Developer: Reload Window”）。
二、配置本地WebGPU运行时环境
WebGPU目前尚未在所有浏览器中默认启用，需手动启用实验性标志，并确保运行环境具备兼容的GPU驱动与浏览器版本。VSCode for WebGPU依赖于底层浏览器的WebGPU实现来执行调试会话。
1、启动Chrome浏览器，地址栏输入chrome://flags/#enable-unsafe-webgpu。
2、将该标志设置为“Enabled”，然后点击右下角“Relaunch”重启浏览器。
3、访问https://webgpu.github.io/webgpu-samples/，确认页面可正常加载并运行示例。
三、创建WebGPU项目模板
使用标准化项目结构可快速接入VSCode调试功能，避免因路径或模块解析错误导致WebGPU上下文初始化失败。模板需包含HTML容器、TypeScript主逻辑及WGSL着色器文件。
仅从仓库的暂存文件生成 Git 提交消息。当用户要求 Codex 根据暂存更改、缓存差异、Git 索引或已通过 `git add` 添加的文件来编写、起草、创建或建议提交消息时使用；切勿代表用户执行提交操作。
1、在终端中执行：npm create vite@latest my-webgpu-app -- --template vanilla-ts。
2、进入项目目录，新建src/shaders/triangle.wgsl文件，粘贴基础顶点与片元着色器代码。
3、在src/main.ts中调用navigator.gpu.requestAdapter()与requestDevice()完成WebGPU设备初始化。
四、启用VSCode内置Web服务器调试
VSCode的Live Server扩展或内置的“Run and Debug”配置可启动本地HTTP服务，绕过浏览器对file://协议下WebGPU API的禁用限制。必须通过http://localhost提供资源才能触发WebGPU上下文。
1、安装扩展“Live Server”（by Ritwick Dey）。
2、右键点击项目根目录下的index.html，选择“Open with Live Server”。
3、观察浏览器开发者工具的Console面板，确认无"WebGPU is not supported"报错。
五、配置launch.json进行断点调试
VSCode可通过调试配置连接到正在运行的WebGPU页面，允许在TypeScript代码中设置断点、查看GPUDevice状态及内存绑定组信息。
1、在项目根目录下创建.vscode/launch.json文件。
2、填入以下配置：{"configurations":[{"type":"pwa-chrome","request":"attach","name":"Attach to Chrome","port":9222,"webRoot":"${workspaceFolder}"}]}。
3、启动Chrome时添加参数：open -n -a "Google Chrome" --args --remote-debugging-port=9222 --unsafely-treat-insecure-origin-as-secure="http://localhost:5500" --user-data-dir=/tmp/chrome-test。
