In order to use DevTools, we need to right click somewhere on the page and select “inspect element”. This will bring up an entirely new pane in our browser showing all the assets used on that page. Or with shortcuts “Command+Option+C” (for windows/linux “Control+Shift+C” ).
There are so many tabs, which sometime would confuse you. But don’t worry, I’ll briefly explain some major ones to make things bit easier.
In “Elements”, we could check out the webpage’s HTML and CSS, select a DOM node and try to change it to see the result in the browser immediately. The “interaction” with our web app using browser, would accelerate our styling process.
In general, use the Network panel when you need to make sure that resources are being downloaded or uploaded as expected. The most common use cases for the Network panel are:
- Making sure that resources are actually being uploaded or downloaded at all.
- Inspecting the properties of an individual resource, such as its HTTP headers, content, size, and so on.
Runtime performance is how your page performs when it is running, as opposed to loading. It’ll help optimizing Website Speed With Chrome DevTools. The network connection of the computer that you use to build sites is probably faster than the network connections of the mobile devices of your users. By throttling the page you can get a better idea of how long a page takes to load on a mobile device.
“Memory” panel discovers memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections.Find out how much memory your page is currently using with the Chrome Task Manager.
- Visualize memory usage over time with Timeline recordings.
- Identify detached DOM trees (a common cause of memory leaks) with Heap Snapshots.
- Find out when new memory is being allocated in your JS heap with Allocation Timeline recordings.
Inspect all resources that are loaded, including IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and stylesheets.
- Use the Manifest pane to inspect your web app manifest and trigger Add to Home-screen events.
- Use the Service Workers pane for a whole range of service-worker-related tasks, like unregistering or updating a service, emulating push events, going offline, or stopping a service worker.
- View your service worker cache from the Cache Storage pane.
- Unregister a service worker and clear all storage and caches with a single button click from the Clear storage pane.
Use the “Security” panel in Chrome DevTools to make sure HTTPS is properly implemented on a page
Brief analyze and report about your web application.