依赖安装
- 使用 yarn 安装所有依赖
package.json 启动 添加配置
- 在dev 命令里 加上 --sourcemap,便于源码调试
在源码根目录中运行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
- vscode 左边 会有一个edge的操作按钮，用于浏览器调试
- 打开测试代码 test.html 中，按 F5 ，唤醒调式操作界面
- 点击最右侧的调试图标可在vscode内部预览项目
- vscode中预览项目效果
代码中添加debugger
- 在代码中直接加 debugger
- 在vscode 编辑器的函数左边添加 小红点，点击即可
