第1期｜【源码】你不知道的vue-devtools！

这是一篇学习笔记📒，大佬说了要知其然，知其所以然

学习后可以知道：

• 如何解决该功能报错问题
• 如何调试学习源码
• launch-editor-middleware、launch-editor 等实现原理

关于 vue-devtools

没看这个原理之前我只知道：
在Vue项目开发中，需要监控项目中得各种值，为了提高效率，Vue提供了一款浏览器扩展——VueDevtools。
下载这个工具需要科学上网，去下载。下载好了以后凡是用vue构建的项目这个图标都会亮起来。

其实vue-devtools 功能很香：

• 当你看别人的页面，想要打开对应的源代码文件，还的吭哧吭哧的找，诶，巧了，vue-devtools 可以实现，可以点击页面按钮自动用编辑器打开对应文件
  
• react 类似的功能，请看react-dev-inspector
• 支持的编辑器有vscode、webstorm、atom、sublime等，更多看这里

尤大大写的 launch-editor 源码

准备工作

• 学习地址：参考链接
• 本文仓库地址：git clone https://github.com/lxchuan12/open-in-editor.git，克隆下来以后，进入 vue3-project 目录，安装依赖yarn install
• 安装 vue-devtools 谷歌扩展：翻墙去应用商店下载安装即可（下载 6.0.0 beta 版）
• vsocde 版本 1.58.2
• 了解 launch-editor[1]：主要功能是在编辑器中打开带有行号的文件

原理

主要通过launch-editor-middleware和launch-editor两个库实现了该功能，这两个库又通过调用node的process、child_process能力，创建一个node的子进程调起编译器打开选中的组件

调试学习

打开浏览器中如果使用vue 开发那么只要是vue开发的这个图标就会亮起来，现在不亮，需要这样设置，点击谷歌浏览器右上角三个点——>点击更多工具 ——> 点击扩展程序——> 点击vue devtools 的详情 ——> 将允许访问文件网址打开即可。

• 打开vue3-project/package.json中有一个debug 或者调试按钮，打开后选择第一项serve vue-cli-service serve。
  

vue-devtools 的 Open component in editor[2] 这个文档，这个文档里面描述了引用了【launch-editor-middleware】这个库来实现打开文档的功能。

按照大佬的文档搜索launch-editor-middleware这个中间件,果然node_modules下的文件，需要设置下:

• 做法一：就是「排除的文件」右侧旁边有个设置图标「使用“排查设置”与“忽略文件”」，点击下。
• 做法二：vscode怎么设置可以搜索包含node_modules中的文件
• 搜索到目标代码vue3-project/node_modules/@vue/cli-service/lib/commands/serve.js 这里引用了这个中间件
  

调试

当浏览器发送 http://localhost:8080/__open-in-editor?file=src/components/HelloWorld.vue 这个请求的时候，就进入到下面这个代码了。

• 46行处 为express 的方式引用launch-editor-middleware
  
  接着往下看发现了这个方法：

使用了 app.use("/__open-in-editor"），这是express 引入中间件的用法。
app.use 加载用于处理http请求的middleware（中间件），当一个请求来的时候，会依次被这些 middlewares处理，执行的顺序是你定义的顺序。

• launchEditorMiddleware这个方法主要就是调用 launch-editor 打开文件。
  
  通过上方调试，最终运行的是 launch 函数，我们可以这这里打一个断点，然后进入到【launch-editor】的源码，实际运行的是 launchEditor 函数。
  
  

wrapErrorCallback

终端错误图Could not open App.vue in the editor.输出的代码位置。

guessEditor 猜测当前正在使用的编辑器

搜索这个函数的时候发现也是require 进来的，那继续往下看看这块的代码 vue3-project/node_modules/launch-editor/guess.js

• 这个函数主要做了如下四件事情：

• 如果具体指明了编辑器，则解析下返回。
• 找出当前进程中哪一个编辑器正在运行。macOS 和 Linux 用 ps x 命令
• windows 则用 Get-Process 命令
• 如果都没找到就用 process.env.VISUAL或者process.env.EDITOR。这就是为啥开头错误提示可以使用环境变量指定编辑器的原因。
  最后还是没有找到就返回[null]，则会报错。

所以总结下来的核心代码：

const childProcess = require('child_process')

if (process.platform === 'win32') {
    // On Windows, launch the editor in a shell because spawn can only
    // launch .exe files.
    _childProcess = childProcess.spawn(
        'cmd.exe',
        ['/C', editor].concat(args),
        { stdio: 'inherit' }
    )
    } else {
    _childProcess = childProcess.spawn(editor, args, { stdio: 'inherit' })
}

使用 child_process.spwan 异步打开一个子进程模块，它调起了 cmd.exe 工具打开我们的编辑器，并打开了文件（args 就是文件的参数）
执行了类似code path/to/file命令。

总结：

• 以code path/to/file 为核心思想
• 浏览器发起请求走到launchEditorMiddleware函数，这里调用launch实现主要逻辑。
• 判断是否有文件，没有直接返回
• 有文件则继续查询可以用来打开文件的编辑器，没有找到执行失败回调，找到了则在编辑器中打开相应文件