Dev-Tips

Posted 2021-01-31 rosendolu

186 Chrome DevTools: How to use Logpoints for quicker javascript debugging

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.

185 Chrome DevTools: Generate a JavaScript expression to get a DOM node

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')

184 Chrome DevTools: Easily identify key rendering milestones with Paint Timing Markers

• First Contentful Paint
• First Meaningful Paint
• DOMContentLoaded Event
• Onload Event

Note programmatically access Paint Timing information in JavaScript

performance.getEntriesByType('paint')

183 Chrome DevTools: Shortcuts to access the DOM in JavaScript from the Console Panel

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.

182 VS Code: Automatically convert your Promise chains into async/await

181 Chrome DevTools: Multiple techniques to expand all child nodes in the DOM tree

• Right click on a parent DOM node and select Expand recursively to expand all child nodes
• You can also hold the Option key and then click the arrow icon next to a DOM node to expand all children. On Windows, the key combination is Control + Alt

180 Chrome DevTools: Throttle your CPU and network with Lighthouse audits

179 Chrome DevTools: Easily pause on JavaScript code without manually setting breakpoints

You can easily pause current script execution with these keyboard shortcuts:

Mac: F8 or Command +
Windows: F8 or Control +

Chrome DevTools: Create live expressions within the Console panel

174 Chrome DevTools: Drag and drop new images to override them on a website

• Enable local overrides.
• Locate the original website image in the Sources Panel > Page Pane.
• Drag and drop your new image from the filesystem over the existing image in the Sources Panel.

173 Chrome DevTools: Identify objects created with a certain constructor

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.

172 Chrome DevTools: Argument Hints for built-in and user-defined JavaScript code

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.

171 Chrome DevTools: Import and export Network Panel recordings

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.

170 Chrome DevTools: Search across all network headers and content

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.

169 Chrome DevTools: Debugging webpage accessibility with audits, the a11y pane and colour contrast

168 Chrome DevTools: Instant results for your JavaScript expressions

Example

`2 + 2 =: ${2+2}`

167 Chrome DevTools: Modernise your JavaScript codebase with DevTools

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