如何调试 vue2 源码

Posted on

最近在看 vue2 源码，所以难免要对源码进行 debug 这篇文章主要记录下，如何实现对其源码的调试方法

下载源码

1
git clone git@github.com:vuejs/vue.git

修改打包配置

vue2 的整体源码打包使用的是 rollup，只需要将相关的 npm scripts 添加 --sourcemap 选项即可。这样在运行 npm run dev 的时候在 dist 目录下会输出 soucemap 文件

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

添加调试目录

在项目根目录下添加 debug 目录，新增 index.html 文件，引入 ../dist/vue.js 文件即可,配合 vscode 的 Live Server 插件直接打开这个 html 文件启动一个静态服务器还能支持热更新功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue debugger</title>
  <script src="../dist/vue.js"></script>
</head>

<body>
  <div id="app">{{ msg }}</div>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          msg: 'hello world',
        };
      }
    });
  </script>
</body>

</html>

img

资源