轻松使用VSCode调试vue项目

一诺滚雪球
2,403 阅读3分钟

前言

上两篇文章主要介绍VSCode中debugger基本操作和常见语言的调试, 内容如下：

对于前端人来说，最主要的是调试react、vue项目，解决我们日常产生的问题。

本文主要介绍如何调试vue项目的几种方式：

  1. 使用debugger语句调试
  2. 使用launch.json配置文件调试

下面看具体流程。

1. 使用debugger语句方式

debugger 语句会调用任何可用的调试功能，例如设置断点。如果没有调试功能可用，则此语句不会产生任何效果。

简单来说，debugger是浏览器提供的调试语句，当运行在浏览器中，遇到后会停止JS的执行，相当于设置断点。

使用方式，在js中添加debugger即可：

async handleSubmit() {
    debugger;
    xxxx
}

当我们添加后，启动项目第一次正常进入页面，需要刷新下页面就能正常进入调试。

如下图所示：

image.png

通过图，我们会发现调试的代码是编译后的代码，而我们是需要调试源代码，那就需要开启sourcemap.

  • 对于webpack项目 开启sourcemap
configureWebpack(config){
    config.devtool = "source-map"
}
  • 对于vite项目，无需额外设置，开发环境默认开启了sourcemap

开启后： image.png

可以在浏览器中设置断点： image.png

这样，我们就可以使用浏览器中调试进行调试了。

可能我们不想使用这种方式，只想在VSCode中使用调试，就可以使用下面的方式。

2. 使用launch.json方式

使用配置文件，调试vue文件像js在VSCode中调试一样，默认项目开启sourcemap。

具体步骤如下：

  1. 检查VSCode是否开启JavaScript Debugger

image.png

如果未启用，则无法进行调试，默认为开启

image.png

  1. 创建launch.json文件

点击create a launch.json file:

image.png

选择Web App(Chrome):

image.png

生成的默认配置如下：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

其中url需要与启动的服务保持一致，vite项目默认需设置为http://localhost:5173.

  1. 项目中打断点

之前是使用debugger在浏览器中查看调试信息，现在可以在VSCode中添加断点，启动调试配置即可。

例如在App.vue下添加一个断点：

image.png

点击调试

image.png

会默认开启一个chrome窗口

image.png

在VSCode中进行查看：

webpack项目调试页面如下 image.png

vite项目步骤相同，调试页面如下： image.png

注意事项：若无法进行断点,则需要在launch.json添加sourceMapPathOverrides,目的是将浏览器路径映射到本地目录

无法进入断点可能会出现以下报错：

image.png

解决方式：

image.png

需要在 launch.json 的调试配置加这样一段映射

"sourceMapPathOverrides": {
    "webpack:///src/*": "${workspaceFolder}/src/*"
}

具体配置需要根据实际情况书写，可以在代码里打个断点，在 Chrome DevTools 里看：

image.png

上面的app.vue文件路径为webpack:///src/*，就配置为webpack:///src/*。

如果为webpack://projectName/src/*,则配置为：

"sourceMapPathOverrides": {
    "webpack://projectName/src/*": "${workspaceFolder}/src/*"
}

映射的目的就是把这个路径映射到本地目录。

至此，就能像调试js一样在VSCode中调试vue文件了。

3. 总结

总结一下：主要介绍了在Vue项目中两种主要的调试方法：使用debugger语句和使用launch.json配置文件进行调试。

  1. 使用debugger语句调试

简单快捷，无需额外配置，只需在代码中插入debugger语句即可。需要在浏览器中手动刷新页面以触发调试，需要确保项目开启了sourcemap，方便定位问题。对于webpack项目，可以通过配置devtool选项为source-map来开启；对于vite项目，开发环境默认已开启sourcemap。

  1. 使用launch.json配置文件调试

能够在VSCode中直接进行调试，像调试JavaScript文件一样调试Vue文件，需要创建launch.json文件和设置正确的调试配置。

调试步骤：

  1. 确保VS Code已安装并启用了JavaScript Debugger扩展。
  2. 创建launch.json文件，并选择Web App (Chrome)作为调试配置模板。
  3. 根据项目实际情况修改launch.json中的url和webRoot以及sourceMapPathOverrides等配置项。
  4. 在Vue文件中添加断点，然后启动调试配置。
  5. VS Code会自动打开一个新的Chrome窗口，并在达到断点时暂停执行，开发者在VSCode中进行调试。

相信通过上面的步骤，能够在开发过程中对于调试更加得心应手，更加高效地定位和解决问题。如有错误，请指正O^O!

avatar
文章
阅读
粉丝