快捷導(dǎo)航

vue-devtools 打開源碼位置實(shí)現(xiàn)過程

更新時(shí)間：2022年09月21日 11:27:03 作者：_風(fēng)滿樓

這篇文章主要為大家介紹了vue-devtools 打開源碼位置實(shí)現(xiàn)過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、核心邏輯

通過 code 命令來(lái)打開 vs code 編輯器。

code path/dir/file

可以在本地 cmd 終端運(yùn)行下，試試能否正常打開編輯器，不行的話請(qǐng)參考上面文章。關(guān)于該 code 命令，有個(gè)故事是有時(shí)在同事那兒看代碼時(shí)，發(fā)現(xiàn)每次都是使用快捷鍵 win + E 打開文件管理器，找到對(duì)應(yīng)項(xiàng)目的文件夾，在該文件管理器路徑內(nèi)輸入 cmd 然后回車，出現(xiàn)終端使用命令行 code . 打開當(dāng)前文件夾的項(xiàng)目感覺有點(diǎn)兒酷，回頭再仔細(xì)想下直接使用鼠標(biāo)右鍵打開編輯器它不就一個(gè)動(dòng)作嘛，花里胡哨~

二、整個(gè)過程

三、簡(jiǎn)單實(shí)現(xiàn)整個(gè)過程

1、瀏覽器插件

谷歌擴(kuò)展核心的文件 manifest.json，devtools_page 是 devtools 后臺(tái)執(zhí)行的頁(yè)面。

{
   "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需要使用外鏈?zhǔn)揭搿?/p>

<!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 文件。創(chuàng)建一個(gè)控制臺(tái)里類似 console，network 的 Panel，成功的話可以看到 ChromeDevToolsPanel 標(biāo)題的 Panel。

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

panel.html 文件。該文件中有一個(gè)文字為 hello panels! 按鈕，后續(xù)綁定點(diǎn)擊事件發(fā)起請(qǐng)求。

<!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、服務(wù)器接收請(qǐng)求

本地快速使用 express 來(lái)搭建一個(gè) node 的服務(wù)器環(huán)境，實(shí)際上 vite 使用的是 connect 一個(gè)包（很好奇他們使用了那么多的包是平時(shí)積累的，還是需要使用到時(shí)特意去查的）。

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('示例應(yīng)用正在監(jiān)聽 3000 端口 !');
});

以上，非常簡(jiǎn)單實(shí)現(xiàn)了在 windows 環(huán)境下從瀏覽器控制臺(tái)新增 panel 點(diǎn)擊按鈕發(fā)送請(qǐng)求、編輯器打開文件。

更多關(guān)于vue-devtools 打開源碼位置的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: