标签:gpo man debugging extend VID orm panel visual network
You can use the new Logpoint
feature to quickly inject a console.log message into your JavaScript code with any variables you like. You can do this without having to pause at a breakpoint which can help your debugging workflow.
DevTools can generate a JavaScript expressions which accesss a DOM node you specify ,this generated expression is ready to paste into your codebase.
Example
document.querySelector('#num2')
Note programmatically access Paint Timing information in JavaScript
performance.getEntriesByType('paint')
If you right click on a DOM Node in the Elements Panel, you can select Store as global variable which gives you quick access to that node from the Console Panel.
The JavaScript variables are named temp1
, temp2
, temp3
and so on.
You can easily pause current script execution with these keyboard shortcuts:
Mac: F8 or Command + \
Windows: F8 or Control + \
Built into the DevTools Console is the Command Line API. You can use this JavaScript snippet:
queryObjects(Constructor)
To query for and retrieve objects which were created from the constructor you specify.
The new Argument Hints feature within the Console Panel informs you of function signatures. This can be useful for exploring lesser known web platform APIs.
To export a Network Panel recording, right click within the Network Panel and select Save as HAR with content, you can drop this same exported HAR file into the Network Panel to visualise it.
You can now search across all network headers and response bodies in the Network Panel. Use the shortcut Cmd + F / Ctrl + F to open the Network Search Sidebar. Searching by regular expression is also supported.
Example
`2 + 2 =: ${2+2}`
The new Copy as Fetch feature extends the Network Panel context menu. You can for example, right click on a network resource, and copy as cURL:
curl ‘https://umaar.com/‘ -H ‘authority: umaar.com‘...
However, that command belongs in your terminal, rather than your codebase. Copy as Fetch provides Fetch API compatible syntax in JavaScript like the following:
fetch("https://umaar.com/", {
"credentials": "include",
"headers": {},
"referrerPolicy": "no-referrer-when-downgrade",
"body": null,
"method": "GET",
"mode": "cors"
});
await fetch("https://umaar.com/", {
"credentials": "include",
"headers": {},
"referrerPolicy": "no-referrer-when-downgrade",
"body": null,
"method": "GET",
"mode": "cors"
});
原文: Chrome DevTools: Color tricks in the Elements Panel
标签:gpo man debugging extend VID orm panel visual network
原文地址:https://www.cnblogs.com/rosendolu/p/10200040.html