本文参加了由大众号 @若川视野 建议的每周源码共读活动， 点击了解详情一起参与。 这是源码共读的第1期，链接：据说 99% 的人不知道 vue-devtools 还能直接翻开对应组件文件？本文原理揭秘。

一、中心逻辑

经过 code 指令来翻开 vs code 编辑器。

code path/to/file

能够在本地 cmd 终端运转下，试试能否正常翻开编辑器，不行的话请参考上面文章。 关于该 code 指令，有个故事是有时在同事那儿看代码时，发现每次都是运用快捷键 win + E 翻开文件管理器，找到对应项目的文件夹，在该文件管理器路径内输入 cmd 然后回车，呈现终端运用指令行 code . 翻开当时文件夹的项目感觉有点儿酷，回头再仔细想下直接运用鼠标右键翻开编辑器它不就一个动作嘛，花里胡哨~

二、整个过程

  1. vue devtools 在 vue 工程项目调试时控制台会有 vue 标题的 panel ；
    简单实现 Vue DevTools 打开源码位置的过程
  2. 翻开 vue 对应的 panel 在右上角有翻开链接的图标 hover 时提示 open xxx in editor；
    简单实现 Vue DevTools 打开源码位置的过程
  3. 击图标在 network 中看时会发送相似__open-in-editor?file=F:/item/src/App.vue 的恳求；
    简单实现 Vue DevTools 打开源码位置的过程
  4. vite 接纳到恳求时运用上面的中心逻辑翻开对应的编辑器和对应组件文件。

三、简单完成整个过程

1、浏览器插件

谷歌扩展中心的文件 manifest.json，devtools_page 是 devtools 后台执行的页面。

{
   "manifest_version": 2,
   "name": "panel devtools",
   "version": "1.0.0",
   "browser_action": {
      "default_icon": {
         "128": "icons/128-gray.png",
         "16": "icons/16-gray.png",
         "48": "icons/48-gray.png"
      },
      "default_title": "panel Devtools"
   },
   "description": "panel DevTools extension for debugging Chorme Console panels.",
   "devtools_page": "devtools-background.html",
   "icons": {
      "128": "icons/128.png",
      "16": "icons/16.png",
      "48": "icons/48.png"
   }
}

下面是 devtools-background.html 文件。需注意js需要运用外链式引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>devtools</title>
</head>
<body>
    <script src="./devtools.js"></script>
</body>
</html>

devtools.js 文件。创建一个控制台里相似 console，network 的 Panel，成功的话能够看到 ChromeDevToolsPanel 标题的 Panel。

chrome.devtools.panels.create(
    // title
    'ChromeDevToolsPanel',
    // iconPath
    null,
    // pagePath
    'panel.html'
);

panel.html 文件。该文件中有一个文字为 hello panels! 按钮，后续绑定点击事情建议恳求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="file">hello panels!</button>
    <script src="./panel.js"></script>
</body>
</html>

panel.js 文件。

document.querySelector('#file').onclick =  function () {
    fetch('http://localhost:3000/dev').then(res=>{
        console.log(res,'---')
    })
};

2、服务器接纳恳求

本地快速运用 express 来建立一个 node 的服务器环境，实际上 vite 运用的是 connect 一个包（很猎奇他们运用了那么多的包是平时堆集的，仍是需要运用届时特意去查的）。

const express = require('express');
var cors = require('cors');
const { spawn } = require('child_process')
const app = express();
app.use(cors())
app.get('/dev', (req, res) => {
  spawn(
        'cmd.exe',
        ['/C','code','F:/item/src/App.vue'],
        { stdio: 'inherit' }
    )
  res.send('Hello World!');
});
app.listen(3000, () => {
  console.log('示例应用正在监听 3000 端口 !');
});

以上，十分简单完成了在 windows 环境下从浏览器控制台新增 panel 点击按钮发送恳求、编辑器翻开文件。