一、核心逻辑
通过 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
文件。需注意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="https://www.atool.online/article/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="https://www.atool.online/article/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 点击按钮发送请求、编辑器打开文件。
更多关于vue-devtools 打开源码位置的资料请关注阿兔在线工具其它相关文章!