使用Vscode断点调试Vue2项目小技巧

半丶糖
5,358 阅读4分钟

本文内容基于Vue2，使用的代码案例是vue-element-admin(可点击查看源码地址)

在日常的Vue开发中，经常需要打印日志的输出查看结果、代码的断点调试、以及对非自己写的页面进行源码的定位等问题。所以对于日常开发中的一些毒点总结：

  1. 在代码中添加console.log(xxx) 进行日志的输出，如果当前页面有大量的日志打印，在打开F12调试窗口时，会因为有大量的对象没有进行回收，导致调试时页面卡顿。
  2. 事先在代码中写debugger，然后刷新或操作页面，进入断点。如果忘记清除debugger。因为debugger只能通过页面中写入，无法通过勾选的方式进行选中和取消，只能清除代码中debugger.
  3. 对于非自己开发的页面内容，如果想要快速找到，需要对照代码定位到route...，然后一点点的进行寻找，或者进行全局的搜索。(此为资源的快速定位，与断点调试无关)。

在vscode内是存在run and debug模式的，所以是否有办法可以开启在vscode内通过像F12调试窗口进行调试断点。

1、Vue项目代码调试

在开发的时候，由于webpack打包的问题，会造成无法定位到指定的源代码内容。

当我们在代码中(src\views\components-demo\drag-dialog.vue)同时手动添加 console 和debugger后。

1676000739459.jpg

再访问页面路由(localhost:9527/#/components/drag-dialog)

1676000241301.jpg 由上图可以看出，我们断点到的代码后面带有一串哈希值，访问的路径也是webpack处理后的路径，对应不到本地vscode内的源代码地址。要想开启vscode内代码调试，那么必须将vscode内的代码与浏览器中运行的代码关联起来。所以首先需要开启sourcemap，让浏览器访问的地址与代码的实际路径关联起来。

2、开启sourcemap

开启开发环境下的source-map，在vue.config.js文件中，添加如下配置:

configureWebpack: {

   devtool: process.env.NODE_ENV !== "production" ? "source-map" : '',
 }

开启配置之后， 重启一下项目。再按照上面的路由进行访问，就可以看到当前页面的哈希值后缀已经去除，并且hover到上面之后可以看到(webpack:///src/views/components-demo/drag-dialog.vue)，该文件路径与本地文件一致，通过右键打开的方式，也可以通过文件目录所在。

动画.gif

3、配置.vscode/launch.json内容

记录下来上面的映射地址的主要目录(webpack:///src/)，然后等点击vscode左侧 Run and Debug -> Web App (chrome), 会自动打开launch.json的配置。

image.png

在launch.json中的 configurations内 添加如下配置信息： 其中有两点需要注意的

  1. url: url的端口按照实际启动项目的端口来填写。需要自己手动修改。
  2. sourceMapPathOverrides: webpack:///src/* 就是我们开启sourcemap之后看到的代码地址配置，其映射的地址为${workspaceFolder} (表示文件的工作空间目录) 下的src。按照配置去处理即可。
{
    "name": "Launch Chrome",
    "request": "launch",
    "type": "chrome",
    "url": "http://localhost:9527", 
    "webRoot": "${workspaceFolder}",
    "sourceMapPathOverrides": {
        "webpack:///src/*": "${workspaceFolder}/src/*"
    }
}

处理完成以上的配置信息之后，选中左侧Launch Chrome 选项，然后点击左侧绿色的启动图标，就会直接打开一个新的chrome窗口。直接在新窗口上进行后续的所有操作。打开窗口之后，直接访问想要访问的路径(如果是用记录方案，就访问前面一直浏览过的记录http://localhost:9527/#/components/drag-dialog 。 在需要断点的地方进行打断点，就可以看到熟悉又陌生的调试界面了。功能性跟浏览器上几乎都是一样的，只是使用的时候在vscode内部进行。并且相对灵活与方便。不需要手动的去添加debugger。 image.png

4、调试方法

那么接下来，就可以把在浏览器上调试转移到vscode内了，可以将熟悉的写代码界面与调试界面直接关联起来，感觉拥有非常好的调试体验。接下来就是介绍几种代码调试的技巧。

  1. expression：条件断点，可以在上面写判断条件，当条件达成时，会进行断点
  2. Log Message：日志输出，跟console一样一样的。如下图所示：

1676007124280.jpg

5、通过浏览器打开vscode代码

在很多时候，开发别人的代码但是又没有办法快速定位到当前组件对应的是那一块的代码内容，这个时候vue-devtools发挥作用的时候了。

  1. 选中devtools上的定位图标，跟浏览器自带的那个选中DOM功能是一致的。
  2. 在浏览器页面上选中需要查看的页面，或者需要查看的组件。点击后组件列表会定位到组件树的列表中。
  3. 选中需要查看的组件。
  4. 点击open的图标，稍等几秒钟，vscode会闪黄光，查看vscode，就能看到当前需要访问的组件已经在vscode内打开了。 具体如下图所示： 1676008272847.jpg
avatar
文章
阅读
粉丝