依赖安装
- 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 文件
在测试代码中调试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-源码调试</title>
</head>
<script src="../dist/vue.js"></script>
<body>
<div id="app">
{{ message }}
</div>
<script>
const vm = new Vue({
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的源码了
