提前BB：本来打算和chrome拓展玩耍的，但是发现我想做的东西，需要用到的一些API，单纯的CRX不足以满足。然后又发现新大陆chrome.devtools。于是，记一个笔记。 如果你用过,或者正在使用react，那么你应该知道一个东西叫做React Developer Tools。这个就是在页面右上角有个图标，完了使用的时候，按F12也会看到，在控制台里有一个React的选项。没错就是它。
图片里红框里的这个tab就是用
devtools撸出来的。。。(我记得是)
chrome官方教程请往这里戳
chrome.devtools的api
(1) devtools.inspectedWindow
(2) devtools.network
(3) devtools.panels
以下是个人整理翻译(英语四级没过，翻译不对，还望轻喷)。
撸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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>seeRequesttitle>
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
<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>whattitle>
<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(`${response.status !== 200 ? 'red' : ''}">
${request.method}
${request.url}
${response.status}
${statusText[response.status].word}
${statusText[response.status].desc}
`);
});
$("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笔记打完收工。纯属个人整理，无抄袭之意。欢迎纠错&讨论。