擼一個本身想要的chrome-devtools拓展之筆記

時間 2019-11-17

標籤一個本身想要 chrome devtools 拓展筆記欄目 Chrome 简体版

原文原文鏈接

提早BB：原本打算和chrome拓展玩耍的，可是發現我想作的東西，須要用到的一些API，單純的CRX不足以知足。而後又發現新大陸chrome.devtools。因而，記一個筆記。若是你用過,或者正在使用react，那麼你應該知道一個東西叫作React Developer Tools。這個就是在頁面右上角有個圖標，完了使用的時候，按F12也會看到，在控制檯裏有一個React的選項。沒錯就是它。css

圖片裏紅框裏的這個 tab就是用 devtools擼出來的。。。(我記得是)

chrome官方教程請往這裏戳html

chrome.devtools的api

(1) devtools.inspectedWindowreact

(2) devtools.networkjquery

(3) devtools.panelsweb

如下是我的整理翻譯(英語四級沒過，翻譯不對，還望輕噴)。ajax

擼chrome.devtools須要manifest.json。和chrome拓展同樣。chrome

{
  "name": "這個拓展叫啥名字"
  "version": "1.0", //修改了幾回
  "minimum_chrome_version": "10.0",  //這個貌似只能是這個數~
  "devtools_page": "devtools.html", // 入口頁
  ...
}
複製代碼

能擼html、js、css就能夠。json

文件夾結構隨意，本身引用的到就行。api

下面是我本身作的小demo。瞎弄一個玩玩。首先是目錄結構瀏覽器

本身還在學習這個拓展中，比較簡陋。

我來解釋一下這一坨，首先，manifest.json是必需要有的，這個是配置文件。

index.html是配置文件中引入的，至關因而入口頁面，index.js是index.html引入的初始化js。

panel.html是index.js中初始化時引入的頁面。panel.js和panel.css是它要使用的。

reset.css是"復原css"。

引入的jq是爲了方便操做dom。N.png暫時還沒搗鼓出來如何展現。(好像不是和CRX同樣展現在右上角？？)

manifest.json

{
    "name":"seeRequest",//這個拓展叫啥
    "version":"1.0.0", //改了幾回啊
    "minimum_chrome_version":"10.0",//這個參數就這個數
    "description": "Easily to see ajax request params and infomation",//介紹下是幹啥的
    "devtools_page":"index.html", //這個devtools的進入頁面是啥
    "manifest_version":2  //和CRX同樣，是且只能是2
}
複製代碼

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>seeRequest</title>
</head>
<body>
    <script src="./index.js"></script>
</body>
</html>
複製代碼

這個沒啥說的，就是簡單的html頁面，引入一個初始化使用的js。

index.js

const CD = chrome.devtools;

CD.panels.create(
    "seeRequest", //名字叫啥，就是在devtools中展現的名字。
    "N.png",  //使用的圖片，暫時沒搗鼓出來如何展現
    "panel.html", //這個devtools拓展真正的操做頁面
)
複製代碼

panel.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>what</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="panel.css">
</head>
<body>
    <div>Fuck,world!</div>
    <div class="show">
        <h1>請求信息</h1>
        <table class="list">
            <tr>
                <th>方法</th>
                <th>地址</th>
                <th>狀態</th>
            </tr>
        </table>
    </div>
    <script src="./jquery-2.2.4.min.js"></script>
    <script src="panel.js"></script>
</body>
</html>
複製代碼

這個就是普通的頁面html了，隨便擼。（這個就是展現在控制檯中的下面會給出我這個簡陋demo的效果圖）

panel.js

const CD = chrome.devtools;

//devtools中不認識console.log。使用自帶的api inspectedWindow 來弄一個它認識的
const log = (...params) => CD.inspectedWindow.eval(`console.log(...${JSON.stringify(params)})`);

//服務器狀態碼對應文字 word 以及描述 desc
// status對應文案 網上找的，若是有不對的，但願指出。
const statusText={
    "200":{
        word:"成功",
        desc: "服務器已成功處理了請求。一般，這表示服務器提供了請求的網頁。"
    },
    "201":{
        word: "已建立",
        desc: "請求成功且服務器已建立了新的資源。"
    },
    "202":{
        word:"已接受",
        desc: "服務器已接受了請求，但還沒有對其進行處理。"
    },
    "203":{
        word: "非受權信息",
        desc: "服務器已成功處理了請求，但返回了可能來自另外一來源的信息。"
    },
    "204":{
        word:"無內容",
        desc: "服務器成功處理了請求，但未返回任何內容。"
    },
    "205":{
        word:"充值內容",
        desc: "服務器成功處理了請求，但未返回任何內容。與 204 響應不一樣，此響應要求請求者重置文檔視圖（例如清除表單內容以輸入新內容）。 "
    },
    "206":{
        word:"部份內容",
        desc: "服務器成功處理了部分 GET 請求。"
    },
    "300":{
        word:"多種選擇",
        desc:"服務器根據請求可執行多種操做。服務器可根據請求者 來選擇一項操做，或提供操做列表供其選擇。 "
    },
    "301": {
        word: "永久請求",
        desc: "請求的網頁已被永久移動到新位置。服務器返回此響應時，會自動將請求者轉到新位置。您應使用此代碼通知搜索引擎蜘蛛網頁或網站已被永久移動到新位置。"
    },
    "302": {
        word: "臨時移動",
        desc: " 服務器目前正從不一樣位置的網頁響應請求，但請求者應繼續使用原有位置來進行之後的請求。會自動將請求者轉到不一樣的位置。但因爲搜索引擎會繼續抓取原有位置並將其編入索引，所以您不該使用此代碼來告訴搜索引擎頁面或網站已被移動。 "
    },
    "303": {
        word: "查看其餘位置",
        desc: "當請求者應對不一樣的位置進行單獨的 GET 請求以檢索響應時，服務器會返回此代碼。對於除 HEAD 請求以外的全部請求，服務器會自動轉到其餘位置。 "
    },
    "304": {
        word: "未修改",
        desc: "自從上次請求後，請求的網頁未被修改過。服務器返回此響應時，不會返回網頁內容。"
    },
    "305": {
        word: "使用代理",
        desc: "請求者只能使用代理訪問請求的網頁。若是服務器返回此響應，那麼，服務器還會指明請求者應當使用的代理。"
    },
    "306": {
        word: "",
        desc: ""
    },
    "307": {
        word: "重定向",
        desc: "服務器目前正從不一樣位置的網頁響應請求，但請求者應繼續使用原有位置來進行之後的請求。會自動將請求者轉到不一樣的位置。但因爲搜索引擎會繼續抓取原有位置並將其編入索引，所以您不該使用此代碼來告訴搜索引擎某個頁面或網站已被移動。"
    },
    "400": {
        word: "錯誤請求",
        desc: "服務器不理解請求的語法。"
    },
    "401": {
        word: "身份驗證錯誤",
        desc: "此頁要求受權。您可能不但願將此網頁歸入索引。"
    },
    "402": {
        word: "",
        desc: ""
    },
    "403": {
        word: "禁止",
        desc: "服務器拒絕請求。"
    },
    "404": {
        word: "未找到",
        desc: "服務器找不到請求的網頁。例如，對於服務器上不存在的網頁常常會返回此代碼。"
    },
    "405": {
        word: "方法禁用",
        desc: "禁用請求中指定的方法。"
    },
    "406": {
        word: "不接受",
        desc: "沒法使用請求的內容特性響應請求的網頁。 "
    },
    "407": {
        word: "須要代理受權",
        desc: "請求者必須受權使用代理。若是服務器返回此響應，還表示請求者應當使用代理。 "
    },
    "408": {
        word: "請求超時",
        desc: "服務器等候請求時發生超時。 "
    },
    "409": {
        word: "衝突",
        desc: "服務器在完成請求時發生衝突。服務器必須在響應中包含有關衝突的信息。服務器在響應與前一個請求相沖突的 PUT 請求時可能會返回此代碼，以及兩個請求的差別列表。 "
    },
    "410": {
        word: "已刪除",
        desc: "請求的資源永久刪除後，服務器返回此響應。該代碼與 404（未找到）代碼類似，但在資源之前存在而如今不存在的狀況下，有時會用來替代 404 代碼。若是資源已永久刪除，您應當使用 301 指定資源的新位置。 "
    },
    "411": {
        word: "須要有效長度",
        desc: "服務器不接受不含有效內容長度標頭字段的請求。"
    },
    "412": {
        word: "未知足前提條件",
        desc: "服務器未知足請求者在請求中設置的其中一個前提條件。"
    },
    "413": {
        word: "請求實體過大",
        desc: "服務器沒法處理請求，由於請求實體過大，超出服務器的處理能力。 "
    },
    "414": {
        word: "URI過長",
        desc: "請求的 URI（一般爲網址）過長，服務器沒法處理。 "
    },
    "415": {
        word: "不支持的媒體類型",
        desc: "請求的格式不受請求頁面的支持。 "
    },
    "416": {
        word: "請求範圍不符合要求",
        desc: "若是頁面沒法提供請求的範圍，則服務器會返回此狀態碼。 "
    },
    "417": {
        word: "未知足指望",
        desc: "服務器未知足‘指望’請求標頭字段的要求。"
    },
    "500": {
        word: "服務器內部錯誤",
        desc: "服務器遇到錯誤，沒法完成請求。 "
    },
    "501": {
        word: "還沒有實施",
        desc: "服務器不具有完成請求的功能。例如，當服務器沒法識別請求方法時，服務器可能會返回此代碼。"
    },
    "502": {
        word: "網關錯誤",
        desc: "服務器做爲網關或代理，從上游服務器收到了無效的響應。 "
    },
    "503": {
        word: "服務器當前不可用",
        desc: "目前沒法使用服務器（因爲超載或進行停機維護）。一般，這只是一種暫時的狀態。"
    },
    "504": {
        word: "網關超時",
        desc: "服務器做爲網關或代理，未及時從上游服務器接收請求。 "
    },
    "505": {
        word: "HTTP版本不受支持",
        desc: "服務器不支持請求中所使用的 HTTP 協議版本"
    }
}

//註冊回調函數，每個http請求完成後，都會執行。
CD.network.onRequestFinished.addListener((...args)=>{
    const [{
        request,
        response
    }] = args;

    log(request);

    //本事件 每一次請求都會觸發，因此使用jq的append
    $(".list").append(`<tr class="${response.status !== 200 ? 'red' : ''}"> <td class="method"><div>${request.method}</div></td> <td class="url"><div>${request.url}</div></td> <td class="status"> <span>${response.status}</span> </td> <td class="statusText"> <span class='word'>${statusText[response.status].word}</span> <span class='desc'>${statusText[response.status].desc}</span> </td> </tr>`);
        
    
});

$("body").on("mouseenter", ".statusText .word", function () {
    $(this).next().show();
});
$("body").on("mouseleave", ".statusText .word", function () {
    $(this).next().hide();
});

複製代碼

panel.css

.list{
    margin: 10px;
}
.list li.red{
    color:red;
}
.list tr{
    width: 1100px;
    border: 1px solid blue;
    margin: 10px;
}
.method{
    width: 100px;
}
.url div{
    width: 800px;
    word-wrap:break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.status{
    width: 100px;
    text-align: center;
}
.statusText{
    position: relative;
    width: 100px;
    text-align: center;
}
.word{
    cursor: pointer;
}
.desc{
    display: none;
    position: absolute;
    z-index:99;
    right: 70px;
    top: 20px;
    padding: 5px 10px;
    min-width: 180px;
    text-align: center;
    border: 1px solid rgb(18, 121, 218);
    background-color: rgb(18, 121, 218);
    color:#fff;
    border-radius: 2px;
}
複製代碼

大致就是這樣，將鼠標移到狀態文案中，會有一個描述的tips。

初步這樣，後續會優化&美化。

呀嘞呀嘞~忘了說了。 chrome瀏覽器裏添加拓展，選擇這個文件夾。通常狀況下，關閉控制檯，從新打開控制檯，就能夠刷新你修改的代碼以供調試。由於這個demo是和ajax請求相關，因此，從新打開記得刷新頁面啊~

（PS:添加拓展的頁面裏，這個拓展的代碼若是出錯了。是會有提示的。）

network

上面的demo是network下的onRequestFinished。這個是chrome.devtools.network下的Events之一，還有一個事件。另外還有一個方法。

`chrome.devtools.network`下兩個`Events`

onRequestFinished
onNavigated

這兩個都須要使用addListener來回調的形式。

chrome.devtools.network.onRequestFinished.addListener(args=>{}) //接受的是request系列的參數。
chrome.devtools.network.onNavigated.addListener(url=>{}) //接受的是url系列的參數。
複製代碼

onRequestFinished是每次請求結束都會執行，onNavigated是當你從當前使用這個api的窗口導航到新頁面的時候執行。(大意這樣，翻譯可能有不許。)

`chrome.devtools.network`下的方法

chrome.devtools.network.getHAR

chrome.devtools.network.getHAR返回全部已知網絡請求的HAR日誌。

就這個getHAR。我的理解。試用了一下，可是發現，不是每次打開控制檯&刷新當前頁面就會執行。感受好像有個幾秒的間隔，不知道這個間隔是否是判斷時間戳或者什麼的。也沒查到相關的東西。。。暫時放一放。。。

panel

panel這個下面api較多，待我一點點整理。

panel下直接可使用三個方法

create
setOpenResourceHandler
openResource

`create`

上面的CD.panels.create()，我聲明瞭const CD = chrome.devtools。

chrome.devtoolspanels.create()接受四個參數。

//這個就是建立一個panel
chrome.devtools.panels.create(
    "title",        //這個panel的標題
    "someImg.jpg",  //這個panel的圖標。按照chrome給的demo來看，這個是和title一塊兒展現的。可是我還沒讓它展現出來。。。
    "panels.html",  //這個panel的主題頁面
    function(panel){ //這個panel的回調函數
        
    }
)
複製代碼

`setOpenResourceHandler`

//指定當用戶單擊Developer Tools窗口中的資源連接時要調用的函數。
//若是要接觸處理程序的設定，傳'空'或者'null'來調用。
chrome.devtools.panels.setOpenResourceHandler(function callback(){
    //當用戶單擊Developer Tools窗口中的有效資源連接時調用的函數。須要注意的是，若是用戶單擊的是一個無效的URL或者XHR，就不會執行這個函數。
})
複製代碼

`openResource`

//請求Devtools在Developer Tools面板中打開URL。
//補一句，這個方法在chrome 38之後可用。
chrome.devtools.panels.openResource(
    'url',  //要打開的資源的URL
    'lineNumber',//指定資源加載時須要滾動到的行號 
    function callback(){
        //成功加載資源後會調用
    }
)
複製代碼

其餘api，研究研究再補充到筆記裏。

感受看chrome的文檔好吃力啊。。純英文就算了。。多是我理解能力有問題。。。
複製代碼

chrome.devtools筆記打完收工。純屬我的整理，無抄襲之意。歡迎糾錯&討論。

這個就是devtools擴展有錯誤的時候的截圖，在瀏覽器的擴展程序裏可見。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

擼一個本身想要的chrome-devtools拓展之筆記

chrome.devtools的api

network

chrome.devtools.network下兩個Events

chrome.devtools.network下的方法

panel

create

setOpenResourceHandler

openResource

`chrome.devtools.network`下兩個`Events`

`chrome.devtools.network`下的方法

`create`

`setOpenResourceHandler`

`openResource`