Build with Source Maps Use the
--sourcemap
or-s
flag to build with source maps. Note this will make the build much slower.
生成sourcemap
调试看源码-->贡献指南里有描述
下载源码安装依赖
$ git clone https://github.com/vuejs/vue-next.git
$ cd vue-next
$ pnpm install 或者 yarn install
复制代码
遇到问题:yarn install info No lockfile found
解决:
$ yarn install --ignore-scripts
复制代码
碰到跑单元测试好像有报错Cannot find module '@vue/shared/src'
,用pnpm install
就没有
生成 sourcemap
修改package.json
:
{
"version": "3.2.23",
"scripts": {
"dev:sourcemap": "node scripts/dev.js --sourcemap"
}
}
复制代码
执行命令,生成sourcemap
:
$ yarn dev:sourcemap
复制代码
控制台输出类似vue-next/packages/vue/src/index.ts → packages/vue/dist/vue.global.js
的信息:
其中packages/vue/dist/vue.global.js.map
就是sourcemap
文件
VSCode 调试源码
在 Vue3
官网找个例子,在 vue-next/examples/index.html
。其内容引入packages/vue/dist/vue.global.js
。
<div id="counter">
counter:{{counter}}
</div>
<script src="../../packages/vue/dist/vue.global.js"></script>
<script>
const Counter = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(Counter).mount('#counter')
</script>
复制代码
新建一个终端窗口,执行命令:
$ yarn serve
复制代码
浏览器打开http://localhost:5000/examples/
,断点调试可跟踪源码执行过程,也可以用VSCode
进行断点调试(插件:Debugger for Chrome
)
延伸阅读: