vue源码调试技巧我们拉取vue源码到本地，通过运行npm run dev，可以看到项目中生成一个dist文件，并且里面

我们拉取vue源码到本地，通过运行npm run dev，可以看到项目中生成一个dist文件，并且里面生成了sourcmap文件，此时我们在example文件下新建一个debug文件夹，然后新建一个html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="../../dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        template: "<h1>template<h1>",
        render(h) {
          return h("h1", "helloWorld");
        },
      });
    </script>
  </body>
</html>

我们打包后的vue文件引入，现在安装一个node服务器

npm i -g http-server

在vue源码的根目录启动

http-server

可以看到已经启动了一个服务，端口为8080，通过http://localhost:8080/examples/debug/即可访问。

断点

打开控制台，找到source选项，

可以看到资源文件都已经找到,下面可以进行断点调试了。