Chrome Dev Tools - Aug 2018 (they will keep changing)
Customize the tools themselves - "dots" menu on the right
Most common use is to change where the tools are "docked" (right, below, etc).
Show the source code so you can see if it is what you expect and to see what elements you can use in automation, what id's are being used, etc.
Note finding elements has changed over the years!
find in the console used to search the DOM as expected. Now it searches the page itself. To work with the DOM use
document.querySelector for individual elements and
document.querySelectorAll for arrays of elements.
Luckily we have another trick here to avoid typing all that - the jquery style interface is available in the console (regardless of whether the page uses/loads jquery). This means you can just use
$("...") for css locators and
$x("//...") for xpath locators.
One of the most useful and very commonly used things here for QA folks is seeing web page errors
So you know where the browser is getting (or trying to get) content from. So you can verify calls are coming from correct locations, e.g. prod pages are using prod calls and not staging environment calls by mistake.
So you can see the http get, post, etc. calls and how long they took. You visit this tab and then reload the page and then you can see what's taking the most time. Allows you to see any sites that are particularly slow including resources such as media and content servers.
Note Folks often actually want the network tab (previous point) for 'performance' information.
The performance tab is for examining the performance of the browser itself. You start a profiling tool, perform browser actions, stop the profiling tool and then examine the results. They can show any issues with the rendering of pages
Browser memory usage, helps to show if inefficient or resource intensive code is being run.
Manifest, service workers, useful for stuff 'stored in the browser'
New tools to diagnose performance, best practices, accessibilty and SEO