vue-devtools 打开源码位置实现过程
更新时间：2022年09月21日 11:27:03 作者：_风满楼
这篇文章主要为大家介绍了vue-devtools 打开源码位置实现过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
一、核心逻辑
通过 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="./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 点击按钮发送请求、编辑器打开文件。
更多关于vue-devtools 打开源码位置的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue3+echarts实现好看的圆角环形图效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了 Vue 中 title 的动态修改问题，文中通过两种方案给大家介绍了title的传递问题 ,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue 项目全屏插件screenfull使用案例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
本篇文章主要介绍了详解vue跨组件通信的几种方法 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
这篇文章主要介绍了vue.js过滤器+ajax实现事件监听及后台php数据交互,结合实例形式分析了vue.js前台过滤器与ajax后台数据交互相关操作技巧,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了详解Vue 如何监听Array的变化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
这篇文章主要介绍了vue中的文本空格占位符说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
生命周期钩子又被叫做生命周期时间,生命周期函数,生命周期钩子就是vue生命周期中出发的各类事件,这些事件被称为生命周期钩子,下面这篇文章主要给大家介绍了关于Vue生命周期钩子的相关资料,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了前端 Vue.js 和 MVVM 详细介绍的相关资料,需要的朋友可以参考下2016-12-12
这篇文章主要为大家介绍了vue中虚拟DOM与Diff算法知识的图文精讲，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
最新评论