学习 launch-editor 源码整体架构，探究 vue-devtools「在编辑器中打开组件」功能实现原理...

1. 前言

你好，我是若川^[1]，微信搜索「若川视野」关注我，专注前端技术分享，一个愿景是帮助5年内前端开阔视野走向前列的公众号。欢迎加我微信ruochuan12，长期交流学习。

这是学习源码整体架构系列 之 launch-editor 源码（第九篇）。学习源码整体架构系列文章(有哪些必看的JS库)：jQuery、underscore、lodash、sentry、vuex、axios、koa、redux。整体架构这词语好像有点大，姑且就算是源码整体结构吧，主要就是学习是代码整体结构，不深究其他不是主线的具体函数的实现。本篇文章学习的是实际仓库的代码。下一篇应该是《学习 Vuex 4 源码整体架构，深入理解其原理及provide/inject原理》。

本文仓库地址^[2]：git clone https://github.com/lxchuan12/open-in-editor.git，本文最佳阅读方式，克隆仓库自己动手调试，容易吸收消化。

要是有人说到怎么读源码，正在读文章的你能推荐我的源码系列文章，那真是无以为报啊。

我的文章尽量写得让想看源码又不知道怎么看的读者能看懂。我都是推荐使用搭建环境断点调试源码学习，哪里不会点哪里，边调试边看，而不是硬看。正所谓：授人与鱼不如授人予渔。

阅读本文后你将学到：

1. 如何解决该功能报错问题
   

2. 如何调试学习源码
   

3. launch-editor 等实现原理
   

1.1 短时间找不到页面对应源文件的场景

不知道你们有没有碰到这样的场景，打开你自己（或者你同事）开发的页面，却短时间难以找到对应的源文件。

这时你可能会想要是能有点击页面按钮自动用编辑器打开对应文件的功能，那该多好啊。

而vue-devtools提供了这样的功能，也许你不知道。我觉得很大一部分人都不知道，因为感觉很多人都不常用vue-devtools。

open-in-editor

你也许会问，我不用