搭建vue源代码调试的两种方式

前言

在开始进行vue的源码阅读之前，可以先download下来关于vue的相关源代码，:thinking_face: 如果我能够在实际的项目中通过vue的断点调试，来跟踪程序的运行执行过程，那么会是一个很好的方式来理解vue的设计与执行过程！
本文章将介绍两种不同的调试技巧，可以在实际的过程中各取所需！

官方源码调试

通过执行 👇 的命令

1	npm run dev

将启动一个开发服务，其实就是将源码进行打包(包含debugger指令)，输出到一js文件中，然后在项目中引用该js文件，即可实现源码调试，如下图所示：

自定义的跨项目源码调试

🌠 上述的调试方式是将所有的代码都打到一个js中，然后使用对应的js进行调试的，那么是否有那么一种方式，可以保留源码结构，然后又可以进行方便的调试的呢？答案是可以的！
😕 在平时的项目开发过程中，🈶 那么一种代码依赖关联技巧，就是借助于npm的本地化依赖机制，将原本一个远程库的依赖，改变为一个本地库的依赖，采用本地源码依赖的方式，那么是否也可以如法炮制，将vue源码的调试，集成到本地源码中，然后在断点中进行对应的源码调试呢？ 👇 就来常识这种方案！

1. 使用vue脚手架创建一全新的项目

1	vue create vue-debugger

2. 安装相关的依赖

1	npm install

3. 修改package中vue依赖为真实路径

{
  "dependencies": {
    "vue": "file:/Users/zhenggl/Desktop/wait_to_study/vue-study/Vue源码解读/vue-dev"
  }
}

4. 然后再重新install一下

1	npm install

5. 处理相关的异常

由于脚手架创建的项目默认自带lint检查，为方便调试，可暂时关闭相关的lint检查；
在搭建调试的框架过程中，发现 🈶 一个版本对应问题，如下所示：

如果没有处理好响应的版本对应管理，有可能因为本地环境的vue脚手架版本与实际的vue版本不一致导致无法正常的调试

6. 启动调试命令，跟踪源码结构进行调试

🌠 从上面可以看出，我们在调试的时候，依旧保持着原始vue源码的结构，来进行的调试， 👉 这样子可以让我们在保持源码结构的基础上，进行源代码的阅读，同时可以了解关于vue源码架构设计上的安排！

进阶调试

😕 如果将vue源码的依赖调试，上升到vue全家桶的话，应该可以做到全家桶源码的统一调试！！！

文章作者: Genglin Zheng

文章链接: https://www.91temaichang.com/2023/04/28/build-debugger-env-for-vue/

vue 调试

赞助

wechat
alipay