Here is a selection of Chrome DevTools features / productivity tips.
A Dark Theme is available in Settings > Preferences
A Command Menu is available to quickly jump around the UI via Cmd+Shift+P (Mac) or Ctrl+Shift+P (Linux, Windows).
If you hold down the shift key when hovering over a resource in the Network panel it will show you the initiator of the request in green and any dependencies in red.
The Network panel has a search box where you can filter requests by domain: domain:xxx. An alternative method that may be more suitable in some situations is via the Security panel that has a link to jump to the Network panel with the resources for a particular domain filtered.
The filter search box on the Network panel has more filters. For example -larger-than:50k will return all resources less than 50k (- does negation). You can see a list of them here: developers.google.com/web/updates/2015/08/the-larger-than-advanced-network-panel-filter-and-a-few-others.
When making edits to styles via the Elements panel, you can you can see a history of all the edits made and revert to a certain revision via the History sub-panel (sub-panel available in the More Tools menu option). Although in my experience this is not that helpful when dealing with minified CSS. Maybe it will pretty-print the CSS diff at some point in the future?
In the Styles section of the Elements panel you can increment and decrement unit values for styles by an amount of 1 with the keyboard’s arrow keys. Holding down additional keys will change the increment amount:
- Alt key: 0.1
- Shift key: 10
- Command key / Control key: 100
Clicking on a colour in the Styles section of the Elements panel will display a palette with a colour picker. The palette has a button to reveal further colour selections. One is related to Material Design. The other displays a palette of colours used on the site gathered from the CSS.
Device Mode has some useful features. At the top it has the dimensions of common device sizes (320px, 425px, 768px…) that can be used both as a guide as to what break-points to use for what you are building and to quickly jump to previewing at those sizes.
The three-dots option menu for device-mode has an option named Show media queries. When enabled, below the device dimensions are a colour-coded listing of break-points used in the CSS.
- blue: max-width
- green: min-width & max-width
- orange: min-width
Clicking on them snaps the viewport to that size and right-clicking allows you to jump to instances in the CSS where that breakpoint is being used.
There some other useful options in the three-dots option menu worth taking a look at.
To time the execution of code you can use console.time('...') with console.timeEnd('...'). Additionally these will show up in the Timeline panel as a coloured line. console.timeStamp('...') will add a timestamp to the Timeline panel.
console.trace() will output a stack trace at that moment to the console.
console.profile('...') and console.profileEnd('...') will save a JavaScript profile to the Profile panel.
$('...') is a console shorthand for document.querySelector('...'). $$('...') for document.querySelectorAll('...').
You can log when events are fired in the console with monitorEvents. For example monitorEvents(window, "resize").
The Task Manager can be accessed via Window -> Task Manager. As well as being able to kill tabs and see resource information you can see when a site being preloaded.