Vue调试技巧：在Devtool中一键打开组件源码

前言

相信使用Vue开发的同学都会安装浏览器插件Vue Devtools来调试代码:

在开发时，定位一个页面/组件的源码文件的常见方式有在代码库中搜索页面关键字、Devtool中的组件名、DOM节点的class等，这些方式的效率都不算高。

Vue Devtools在4.0版本之后提供了一个十分实用的功能：一键在编辑器中打开组件的源码文件。

我们只需要在Devtools的组件树中定位并选中目标组件，就可以快速打开对应的源码文件，来看一下效果：

配置方式

实现以上的功能只需简单几步：

1. 安装launch-editor-middleware

yarn add -D launch-editor-middleware
# or
npm install --save-dev launch-editor-middleware

2、更改webpack devServer配置

// webpack.config.js
const openInEditor = require('launch-editor-middleware');

module.exports = {
  devServer: {
    before (app) {
      app.use('/__open-in-editor', openInEditor('code'));
    }
  }
}

在before方法中，给devServer注册一个/__open-in-editor的HTTP路由，并在路由的回调中通过launch-editor-middleware唤起编辑器。

openInEditor方法的参数code表示编辑器是VSCode，更多支持的编辑器和参数可以看这里。

3. 把编辑器的路径加入到环境变量PATH中

以VSCode为例，Command + Shift + P打开Command Palette，输入shell command，选择第一个就可以大功告成了：

参考文章

Open component in editor
What’s new in Vue Devtools 4.0