vscode 前端debug
时间: 2025-04-19 17:25:56 浏览: 32
### 如何在 VSCode 中设置和使用前端调试工具
#### 创建 `launch.json` 文件
为了配置 JavaScript 或 TypeScript 的调试环境,在VSCode中打开项目后应转到“运行和调试”侧边栏(或通过快捷键 Ctrl+Shift+D 访问)。如果没有现成的 `launch.json` 文件,则需点击“创建 launch.json 文件”的链接。此时会收到选择环境的要求;针对前端应用,推荐选用 Chrome 作为调试目标[^1]。
```json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "启动 Chrome 并附加到本地服务器",
"url": "http://localhost:8765", // 替换为实际使用的端口地址
"webRoot": "${workspaceFolder}"
}
]
}
```
此 JSON 片段定义了一个名为 “启动 Chrome 并附加到本地服务器” 的调试配置项,指定了要连接的目标 URL 和工作区根目录的位置[^4]。
#### 设置断点
编辑源码时可以在代码行号左侧单击来设定断点。当执行流到达这些位置时将会暂停以便进一步检查变量状态或其他细节信息。一旦设置了必要的断点之后按下 F5 键即可触发调试流程[^3]。
#### 编译与调试
对于 TypeScript 项目而言,在 index.ts 文件内按 F5 可以直接开始调试过程。在此之前确保编译阶段顺利完成,即生成相应的 .js 文件供浏览器加载解释执行[^2]。
阅读全文
相关推荐


















