您现在的位置是：网站首页> 编程资料编程资料

vue-devtools 打开源码位置实现过程_vue.js_

2023-05-24 390人已围观

简介 vue-devtools 打开源码位置实现过程_vue.js_

一、核心逻辑

通过 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需要使用外链式引入。

devtools

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

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

panel.html 文件。该文件中有一个文字为 hello panels! 按钮，后续绑定点击事件发起请求。

Document

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 打开源码位置的资料请关注其它相关文章！

您可能感兴趣的文章:

上一篇：js 实现Material UI点击涟漪效果示例_JavaScript_

下一篇：Vue3初探之ref、reactive以及改变数组的值_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网