克隆源码

1. git clone https://github.com/vuejs/vue.git
2. yarn install

环境

在vscode中安装几个插件:

• live Server 用来开启一个服务预览网页

然后新建一个 launch.json的调试配置文件，内容可以如下：

{
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "runtimeExecutable": "custom", // 这一部分是我pc上才需要加的
            "url": "http://localhost:5500", // 这里的端口对应live server开启的端口
            "webRoot": "${workspaceFolder}"
        }

准备

1. 在 package.json的命令中添加 -- sourcemap:

    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap",

2. 在 example/tree/index.html的 script引入的资源文件去掉 .min

开始

1. npm run dev此时会生成sourcemap文件
2. 使用live server预览，打开http://localhost:5500/examples/tree/就行了

此时已经有了映射关系，可以在 chrome或者 vscode上打断点都可以，如果要用 vscode打断点的话就需要点击 vscode的调试按钮。