依赖安装
- node 版本切换到 18.0.0
- 单独安装 puppeteer否则会报错
- npm i puppeteer --ignore-script 否则会报错
- 使用 yarn 安装所有依赖
package.json 启动 添加配置
- 在dev 命令里 加上 –sourcemap,便于源码调试
"dev":"rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"
在源码根目录中运行npm run dev
- 运行npm run dev 在dist文件夹下生成 vue.js文件
新建一个test目录，并创建test.html文件用于测试
- m在html文件中使用script引入 dist/vue.js 文件
在测试代码中调试
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Vue-源码调试</title></head><scriptsrc="../dist/vue.js"></script><body><divid="app">
{{ message }}
</div><script>const vm =newVue({el:'#app',data:{message:'hello world'}})
console.log(Vue)</script></body></html>
直接在vscode中调试Vue源代码
- 安装插件 Microsoft Edge Tools for VS Code
在Edge浏览器中安装vue-devtool插件
- 在Edge浏览器中安装vue-devtool插件，否则无法在vscode软件中进行打断点的操作
launch.json配置
- 按下F5，配置launch.json
{"configurations":[{"type":"pwa-msedge",//调试环境的具体类型"name":"Launch Microsoft Edge",//调试任务的名称，用与在下拉列表中展示"request":"launch",//调试模式，一共有两种模式 launch：和应用一起启动 attach：应用已经启动了，但是又想在不重新启动的情况下调试该应用，就可以把调试器附加到应用上"runtimeArgs":[//传递给运行时的参数列表。"--remote-debugging-port=9222"],"url":"http://localhost:8080",//项目启动运行的url"webRoot":"${workspaceFolder}",//"presentation":{"hidden":true},"smartStep":true,//自动跳过未映射的代码"skipFiles":["<node_internals>/**/*.js",//跳过node核心模块代码"${workspaceFolder}/node_modules/**/*.js","${workspaceFolder}/src/node_modules/**/*.js","${workspaceFolder}/src/asserts/js/webpack:/app/webpack/**",//忽略webpack源码"${workspaceFolder}/src/asserts/js/webpack:/app/node_modules/**"//忽略各种包文件源码]//跳过文件},{"type":"pwa-msedge","name":"Launch Microsoft Edge in headless mode","request":"launch","runtimeArgs":["--headless","--remote-debugging-port=9222"],"url":"http://localhost:8080","webRoot":"${workspaceFolder}","presentation":{"hidden":true},"smartStep":true,//自动跳过未映射的代码"skipFiles":["<node_internals>/**/*.js",//跳过node核心模块代码"${workspaceFolder}/node_modules/**/*.js","${workspaceFolder}/src/node_modules/**/*.js","${workspaceFolder}/src/asserts/js/webpack:/app/webpack/**",//忽略webpack源码"${workspaceFolder}/src/asserts/js/webpack:/app/node_modules/**"//忽略各种包文件源码]//跳过文件},{"type":"vscode-edge-devtools.debug","name":"Open Edge DevTools","request":"attach","url":"http://localhost:8080","webRoot":"${workspaceFolder}","presentation":{"hidden":true},"smartStep":true,//自动跳过未映射的代码"skipFiles":["<node_internals>/**/*.js",//跳过node核心模块代码"${workspaceFolder}/node_modules/**/*.js","${workspaceFolder}/src/node_modules/**/*.js","${workspaceFolder}/src/asserts/js/webpack:/app/webpack/**",//忽略webpack源码"${workspaceFolder}/src/asserts/js/webpack:/app/node_modules/**"//忽略各种包文件源码]//跳过文件}],"compounds":[{"name":"Launch Edge Headless and attach DevTools","configurations":["Launch Microsoft Edge in headless mode","Open Edge DevTools"]},{"name":"Launch Edge and attach DevTools","configurations":["Launch Microsoft Edge","Open Edge DevTools"]}]}
- vscode 左边 会有一个edge的操作按钮，用于浏览器调试
- 打开测试代码 test.html 中，按 F5 ，唤醒调式操作界面
- 点击最右侧的调试图标可在vscode内部预览项目
- vscode中预览项目效果
代码中添加debugger
- 在代码中直接加 debugger
- 在vscode 编辑器的函数左边添加 小红点，点击即可
直接在vscode中使用vue项目调试Vue源代码
步骤
- 先使用脚手架搭建一个空的vue项目
- 将所有的Vue导入改为本地文件导入
import Vue from'../../../../vue-2.6.14/dist/vue.js'// import Vue from 'vue';
- 在Vue源码中打debugger断点或者加 console.log日志，即刻实现源码的调试
优势
- 可方便的利用vue的组件进行源码调试，不需要用html调试
备注
- 由于本人的google浏览器有些问题，故使用了edge浏览器调试代码，也可以用google直接调试，思路都是一样的
总结
- 这一波操作下来，就可以在vscode中直接调试 vue2的源码了
本文转载自: https://blog.csdn.net/qq_42389674/article/details/136091303
版权归原作者 丰的传说 所有， 如有侵权，请联系我们删除。
版权归原作者 丰的传说 所有， 如有侵权，请联系我们删除。