提前 BB: 本来打算和 Chrome 拓展玩耍的, 但是发现我想做的东西, 需要用到的一些 API, 单纯的 CRX 不足以满足. 然后又发现新大陆 Chrome.devtools. 于是, 记一个笔记. 如果你用过, 或者正在使用 react, 那么你应该知道一个东西叫做 React Developer Tools. 这个就是在页面右上角有个图标, 完了使用的时候, 按 F12 也会看到, 在控制台里有一个 React 的选项. 没错就是它.
图片里红框里的这个 tab 就是用 devtools 撸出来的...(我记得是)
Chrome 官方教程请往这里戳 https://developer.chrome.com/extensions/devtools
Chrome.devtools 的 API
- (1) devtools.inspectedWindow
- (2) devtools.network
- (3) devtools.panels
以上三个一般情况下需要爬墙去看.
可以去全球最大同性交友网站 GitHub https://github.com 去搜索 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.
初步这样, 后续会优化 & 美化.
其他 API, 研究研究再补充到笔记里.
呀嘞呀嘞~ 忘了说了. Chrome 浏览器里添加拓展, 选择这个文件夹. 一般情况下, 关闭控制台, 重新打开控制台, 就可以刷新你修改的代码以供调试. 因为这个 demo 是和 Ajax 请求相关, 所以, 重新打开记得刷新页面啊~
(PS: 添加拓展的页面里, 这个拓展的代码如果出错了. 是会有提示的.)
Chrome.devtools 笔记打完收工. 纯属个人整理, 无抄袭之意. 欢迎纠错 & 讨论.
来源: https://juejin.im/post/5c246ad2518825566d238d4d