Visual Studio Code 配置断点调试

最新推荐文章于 2025-10-14 22:22:20 发布

原创

最新推荐文章于 2025-10-14 22:22:20 发布 · 8.7k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍了如何在Visual Studio Code中配置断点进行Chrome浏览器的调试。首先，需要安装Debugger for Chrome和Vetur扩展，然后添加Chinese (Simplified) Language Pack。接着，通过生成launch.json文件并修改Chrome快捷方式的属性，使VS Code能够启动调试模式。最后，点击VS Code的绿色三角形按钮开始调试。

参考链接：https://blog.youkuaiyun.com/arvin0/article/details/53673351

安装 Visual Studio Code 后，安装扩展：
1. Debugger for Chrome
2. Vetur（安装后可以打断点）
3. Chinese (Simplified) Language Pack for Visual Studio Code
从左侧栏进入调试模块，点击右上方的齿轮，生成 launch.json，内容为：

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
      {
          "type": "chrome",
          "request": "launch"