Cacher is the code snippet organizer for pro developers

https://medium.freecodecamp.org/cool-chrome-devtools-tips-and-tricks-you-wish-you-knew-already-f54f65df88d2

Drag-and-drop in the Elements panel

In the Elements panel, you can drag and drop any HTML element and change its position across the page.

Reference the currently selected element in the Console

Select a node in the Elements panel, and type $0 in the console to reference it.

If you’re using jQuery, you can enter $($0) to access the jQuery API on this element.

Use the value of the last operation in th Console

Use $_ to reference the return value of the previous operation executed in the Console

Add CSS and edit the element state

In the Elements panel there are two super useful buttons.

The first lets you add a new CSS property with any selector you want, but pre-filling the currently selected element:

The second one lets you trigger a state for the selected element, so you can see the styles applied when it’s active, hovered, or on focus.

Save to file the modified CSS

Click the name of the CSS file that you edited. The inspector opens it into the Sources pane, and from there you can save it with the live edits you applied.

This trick does not work for new selectors added using +, or into the element.style properties, but only for modified, existing ones.

Screenshot a single element

Select an element and press cmd-shift-p (or ctrl-shift-p in Windows) to open the Command Menu, and select Capture node screenshot

Find an element using CSS selectors

Pressing cmd-f (ctrl-f in Windows) opens the search box in the Elements panel.

You can type any string in there to match the source code, or you can also use CSS selectors to have Chrome generate an image for you:

Shift-enter in the Console

To write commands that span over multiple lines in the Console, press shift-enter.

Once you’re ready, press enter at the end of the script to execute it:

You can clear the console using the Clear button on the top-left of the console, or by pressing ctrl-l or cmd-k.

Go to…

In the Sources panel:

• cmd+o or cmd+p (ctrl+o or ctrl+p in Windows), shows all the files loaded by your page.
• cmd+shift+o (ctrl-shift-o in Windows) shows the symbols (properties, functions, classes) in the current file.
• ctrl+g goes to a specific line.

Watch Expression

Instead of writing again and again a variable name or an expression you are going to check a lot during a debug session, add it to the Watch Expression list.

XHR/Fetch debugging

From the debugger open the XHR/Fetch Breakpoints panel.

You can set it to break any time an XHR/Fetch call is sent, or just on specific ones:

Debug on DOM modifications

Right-click an element and enable Break on Subtree Modifications. Whenever a script traverses that element’s children and modifies them, the debugger stops automatically to let you inspect what’s happening.

Local Overrides

Use the Local Overrides feature to map remote network resources to local filesystem resources.

This powerful workflow enables you to quickly prototype changes on production websites. To try this feature out:

Open up the Overrides pane from the Sources Panel. Select Select folder for Overrides and configure a folder where your overridden resources will live on the filesystem. In the Network Panel, right click on a resource you wish to override and select Save for overrides. DevTools creates a local resource which you can edit. Reloads to the webpage now serve your local asset rather than a remote resource.

Violations

Console Violations reminds you of best practices, customised to your code.

A benefit of using this feature is: there's no need to run a Performance Profile, or to run an Audit, since violations are shown as the offending code executes (e.g. on page load).

To view Console Violations:

• Click the 'Default levels' dropdown in the Console Panel and select 'Verbose'
• Type in violation in the Console Panel filter box

Violations can provide valuable performance insight into your code, such as:

• JavaScript which forced a reflow
• JavaScript which used document.write
• Slow executing setTimeout handlers
• Inefficient event listeners
• And many other violations

Web Sockets

DevTools has a built-in WebSocket viewer. To try it out:

• Open the Filter menu in the Network Panel
• Select the WS filter
• Select any WebSocket resource
• Open the Messages pane

You can:

• Click on JSON payloads to browse the JSON interactively
• Search through payloads with the search filter option
• View the payload size, time & contents
• Toggle between sent and received messages

Perfromance - Long Tasks

The Long Task indicator in the Performance Panel can give you a high-level overview of which activity is taking a long time to execute. To try it out:

1. Record a performance profile of some webpage activity, e.g. the loading of a popular website
2. Look for the red flag icons in the Main Thread. They are contained within grey coloured bars which are labelled 'Task'
3. Hover over a long task and notice the tooltip specifies the duration of the long task

From this point on, your goal would be to look at the low level activity which occurred within a long task and understand why it is happening.

Tip: You can programmatically observe long tasks using the Long Tasks API in JavaScript.

The code looks like this:

const observer = new PerformanceObserver((list) => {
    console.log('Long Task detected! 🚩️');
    const entries = list.getEntries();
    console.log(entries);
});

observer.observe({entryTypes: ['longtask']});

Clear Data

When debugging, it's helpful to clear all forms of persistent storage which a website is using. To clear all site data:

1. Press Cmd + Shift + P
2. Type in clear
3. Select Clear site data

💡 Alternatively, you can navigate to the Application Panel > Clear Site Data panel where you can quantify the data a site is using, and optionally clear it.

Long Hover to See Affected Elements

In the Styles Pane within the Elements Panel, you can long-hover a CSS property to highlight all nodes which are affected by that a property. This applies for CSS properties which affects an elements box model, such as margin or padding.

💡 ️As a bonus tip, if you long-hover a CSS selector within the Styles Pane, all elements matching that selector are highlighted on the page.