提前BB：本來打算和chrome拓展玩耍的竹观，但是發(fā)現(xiàn)我想做的東西阿弃，需要用到的一些API石洗，單純的CRX不足以滿足谦絮。然后又發(fā)現(xiàn)新大陸chrome.devtools题诵。
如果你用過,或者正在使用react，那么你應(yīng)該知道一個東西叫做React Developer Tools层皱。這個就是在頁面右上角有個圖標(biāo)性锭，完了使用的時候，按F12也會看到叫胖，在控制臺里有一個React的選項(xiàng)草冈。沒錯就是它
圖片中紅色框框里的這個東西
這個就是使用
chrome.devtools開發(fā)出來的。
chrome.devtools的api
(1) devtools.inspectedWindow
(2) devtools.network
(3) devtools.panels
擼chrome.devtools同樣需要manifest.json瓮增。
{
"name": "這個拓展叫啥名字"
"version": "1.0",
"minimum_chrome_version": "10.0",
"devtools_page": "devtools.html",
...
}
文件夾結(jié)構(gòu)隨意疲陕，自己引用的到就行。
下面是我自己做的小demo钉赁。瞎弄一個玩玩蹄殃。
首先是目錄結(jié)構(gòu)
我來解釋一下這一坨，首先你踩，manifest是必須要有的诅岩，這個是配置文件讳苦。
index.html是配置文件中引入的，相當(dāng)于是入口頁面吩谦，index.js是index.html引入的初始化js鸳谜。
panel.html是index.js中初始化時引入的頁面。panel.js和panel.css是它要使用的式廷。
reset.css是"復(fù)原css"咐扭。
引入的jq是為了方便操作dom。N.png暫時還沒使用滑废。
manifest.json
{
"name":"seeRequest",//這個拓展叫啥
"version":"1.0.0", //改了幾次啊
"minimum_chrome_version":"10.0",//這個參數(shù)就這個數(shù)
"description": "Easily to see ajax request params and infomation",//介紹下是干啥的
"devtools_page":"index.html", //這個devtools的進(jìn)入頁面是啥
"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>狀態(tài)</th>
</tr>
</table>
</div>
<script src="./jquery-2.2.4.min.js"></script>
<script src="panel.js"></script>
</body>
</html>
這個就是普通的頁面html了，隨便擼腊状。
panel.js
const CD = chrome.devtools;
//devtools中不認(rèn)識console.log诱咏。使用自帶的api inspectedWindow 來弄一個它認(rèn)識的
const log = (...params) => CD.inspectedWindow.eval(`console.log(...${JSON.stringify(params)})`);
//服務(wù)器狀態(tài)碼對應(yīng)文字 word 以及描述 desc
const statusText={
"200":{
word:"成功",
desc: "服務(wù)器已成功處理了請求。通常缴挖，這表示服務(wù)器提供了請求的網(wǎng)頁胰苏。"
},
"201":{
word: "已創(chuàng)建",
desc: "請求成功且服務(wù)器已創(chuàng)建了新的資源。"
},
"202":{
word:"已接受",
desc: "服務(wù)器已接受了請求醇疼，但尚未對其進(jìn)行處理。"
},
"203":{
word: "非授權(quán)信息",
desc: "服務(wù)器已成功處理了請求法焰，但返回了可能來自另一來源的信息秧荆。"
},
"204":{
word:"無內(nèi)容",
desc: "服務(wù)器成功處理了請求，但未返回任何內(nèi)容埃仪。"
},
"205":{
word:"充值內(nèi)容",
desc: "服務(wù)器成功處理了請求乙濒，但未返回任何內(nèi)容。與 204 響應(yīng)不同卵蛉，此響應(yīng)要求請求者重置文檔視圖（例如清除表單內(nèi)容以輸入新內(nèi)容）颁股。 "
},
"206":{
word:"部分內(nèi)容",
desc: "服務(wù)器成功處理了部分 GET 請求。"
},
"300":{
word:"多種選擇",
desc:"服務(wù)器根據(jù)請求可執(zhí)行多種操作傻丝。服務(wù)器可根據(jù)請求者 來選擇一項(xiàng)操作甘有，或提供操作列表供其選擇。 "
},
"301": {
word: "永久請求",
desc: "請求的網(wǎng)頁已被永久移動到新位置葡缰。服務(wù)器返回此響應(yīng)時亏掀，會自動將請求者轉(zhuǎn)到新位置忱反。您應(yīng)使用此代碼通知搜索引擎蜘蛛網(wǎng)頁或網(wǎng)站已被永久移動到新位置。"
},
"302": {
word: "臨時移動",
desc: " 服務(wù)器目前正從不同位置的網(wǎng)頁響應(yīng)請求滤愕，但請求者應(yīng)繼續(xù)使用原有位置來進(jìn)行以后的請求温算。會自動將請求者轉(zhuǎn)到不同的位置。但由于搜索引擎會繼續(xù)抓取原有位置并將其編入索引间影，因此您不應(yīng)使用此代碼來告訴搜索引擎頁面或網(wǎng)站已被移動注竿。 "
},
"303": {
word: "查看其他位置",
desc: "當(dāng)請求者應(yīng)對不同的位置進(jìn)行單獨(dú)的 GET 請求以檢索響應(yīng)時，服務(wù)器會返回此代碼魂贬。對于除 HEAD 請求之外的所有請求巩割，服務(wù)器會自動轉(zhuǎn)到其他位置。 "
},
"304": {
word: "未修改",
desc: "自從上次請求后随橘，請求的網(wǎng)頁未被修改過喂分。服務(wù)器返回此響應(yīng)時，不會返回網(wǎng)頁內(nèi)容机蔗。"
},
"305": {
word: "使用代理",
desc: "請求者只能使用代理訪問請求的網(wǎng)頁蒲祈。如果服務(wù)器返回此響應(yīng)，那么萝嘁，服務(wù)器還會指明請求者應(yīng)當(dāng)使用的代理梆掸。"
},
"306": {
word: "",
desc: ""
},
"307": {
word: "重定向",
desc: "服務(wù)器目前正從不同位置的網(wǎng)頁響應(yīng)請求，但請求者應(yīng)繼續(xù)使用原有位置來進(jìn)行以后的請求牙言。會自動將請求者轉(zhuǎn)到不同的位置酸钦。但由于搜索引擎會繼續(xù)抓取原有位置并將其編入索引，因此您不應(yīng)使用此代碼來告訴搜索引擎某個頁面或網(wǎng)站已被移動咱枉。"
},
"400": {
word: "錯誤請求",
desc: "服務(wù)器不理解請求的語法卑硫。"
},
"401": {
word: "身份驗(yàn)證錯誤",
desc: "此頁要求授權(quán)。您可能不希望將此網(wǎng)頁納入索引蚕断。"
},
"402": {
word: "",
desc: ""
},
"403": {
word: "禁止",
desc: "服務(wù)器拒絕請求欢伏。"
},
"404": {
word: "未找到",
desc: "服務(wù)器找不到請求的網(wǎng)頁。例如亿乳，對于服務(wù)器上不存在的網(wǎng)頁經(jīng)常會返回此代碼硝拧。"
},
"405": {
word: "方法禁用",
desc: "禁用請求中指定的方法。"
},
"406": {
word: "不接受",
desc: "無法使用請求的內(nèi)容特性響應(yīng)請求的網(wǎng)頁葛假。 "
},
"407": {
word: "需要代理授權(quán)",
desc: "請求者必須授權(quán)使用代理障陶。如果服務(wù)器返回此響應(yīng)，還表示請求者應(yīng)當(dāng)使用代理聊训。 "
},
"408": {
word: "請求超時",
desc: "服務(wù)器等候請求時發(fā)生超時抱究。 "
},
"409": {
word: "沖突",
desc: "服務(wù)器在完成請求時發(fā)生沖突。服務(wù)器必須在響應(yīng)中包含有關(guān)沖突的信息带斑。服務(wù)器在響應(yīng)與前一個請求相沖突的 PUT 請求時可能會返回此代碼媳维，以及兩個請求的差異列表酿雪。 "
},
"410": {
word: "已刪除",
desc: "請求的資源永久刪除后，服務(wù)器返回此響應(yīng)侄刽。該代碼與 404（未找到）代碼相似指黎，但在資源以前存在而現(xiàn)在不存在的情況下，有時會用來替代 404 代碼州丹。如果資源已永久刪除醋安，您應(yīng)當(dāng)使用 301 指定資源的新位置。 "
},
"411": {
word: "需要有效長度",
desc: "服務(wù)器不接受不含有效內(nèi)容長度標(biāo)頭字段的請求墓毒。"
},
"412": {
word: "未滿足前提條件",
desc: "服務(wù)器未滿足請求者在請求中設(shè)置的其中一個前提條件吓揪。"
},
"413": {
word: "請求實(shí)體過大",
desc: "服務(wù)器無法處理請求，因?yàn)檎埱髮?shí)體過大所计，超出服務(wù)器的處理能力柠辞。 "
},
"414": {
word: "URI過長",
desc: "請求的 URI（通常為網(wǎng)址）過長，服務(wù)器無法處理主胧。 "
},
"415": {
word: "不支持的媒體類型",
desc: "請求的格式不受請求頁面的支持叭首。 "
},
"416": {
word: "請求范圍不符合要求",
desc: "如果頁面無法提供請求的范圍，則服務(wù)器會返回此狀態(tài)碼踪栋。 "
},
"417": {
word: "未滿足期望",
desc: "服務(wù)器未滿足‘期望’請求標(biāo)頭字段的要求焙格。"
},
"500": {
word: "服務(wù)器內(nèi)部錯誤",
desc: "服務(wù)器遇到錯誤，無法完成請求夷都。 "
},
"501": {
word: "尚未實(shí)施",
desc: "服務(wù)器不具備完成請求的功能眷唉。例如，當(dāng)服務(wù)器無法識別請求方法時囤官，服務(wù)器可能會返回此代碼冬阳。"
},
"502": {
word: "網(wǎng)關(guān)錯誤",
desc: "服務(wù)器作為網(wǎng)關(guān)或代理，從上游服務(wù)器收到了無效的響應(yīng)党饮。 "
},
"503": {
word: "服務(wù)器當(dāng)前不可用",
desc: "目前無法使用服務(wù)器（由于超載或進(jìn)行停機(jī)維護(hù)）肝陪。通常，這只是一種暫時的狀態(tài)劫谅。"
},
"504": {
word: "網(wǎng)關(guān)超時",
desc: "服務(wù)器作為網(wǎng)關(guān)或代理，未及時從上游服務(wù)器接收請求嚷掠。 "
},
"505": {
word: "HTTP版本不受支持",
desc: "服務(wù)器不支持請求中所使用的 HTTP 協(xié)議版本"
}
}
//注冊回調(diào)函數(shù)捏检，每一個http請求完成后，都會執(zhí)行不皆。
CD.network.onRequestFinished.addListener((...args)=>{
const [{
request,
response
}] = args;
log(request);
//本事件 每一次請求都會觸發(fā)贯城，所以使用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;
}
這個小demo的初衷是想，獲得ajax請求霹娄，來過濾一下能犯。
大體就是這樣鲫骗，將鼠標(biāo)移到狀態(tài)文案中，會有一個描述的tips踩晶。
初步這樣执泰，后續(xù)會優(yōu)化&美化。
呀嘞呀嘞~忘了說了渡蜻。
chrome瀏覽器里添加拓展术吝，選擇這個文件夾。一般情況下茸苇，關(guān)閉控制臺排苍，重新打開控制臺，就可以刷新你修改的代碼以供調(diào)試怎静。因?yàn)槭呛蚢jax請求相關(guān)秘遏，所以萌腿，重新打開記得刷新頁面啊~
（PS:添加拓展的頁面里，這個拓展如果出錯了彤守。是會有提示的。）
chrome.devtools筆記打完收工西壮。純屬個人整理遗增，無抄襲之意。歡迎糾錯&討論款青。
