vue源码分析系列:用sourcemap调试源码

灰太狼 2022-10-01 12:59 287阅读 0赞

由于前几篇文章是用vue-cli直接分析的，今天我们学习直接调试vue源码。

## 安装vue（mac机) ##

1.在GitHub上克隆官方的vue-[地址][Link 1]  
2.安装依赖`npm install`

## 修改vue项目 ##

1.在`package.json` `script` `dev` 增加`--sourcemap`指令

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

2.运行打包命令`npm run dev`,可能大多数之前用过vue-cli的人都会以为这里已经运行了一个本地服务，但其实这个项目中没有内置的服务。  
这时候会在dist目录下生成vue.js和vue.js.map文件，这两个文件正是我们调试时所需要的。  
3.编辑器打开`examples/commits/index.html`,将`<script src="../../dist/vue.mini.js"></script>`修改成`<script src="../../dist/vue.js"></script>`

## 创建本地服务 ##

由于`--sourcemap`指令是要依赖服务才能加载到浏览器的如果我们直接打开，它是不生效的。  
不生效的例图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70]  
既然如此我们就先搭建一个本地服务吧；  
**1.偷懒方式直接利用vscode的插件，创建本地服务**  
在`vscode`编辑器上安装`live server`这个插件，安装成功后在右下角有一个`Go Live`的提醒，点击它就能打开当前文件并放到它创建的服务上了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 1]  
利用live server在浏览器上运行打开`examples/commits/index.html`文件，我们可以看到sourcemap已经生效了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 2]  
**2.安装比较常用的`webpack-dev-server`**

npm install webpack-cli webpack-dev-server

在script命令中增加`start`增加`webpack-dev-server` 指令

"start": "webpack-dev-server",

然后运行`npm run start`  
虽然报错的，但不影响本地服务的启动  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 3]  
同样可以启用sourcemap  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 4]  
记住你每次修改源码是用`npm run dev`这命令打包的，当然它有热更新功能，`npm run start`只是启动了本地服务，所以你可能需要启动两个进程来分别控制

## 手动debugger ##

我们除了可以在浏览器上进行debugger之外，还能在代码中直接写`debugger`  
比如我们想试试src/core/index.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 5]  
重新打包后，用浏览器再次运行，就会马上进入debugger模式，直接定位到刚刚我们写有`debugger`的地方  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 6]

## 结语 ##

这样你就可以一步步看完所有vue源码了，呵呵，开玩笑的，你看不完~~~

[Link 1]: https://github.com/vuejs/vue
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70]: /images/20220118/4dafed8e41c545929996373c6734b3b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 1]: /images/20220118/ef358ff9d84e4118b6ac91d6f3682fcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 2]: /images/20220118/b525224e422f45f2be45b28a8da73d4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 3]: /images/20220118/6e3286a832af48ce8affda8a677212c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 4]: /images/20220118/cf54610e27ac4eab8aa2bc2de1eae664.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 5]: /images/20220118/cc763891ef5f404fbd3ce50016a85ff1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 6]: /images/20220118/f521acb17c10408aa88040e745e88266.png