DevTools are an invaluable part of an web engineers toolkit. Here's a few things that you might not have known.
1) Full page screenshots
You can capture a screenshot of a specific node. Just select the element, hit 'cmd+shift+p', and type 'capture node screenshot'
2) jQuery style variables
Just can't let go of jQuery? When selecting elements in the console, use $ as an alias for document.querySelector
Want to log an array of data? Use console.table() and your array will be rendered in to a table
4) CSS shortcuts
Trying to work out where an element is inheriting a particular style from? Use the 'computed' style tab to view the properties that are rendered along with a link to what selector is adding that property.
5) What the font
You can also view the font that is rendered in the computed style tab, along with whether it's a local or network font.
6) Debugging network requests
Trying to debug a network request? Right-clicking the request in the Network tab will allow you to copy the request in a range of pre-formatted requests.
7) Image as a data URI
Select an image in the Application tab to quickly get it as a data URI
These tips were originally posted in this thread on Twitter