在 VS Code 中调试 Vue2 项目
/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插件:
Debugger for ChromeDebugger for Firefox
已经被合并为:
JavaScript Debugger
部分配置已经不尽相同,经过多次尝试,下面这一套配置适用于目前最新VsCode版本以及Vue-cli创建的项目:
launch.json
{// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息，请访问: /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，启动调试；
注: attach 模式中，如果配置 “url”: “http://localhost:8080/” 。这种URL配置不适用于 attach 模式。换成 “urlFilter”: “http://localhost:8080/*” ，并且要使用通配符。
PS: 如果你恰好和我一样喜欢常用浏览器固定到底部菜单栏,那么可以到如下位置:
"C:\Users\用户名\AppData\Roaming\Microsoft\Internet Explorer\Quick Launch\User Pinned\StartMenu"
找到相关的快捷方式进行设置
