安装必要的扩展VSCode设置断点在代码行号左边点击就能设置一个断点

作者：巡检机器人o1 | 发布时间：2025-06-12 |

一、安装必要的扩展

在VSCode里调试Vue.js项目，第一步就是安装几个超级有用的扩展。

装完这些扩展，调试Vue.js项目就轻松多了！

二、配置调试环境

调试环境设置好了，VSCode才能正确地调试Vue.js项目哦。

  1. 创建 launch.json 文件：在你的Vue.js项目里，点一下调试图标，然后点击齿轮图标，选择“Chrome”创建一个新文件。
  2. 配置 launch.json 文件：把文件内容改成下面这样：
```json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "program": "${workspaceFolder}/node_modules/.bin/vue-cli-service", "preLaunchTask": "build", "webRoot": "${workspaceFolder}", "browser": "default", "url": "http://localhost:8080", "sourceMapPathMapping": { "/src": "${workspaceFolder}/src" } } ] } ```
  1. 配置webpack：确保你的webpack配置文件里启用了“sourceMap”，这样调试的时候才能映射到源代码。

三、启动调试模式

现在，我们来启动开发服务器，然后开始调试吧！

  1. 启动开发服务器：在终端里，运行命令启动Vue.js开发服务器，默认会打开8080端口。
  2. 启动调试会话：在VSCode里，按一下F5键或者点击调试面板中的绿色箭头，就会自动打开Chrome浏览器，并在浏览器中加载你的Vue.js应用。

四、设置断点

接下来，我们要在Vue.js代码里设置断点，开始调试。

  1. 打开需要调试的Vue文件：在VSCode里打开你想要调试的文件。
  2. 设置断点：在代码行号左边点击，就能设置一个断点。你会看到一个红点，表示这个位置有断点。
  3. 触发断点：在Chrome浏览器里操作，比如点击一个按钮，触发一个事件处理程序。当代码运行到断点那里，VSCode就会暂停，并显示当前的变量和调用堆栈信息。

通过这些步骤，你就能在VSCode里轻松调试Vue.js项目了。记得多练习使用调试工具，优化配置，学习更多调试技巧，这样能让你更高效地开发。

相关问答FAQs

1. 如何在VSCode中设置断点来调试Vue项目？

打开Vue项目文件夹，安装好依赖后，点击VSCode的调试按钮，选择添加配置，选择Node.js创建调试配置文件，然后在配置里设置Vue项目的入口文件路径，最后设置断点并启动调试会话。

2. 如何在Vue组件中设置断点？

打开Vue组件文件，在需要设置断点的代码行左侧点击设置断点，然后启动调试会话。当代码执行到断点时，VSCode会暂停，并显示调试面板，你可以查看变量和执行表达式。

3. 如何在Vue文件中设置条件断点？

打开Vue文件，在需要设置条件断点的代码行设置断点，然后在编辑断点对话框中输入条件表达式，保存后，当条件满足时，断点会触发，并显示调试面板。