Chrome DevTools How to guide

https://developers.google.com/web/tools/chrome-
devtools/?hl=en

Elements

Use the Elements panel to iterate on the layout and design of your site by freely
manipulating the DOM and CSS.
Console

Use the Console to log diagnostic information during development or use it as a shell to
interact with the JavaScript on the page.

Sources

Debug your JavaScript using breakpoints in the Sources Panel or connect your local
files via Workspaces to use DevTools live editor.
Network

Use the Network panel to get insights into requested and downloaded resources and
optimize your page load performance.

Timeline

Use the Timeline to improve the run time performance of your page by recording and
exploring the various events that happen during the lifecycle of a site.
Profiles

Use the Profiles panel if you need more information than the Timeline provide, for
instance to track down memory leaks.

Resources

Use the Resources panel to inspect all resources that are loaded, including IndexedDB
or Web SQL databases, local and session storage, cookies, Application Cache, images,
fonts, and stylesheets.