vscode怎么调试vue cli3

要在VSCode中调试Vue CLI 3项目，可以按照以下步骤进行操作：

1. 安装必要的插件
在VSCode中打开Extensions面板，搜索并安装以下插件：
– Debugger for Chrome：用于与Chrome浏览器进行调试的插件。
– Vue.js Extension Pack：提供Vue.js开发所需的多个插件的插件包。

2. 配置调试环境
在VSCode中打开你的Vue CLI 3项目的根目录，在根目录下创建一个名为`.vscode`的文件夹，然后在该文件夹中创建一个名为`launch.json`的文件。

在`launch.json`文件中添加以下配置：

“`json
{
“version”: “0.2.0”,
“configurations”: [
{
“type”: “chrome”,
“request”: “launch”,
“name”: “Launch Chrome against localhost”,
“url”: “http://localhost:8080”,
“webRoot”: “${workspaceFolder}”
}
]
}
“`

这个配置会在调试时启动Chrome浏览器，并将其连接到你的Vue CLI 3项目的开发服务器。

3. 启动调试模式
在VSCode中点击左侧的调试按钮，然后点击上方的绿色三角形按钮以启动调试模式。此时会自动启动Chrome浏览器并连接到你的项目的开发服务器。

4. 设置断点
在你想要进行调试的源代码文件中，点击行号左侧的空白区域以设置断点。当代码执行到断点处时，调试器会暂停执行，你可以查看变量的值、调用栈等信息。

5. 开始调试
在Chrome浏览器中浏览你的Vue CLI 3项目，当代码执行到你设置的断点处时，调试器会暂停执行，你可以使用VSCode中的调试面板来查看和控制代码的执行。

通过以上步骤，你就可以在VSCode中进行Vue CLI 3项目的调试了。调试过程中，你可以使用调试器提供的工具和功能来优化你的代码和解决问题。

调试Vue CLI 3项目在VSCode中可以通过以下步骤完成：

1. 打开VSCode，并确保已经安装了Vue CLI 3。
2. 在VSCode的侧边栏中，打开你的Vue CLI 3项目文件夹。
3. 在VSCode中，点击顶部菜单栏中的”调试”选项，然后点击”添加配置”按钮，选择”Chrome”。
4. 会在.vscode文件夹中生成一个`launch.json`文件。找到`launch.json`文件中的”configurations”数组，在其中添加以下配置：

“`json
{
“type”: “chrome”,
“request”: “launch”,
“name”: “Vue CLI 3 Chrome”,
“url”: “http://localhost:8080”,
“webRoot”: “${workspaceFolder}/src”,
“breakOnLoad”: true,
“sourceMapPathOverrides”: {
“webpack:///src/*”: “${webRoot}/*”
}
}
“`

5. 确保你的Vue CLI 3项目已经启动，可以通过在终端窗口中输入`npm run serve`来启动项目。
6. 在VSCode中点击顶部菜单栏中的”调试”选项，然后点击下拉菜单中的”Vue CLI 3 Chrome”选项。
7. 现在你可以在VSCode中设置断点，然后点击调试按钮开始调试Vue CLI 3项目了。

需要注意的是，上述步骤是在使用Chrome浏览器进行调试的情况下。如果你希望使用其他浏览器，可以在`launch.json`文件中相应配置中进行修改。

此外，还可以使用调试插件Vue VSCode Snippets和Vue Devtools来提高调试效率。Vue VSCode Snippets可以提供代码补全和代码片段，Vue Devtools可以在浏览器中查看Vue组件的状态和事件。

希望以上步骤对你有帮助，祝你调试Vue CLI 3项目顺利！

调试Vue CLI 3的方法主要是使用VSCode的调试功能配合Vue官方提供的调试配置。下面是具体的操作流程：

步骤一：安装VSCode插件
首先打开VSCode，点击左侧的扩展按钮（快捷键Ctrl+Shift+X），搜索并安装”Debugger for Chrome”插件。这个插件可以帮助我们在VSCode中调试Vue应用。

步骤二：启动Vue CLI 3的开发服务器
在终端中进入你的Vue项目的根目录，运行以下命令启动开发服务器：
“`
npm run serve
“`
此命令会启动一个开发服务器，监听8080端口。

步骤三：配置调试选项
点击左侧的调试按钮（快捷键Ctrl+Shift+D），然后点击顶部的齿轮图标，选择”Chrome”配置。

在”launch.json”文件中添加以下配置:
“` JSON
{
“type”: “chrome”,
“request”: “launch”,
“name”: “vuejs: chrome”,
“url”: “http://localhost:8080”,
“webRoot”: “${workspaceFolder}”
}
“`

步骤四：启动调试
返回到调试面板（左侧的调试按钮），选择刚才配置的”vuejs: chrome”，然后点击调试按钮。

这时候VSCode会将一个新的Chrome窗口打开，并连接到你的应用。你可以在VSCode中设置断点，然后刷新页面就可以开始调试Vue CLI 3应用了。

补充说明：
– 默认情况下，Chrome窗口是以“无痕模式”启动的。如果需要在调试过程中保留用户信息，可以在”launch.json”中的配置中添加`”userDataDir”: “${workspaceFolder}/.vscode/chrome”`.
– 如果你的开发服务器运行在非8080端口，可以在配置中修改”url”的值。
– 如果你的Vue CLI 3项目中有自定义的配置，如babel或eslint等，请确保你在开发服务器启动前完成了这些配置的构建。
– 此方法也适用于调试Vue CLI 2的应用。
– 其他调试选项：VSCode支持其他浏览器的调试，如火狐和Edge浏览器，可以使用相应的插件进行配置。