提前BB：本來打算和chrome擴充玩耍的，但是發現我想做的東西，需要用到的一些API，單純的CRX不足以滿足。然後又發現新大陸chrome.devtools。於是，記一個筆記。
如果你用過,或者正在使用react，那麼你應該知道一個東西叫做React Developer Tools。這個就是在頁面右上角有個圖示，完了使用的時候，按F12也會看到，在控制檯裡有一個React的選項。沒錯就是它。
圖片裡紅框裡的這個tab就是用devtools擼出來的。。。(我記得是)
chrome.devtools的api
(2) devtools.network
(3) devtools.panels
以上三個一般情況下需要爬牆去看。
可以去全球最大同性交友網站github去搜尋lantern，完了一頓點，它會開啟一個頁面，不用管，之後你就可以看看牆外面是啥樣了。可以升級成專業版，不升級也能用，超過流量好像就限速了，本來就慢，再限速點…影(wo)響(mei)不(gan)大(jue)。
以下是個人整理翻譯(英語四級沒過，翻譯不對，還望輕噴)。
擼chrome.devtools需要manifest.json。和chrome擴充一樣。
{
"name": "這個擴充叫啥名字"
"version": "1.0", //修改了幾次
"minimum_chrome_version": "10.0", //這個貌似只能是這個數~
"devtools_page": "devtools.html", // 入口頁
...
}
複製程式碼能擼html、js、css就可以。
資料夾結構隨意，自己引用的到就行。
下面是我自己做的小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擴充套件有錯誤的時候的截圖，在瀏覽器的擴充套件程式裡可見。