2023 在 VS Code 中调试 Vue2 项目

2023/2/13更新: devtool: 'cheap-module-eval-source-map', 此项配置,所提供的source-map 信息太少,vscode不支持在此种情况下进行调试,请使用devtool: 'source-map',. 我也尝试通过配置sourceMapPathOverrides 解决,无果.
原因我猜测如下: devtool: 'source-map 会生成一份js 和一份js.map文件在 dist 目录下,其中 .map文件下有如下配置:

  "version":3,
  "sources":[
    "webpack:///src/app.js",
    "webpack:///./src/app.js",
    ...
  ]

vscode 会根据这些信息进行代码位置的配对,但是 cheap-module-eva 会把map文件的内容混入到js文件中,同时进行模块化处理,此信息不足以支持vscode的debugger操作.(个人见解)

环境:

VsCode@1.75

webpack@3.12.0

vue@2.6.11

由于官网教程许久未更新 Vue2文档,教程中的所提及的VsCode插件:

已经被合并为:

JavaScript Debugger

部分配置已经不尽相同,经过多次尝试,下面这一套配置适用于目前最新VsCode版本以及Vue-cli创建的项目:

launch.json

 {
     // 使用 IntelliSense 了解相关属性。 
     // 悬停以查看现有属性的描述。
     // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
         //launch方式会重新打开一个浏览器窗口
         {
             "type": "chrome",
             "request": "launch",
             "name": "launch vuejs: chrome",
             "url": "http://localhost:8080",
             "webRoot": "${workspaceFolder}",
             "sourceMaps": true,
             "sourceMapPathOverrides": {
                 "webpack:///src/*.vue": "${webRoot}/src/*.vue",
                 "webpack:///./src/*.js": "${webRoot}/src/*.js",
                
             }
         },
         {
             "type": "chrome",
             "request": "attach",
             "name": "attach vuejs: chrome",
             "urlFilter": "https://localhost:8080/*",
             "port": 9222,
             "webRoot": "${workspaceFolder}",
             "breakOnLoad": true,
             "sourceMaps": true,
             "sourceMapPathOverrides": {
                 "webpack:///src/*.vue": "${webRoot}/src/*.vue",
                 "webpack:///./src/*.js": "${webRoot}/src/*.js",
                 
             }
           }
 
     ]
 }

关于${workspaceFolder} ,指的就是项目文件夹所在的路径,例如:

mini-vue项目的路径 "xxxx/mini-vue"就是${workspaceFolder}的值.

sourceMapPathOverrides: 这里的配置和vue2文档的不尽相同,配置该项主要是的目的就是将webpack打包的后的source-map文件与本地文件相对应起来,如果路径配置错误,将无法打断点.

 "webpack:///src/*.vue": "${webRoot}/src/*.vue",
 "webpack:///./src/*.js": "${webRoot}/src/*.js",

重点就是将vue文件和js文件分别进行映射,否则可能出现js文件可以打断点,vue文件不可以打断断点的情况,如果你的源码不是在src里面或者有多个,分别映射即可.

launch 和 attach:

前者的意思就是 VSCode 会打开这个程序然后进入调试，后者的意思是你已经打开了程序，然后接通 Node.js 的内部调试协议进行调试. 经过测试,launch方式打开的浏览器没有插件等相关内容(类似于无痕窗口) 如 vue devtool,attach方式则和一般开发流程类似.

launch方式配置好之后直接启动就好,而attach方式还需要一些折腾才能使用,如果launch方式足以满足你的调试需求,那么接下来attach方式的额外配置则不需要在意:

首先先关闭所有的Chrome窗口（确保任务管理器中Chrome进程都被关闭掉了！）；
找到Chrome启动快捷键，右键打开属性，在“目标”中增加启动参数--remote-debugging-port=9222 ，记住这里的端口为 9222 和上面的配置文件保持一致；大致如下：

 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

启动你的本地项目，在Chrome中打开项目地址，如 http://localhost:8080 ；
在VSCode中运行attach vuejs: chrome，启动调试；

PS: 如果你恰好和我一样喜欢常用浏览器固定到底部菜单栏,那么可以到如下位置:

 "C:\Users\用户名\AppData\Roaming\Microsoft\Internet Explorer\Quick Launch\User Pinned\StartMenu"

找到相关的快捷方式进行设置

更新: 如果 source-map具有前缀,如 eval一类的可能会导致路径错误断点位置错乱等问题

2023 在 VS Code 中调试 Vue2 项目 打断点

2023 在 VS Code 中调试 Vue2 项目

2023 在 VS Code 中调试 Vue2 项目打断点