如何生成 sourcemap 调试 Vue3 源码

如何生成 sourcemap 调试 Vue3 源码

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

延伸阅读:

分类:
前端
标签: