Vue DevTools 自定义面板实现源码打开功能
本文详解如何在Vue DevTools中通过Chrome扩展API创建自定义Panel，并配合Node.js服务器实现点击按钮调用VS Code打开指定源码文件。涵盖manifest配置、DOM创建、fetch请求及spawn进程调用的完整实现流程。
核心逻辑
主要利用 code 命令来启动 VS Code 编辑器。
code path/dir/file
建议先在本地 CMD 终端测试该命令是否能正常打开编辑器，若无法使用可参考相关教程。关于 code 命令，曾观察到同事使用快捷键 win + E 打开文件管理器，定位到项目文件夹后在路径中输入 cmd 回车，接着在终端执行 code . 来打开当前项目。虽然这种操作看似复杂，但本质上通过鼠标右键直接打开编辑器只需一个动作，更为简便。
整个过程
简单实现整个过程
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 文件的内容。需要注意，JavaScript 代码必须通过外链方式引入。
<!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.js 服务器环境。实际上，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，点击按钮发送请求，进而由编辑器打开文件的功能。
更多关于 vue-devtools 打开源码位置的资料请关注本站其它相关文章！
Vue.js 是什么：渐进式 JavaScript 框架的核心优势与适用场景
2026-11-03 20:00:13
为什么JS代码执行了但页面没有跳转
2026-11-03 16:29:09
Vue.js 项目中 Axios 拦截器封装与接口对接实战
2026-11-02 10:22:43
前端PC端自适应开发：两种常见适配方案解析
2026-11-01 03:30:54
Vue3中通过JS全局调用弹窗组件的实现方案
2026-10-31 21:34:31