安装必要的扩展要在在项目根目录下创建一个名为.vscode的文件夹

一、安装必要的扩展

要在VSCode里调试Vue程序，得先装几个扩展工具。这里有几个推荐：

• Vetur：Vue.js的辅助工具，比如语法高亮、代码片段、Emmet啥的都有。
• Debugger for Chrome：这个是用来在VSCode里调试JavaScript代码的，能在Chrome里调试Vue应用。

怎么装呢？打开VSCode，找到左边那个扩展图标（四个方块），搜扩展名，点“安装”就完了。

二、配置调试器

装完扩展后，得配置一下调试器。步骤如下：

1. 打开你的Vue项目。
2. 在项目根目录下创建一个名为“.vscode”的文件夹。
3. 在这个文件夹里创建一个名为“launch.json”的文件。
4. 在文件里添加以下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}"
    }
  ]
}

这个配置告诉VSCode用Chrome浏览器来调试运行在本地8080端口的Vue应用，源码映射到项目文件夹。

三、启动调试模式

配置好了，就可以启动调试模式了：

1. 确保你的Vue项目已经在本地运行。
2. 在VSCode里按F5或点击那个虫子图标，然后选择“Launch Chrome against localhost”。
3. Chrome会自动打开，加载你的应用。这时，你就可以在VSCode里设置断点、查看变量、单步执行代码了。

四、设置断点和调试技巧

调试Vue程序时，设置断点和掌握一些调试技巧很有帮助：

• 设置断点：在代码行号左边点一下就设置了，程序到那就会暂停。
• 查看变量：在调试面板里可以看到所有变量和它们的值，还能悬停查看。
• 单步执行：用调试工具栏的按钮，可以一行行地执行代码。
• 条件断点：右键点击断点，可以设置条件，只有满足条件才会暂停。

五、调试常见问题和解决方案

调试过程中可能会遇到一些问题，这里有一些常见问题及其解决方案：

六、使用VSCode调试Vue 3应用

Vue 3的调试和Vue 2差不多，但要注意一些新特性：

• Composition API：在函数里设置断点。
• 调试Vuex：在mutation和action里设置断点。
• 调试Router：在路由守卫里设置断点。

在VSCode里调试Vue程序挺简单的，主要是安装扩展、配置调试器和启动调试。设置断点和掌握调试技巧能让问题排查更高效。遇到问题别慌，按照解决方案试试看。调试Vue 3时注意新特性，这样你就能更好地开发Vue应用了。