简单实现 Vue DevTools 打开源码位置的过程

语言: CN / TW / HK
ead>

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

一、核心逻辑

通过 code 命令来打开 vs code 编辑器。

javascript code path/to/file

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

二、整个过程

  1. vue devtools 在 vue 工程项目调试时控制台会有 vue 标题的 panel ; image.png
  2. 打开 vue 对应的 panel 在右上角有打开链接的图标 hover 时提示 open xxx in editor; image.png
  3. 击图标在 network 中看时会发送类似__open-in-editor?file=F:/item/src/App.vue 的请求; image.png
  4. vite 接收到请求时使用上面的核心逻辑打开对应的编辑器和对应组件文件。

三、简单实现整个过程

1、浏览器插件

谷歌扩展核心的文件 manifest.jsondevtools_page 是 devtools 后台执行的页面。

```json { "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需要使用外链式引入。html

devtools

`devtools.js` 文件。创建一个控制台里类似 console,network 的 Panel,成功的话可以看到 ChromeDevToolsPanel 标题的 Panel。javascript chrome.devtools.panels.create( // title 'ChromeDevToolsPanel', // iconPath null, // pagePath 'panel.html' ); `panel.html` 文件。该文件中有一个文字为 `hello panels!` 按钮,后续绑定点击事件发起请求。html

Document

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

2、服务器接收请求

本地快速使用 express 来搭建一个 node 的服务器环境,实际上 vite 使用的是 connect 一个包(很好奇他们使用了那么多的包是平时积累的,还是需要使用到时特意去查的)。

```javascript 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 点击按钮发送请求、编辑器打开文件。