Early BB: I was going to play with Chrome extension, but I found that I wanted to do something and needed to use some APIS that CRX alone was not enough. And then discovered the new world chrome.devtools. So, take a note. If you’ve used react, or are currently using React, you probably know something called React Developer Tools. There’s an icon in the upper right corner of the page. When you’re done using it, press F12 and you’ll see the React option in the console. That’s it.
tab
devtools
Click here for the official Chrome tutorial
Chrome. Devtools API
(1) devtools.inspectedWindow
(2) devtools.network
(3) devtools.panels
The following is a personal translation of my English.
Devtools requires manifest.json. Same as Chrome Extensions.
{
"name": "What's the name of this extension?"
"version": "1.0".// Change several times
"minimum_chrome_version": "10.0".// This can only be this number ~
"devtools_page": "devtools.html"./ / the entry page. }Copy the codeHTML, JS, CSS can be stroked.
Folder structure is arbitrary, their own reference to the line.
Here is my own small demo. Play around with one. The first is the directory structure
Let me explain this mess. First of all, manifest.json is a must. This is the configuration file.
Index.html is introduced in the configuration file, which is equivalent to the entry page, while index.js is the initial JS introduced in index.html.
Panel.html is the page introduced during initialization in index.js. Panel.js and panel.css are what it will use.
Reset. CSS is “Undo CSS”.
Jq was introduced to facilitate manipulation of the DOM. N.png hasn’t figured out how to show it yet. (It’s not shown in the upper right corner like CRX??)
manifest.json
{
"name":"seeRequest".// What is the name of this extension
"version":"1.0.0".// I changed it several times
"minimum_chrome_version":"10.0".// This argument is just this number
"description": "Easily to see ajax request params and infomation".// What does it do
"devtools_page":"index.html".// What is the devTools entry page
"manifest_version":2 // As with CRX, yes and only 2
}
Copy the codeindex.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>
Copy the codeThis is nothing to say, just a simple HTML page, introducing an initial use of JS.
index.js
const CD = chrome.devtools;
CD.panels.create(
"seeRequest".// The name is the name displayed in devTools.
"N.png".// How to display the image
"panel.html".// This devTools extends the actual action page
)
Copy the codepanel.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>Request information</h1>
<table class="list">
<tr>
<th>methods</th>
<th>address</th>
<th>state</th>
</tr>
</table>
</div>
<script src=". / jquery - 2.2.4. Min. Js. ""></script>
<script src="panel.js"></script>
</body>
</html>
Copy the codeSo this is just plain HTML, whatever it is. (This is shown on the console and I’ll give you my rough demo below.)
panel.js
const CD = chrome.devtools;
// Console. log is not recognized in devTools. Use the built-in API inspectedWindow to get one that it recognizes
const log = (. params) = > CD.inspectedWindow.eval(`console.log(...The ${JSON.stringify(params)}) `);
// The server status code corresponds to word and description desc
// status corresponds to the copy found online, if there is any wrong, hope to point out.
const statusText={
"200": {word:"Success".desc: "The server has successfully processed the request. Typically, this means that the server has provided the requested web page.
},
"201": {word: "Created".desc: "The request succeeded and the server has created a new resource."
},
"202": {word:"Accepted".desc: "The server has accepted the request but has not yet processed it."
},
"203": {word: "Unauthorized Information".desc: "The server has successfully processed the request, but returned information that may have come from another source."
},
"204": {word:"No content".desc: "The server successfully processed the request, but did not return anything."
},
"205": {word:"Recharge content".desc: "The server successfully processed the request, but did not return anything. Unlike the 204 response, this response requires the requester to reset the document view (for example, to clear the form content to enter new content). "
},
"206": {word:"Part of it".desc: "The server successfully processed some GET requests."
},
"300": {word:"Multiple options".desc:"The server can perform a variety of actions upon request. The server can select an operation based on the requester, or it can provide a list of operations to choose from. "
},
"301": {
word: "Permanent request".desc: "The requested page has been permanently moved to the new location. When the server returns this response, the requester is automatically forwarded to a new location. You should use this code to notify search engines that a spider page or website has been permanently moved to a new location."
},
"302": {
word: "Temporary move".desc: "The server is currently responding to requests from web pages in different locations, but requesters should continue to use the original location for future requests. The requester is automatically forwarded to a different location. But because search engines continue to grab and index the original location, you should not use this code to tell search engines that a page or web site has been moved. "
},
"303": {
word: "View other locations".desc: "The server returns this code when the requester should make a separate GET request at a different location to retrieve the response. For all requests other than the HEAD request, the server automatically redirects to another location. "
},
"304": {
word: "Unmodified".desc: "The requested page has not been modified since the last request. When the server returns this response, the web page content is not returned.
},
"305": {
word: "Using a proxy".desc: "The requester can only access the requested web page using a proxy. If the server returns this response, the server also indicates which proxy the requester should use.
},
"306": {
word: "".desc: ""
},
"307": {
word: "Redirect".desc: "The server is currently responding to requests from web pages in different locations, but requesters should continue to use the original location for future requests. The requester is automatically forwarded to a different location. But you should not use this code to tell a search engine that a page or website has been moved because search engines continue to crawl and index the original location."
},
"400": {
word: "Incorrect request".desc: The server does not understand the syntax of the request.
},
"401": {
word: "Authentication error".desc: "This page requires authorization. You may not want to index this page."
},
"402": {
word: "".desc: ""
},
"403": {
word: "Ban".desc: "Server rejected the request."
},
"404": {
word: "Not found".desc: "The server could not find the requested page. For example, this code is often returned for web pages that do not exist on the server.
},
"405": {
word: "Method disabled".desc: "Disable the method specified in the request."
},
"406": {
word: "Not accepted.".desc: "The requested web page cannot be responded to using the requested content properties. "
},
"407": {
word: "Agency authorization required.".desc: "The requester must authorize the use of the proxy. If the server returns this response, it also indicates that the requester should use a proxy. "
},
"408": {
word: "Request timed out".desc: "The server timed out while waiting for a request. "
},
"409": {
word: "Conflict".desc: "A server conflict occurred while completing a request. The server must include information about the conflict in the response. The server may return this code in response to a PUT request that conflicts with the previous one, along with a list of the differences between the two requests. "
},
"410": {
word: "Deleted".desc: "The server returns this response after the requested resource is permanently deleted. This code is similar to the 404 (not found) code, but is sometimes used in place of the 404 code in cases where the resource previously existed and now does not exist. If the resource has been permanently deleted, you should use 301 to specify the new location of the resource. "
},
"411": {
word: "Need effective length".desc: "The server will not accept requests that do not contain a valid content-length header field."
},
"412": {
word: "Conditions not met.".desc: "The server did not meet one of the prerequisites set by the requester in the request."
},
"413": {
word: "Request entity too large".desc: "The server could not process the request because the request entity was too large for the server to handle. "
},
"414": {
word: "URI for too long".desc: "The request URI (usually a web address) is too long for the server to process. "
},
"415": {
word: "Unsupported media types".desc: "The format of the request is not supported by the requested page. "
},
"416": {
word: "Requested scope does not meet requirements".desc: "If the page cannot provide the requested scope, the server returns this status code. "
},
"417": {
word: "Expectations are not met.".desc: "The server did not meet the requirements for the 'expected' request header field."
},
"500": {
word: "Server internal error".desc: "The server encountered an error and could not complete the request. "
},
"501": {
word: "Not yet implemented.".desc: "The server is not equipped to complete the request. For example, the server might return this code when it cannot recognize the request method.
},
"502": {
word: "Gateway error".desc: "The server acting as a gateway or proxy received an invalid response from the upstream server. "
},
"503": {
word: "Server is currently unavailable".desc: "The server is currently unavailable (due to overloading or downtime for maintenance). Usually, it's just a temporary condition."
},
"504": {
word: "Gateway timed out".desc: "The server, acting as a gateway or proxy, did not receive the request from the upstream server in time. "
},
"505": {
word: "HTTP version not supported".desc: "The server does not support the HTTP protocol version used in the request"}}// Register the callback function, which is executed after each HTTP request completes.
CD.network.onRequestFinished.addListener((. args) = >{
const [{
request,
response
}] = args;
log(request);
// This event is triggered on every request, so use JQ's 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();
});
Copy the codepanel.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;
}
Copy the code
That’s about it. Hover your mouse over the status text and there will be a tip that describes it.
Preliminary so, the follow-up will optimize & beautify.
Blah, blah, blah. I forgot to mention that. To add extensions to chrome, select this folder. In general, close the console and open it again to refresh the code you have modified for debugging. Since this demo is about Ajax requests, remember to refresh the page when you open it again
PS: add the extension page, the extension code if there is an error. There will be a hint.
network
The demo above is onRequestFinished under network. This is one of the Events under Chrome.devtools.net work, and one more event. There’s another way.
chrome.devtools.networkThe next twoEvents
- onRequestFinished
- onNavigated
Both need to be called back and forth using addListener.
chrome.devtools.network.onRequestFinished.addListener(args= >{}) // Accept the parameters of the Request series.
chrome.devtools.network.onNavigated.addListener(url= >{}) // It takes a url family of arguments.
Copy the codeOnRequestFinished is executed at the end of each request, and onNavigated is executed when you navigate to a new page from the window that is currently using the API. (The translation may be inaccurate.)
chrome.devtools.networkThe method of
- chrome.devtools.network.getHAR
Chrome.devtools.net work. GetHAR HAR log return all known network request.
That’s getHAR. Personal understanding. Tried it out, but found that it does not execute every time you open the console & refresh the current page. It feels like there’s an interval of a few seconds. I don’t know if it’s a time stamp or something. I don’t know anything about it… Leave it for a while…
panel
There are many APIS under panel, so I need to sort them out a little bit.
Three methods can be used directly under panel
- create
- setOpenResourceHandler
- openResource
create
Above cd.stereo.create (), I declare const CD = Chrome.devtools.
Chrome. Devtoolspanels. The create () takes four parameters.
// Create a panel
chrome.devtools.panels.create(
"title".// The title of this panel
"someImg.jpg".// The icon of this panel. According to the demo given by Chrome, this is shown with title. But I haven't shown it yet...
"panels.html".// The theme page of this panel
function(panel){ // This panel's callback function})Copy the codesetOpenResourceHandler
// Specifies the function to call when the user clicks a resource link in the Developer Tools window.
// If you want to touch handler Settings, pass 'null' or 'null' to call.
chrome.devtools.panels.setOpenResourceHandler(function callback(){
// The function called when the user clicks a valid resource link in the Developer Tools window. Note that this function will not be executed if the user clicks on an invalid URL or XHR.
})
Copy the codeopenResource
// Request Devtools to open the URL in the Developer Tools panel.
// By the way, this method is available after Chrome 38.
chrome.devtools.panels.openResource(
'url'.// The URL of the resource to open
'lineNumber'.// Specify the line number to scroll to when the resource is loaded
function callback(){
// called after the resource is successfully loaded})Copy the codeOther apis, research and add to the notes.
It's hard to read the chrome documentation. Pure English is ok. Maybe I have a comprehension problem...Copy the codeChrome. Devtools notes over. Purely personal arrangement, no plagiarism. Error correction & discussion are welcome.
