如何使用「vue-devtools」进行代码调试分析？使用及原理揭秘

如果老板让你维护一套之前同事留下的代码？你启动项目并打开了某个页面，但是工程实在太复杂，很难找到页面对应的源代码。

这个时候你是不是特别期待有这样的一个功能，要是我点到某个组件或者页面，直接给我在编辑器打开对应的页面或者组件对应的文件多好！

其实这个功能现在已经实现了，是的我们今天的主角 vue-devtools 已经实现了这个功能。

或许你还没使用过这个功能，正好最近打算研究下Vue源码，研究了下这个功能，今天葡萄就来分享下，这个神奇的功能怎么使用？以及他的实现原理是什么？

vue-devtools 使用方式

安装 vue-devtool插件

使用这个功能需要先安装 vue-devtools 插件，目前 vue cli3已经默认有了vue-devtools的功能，无需再进行额外的安装。如果没有，大家自行去 chrome://extensions/ 安装即可。

​项目初始化

项目的化大家可以使用vue的cli工具进行搭建，步骤如下：

// 安装 vue-cli工具
npm install -g @vue/cli
# OR
yarn global add @vue/cli

// 初始化项目
node -V // 查看node版本
# v14.16.0
vue -V // 查看vue版本
# @vue/cli 4.5.12
vue create vue3--testproject  // 初始化项目
# 这里选择的是vue3、vue2也是一样的。
# Please pick a preset: Default (Vue 3 Preview) ([Vue 3] babel, eslint)
// 安装nodemodules
npm install
# OR
yarn install

启动项目

接下来，启动项目，推荐使用vscode自带的调试功能：

首先确保你的 VSCode 是支持debuuger能力的，最好升级一下最新的。这里推荐使用无需配置的 auto-attach 功能，打开VSCode，按 ctrl + shift + p，打开输入 > auto attach。默认是智能（smart）。如果不是，可以查看设置成智能，或者根据场景自行设置成其他的。

项目启动成功后，在浏览器访问 http://localhost:8080/ 打开链接，打开chrome开发者工具，切到 vue tab下 就可以使用这个功能了。可以去动手试试体验下。

这个时候有的小伙伴可能会说，咦，我的没打开啊，控制台报错了。

​​莫慌！按照提示信息解决即可，很简单！按照如下两个步骤排查，大部分都可以解决。

问题排查

方法一：先确保在终端能用命令打开你使用的编辑器，以VSCode为例

如果你的命令行本身就不能运行code等命令打开编辑器，那肯定是报错的。这时需要把VSCode注入到命令行终端中。

mac 电脑在 VSCode command + shift + p，Windows 则是 ctrl + shift + p。然后输入shell，选择安装code。如下图所示：

这样就能在终端中打开VSCode的了, 这个时候你在终端输入 code 就不会提示 commond not found了。

​如果能在终端打开使用命令编辑器能打开，但实际上还是报错，那么大概率是没有识别到你的编辑器。 那么可以通过方法二设置指定编辑器。

方法二：具体说明编辑器，在环境变量中说明指定编辑器

在vue项目的根目录下，添加.env.delelopment文件，其内容是EDITOR=code。

重点说明：貌似：在vue-cli 3.5及以上版本才支持自定义EDITOR这样的环境变量

还有一种可能是你的编辑器路径有中文路径导致报错，在环境变量中添加你的编辑器路径即可。我开始就因为第一个问题报错了。

解决了如上问题之后，就可以轻松的使用这个很实用的功能啦！

vue-devtools 实现原理

利用 nodejs中 的child_process，执行了类似 code path/to/file 命令，于是对应编辑器就打开了相应的文件，而对应的编辑器则是通过在进程中执行ps x，window中则用Get-Process，命令来查找的，当然也可以自己指定编辑器。

code path/to/file

下图是我利用上面的命令手动执行，打开了一个自己的工程

​关于 vue-devtools 源码debugger，在启动项目之前可以先打开

nodemodule -> cli-service -> lib -> commands -> serve.js 

搜索 app.use('/__open-in-editor'，打一个断点，在启动的时候代码就会走到这里了。

这部分详细的源码分析，我们下次再介绍。