Chrome DevTools for Dummies

JavaScript users couldn’t thank “Chrome Developer Tools” enough for making the coding lives easier. As a newbie JavaScript coder myself, I’d love to write a DevTools 101 for those who just started to use Chrome DevTools.

The DevTools panel allows us to interact with the HTML, CSS, and Javascript running on just about any page on the internet. They’re great for messing around, but their real purpose is to save developers time and mental anguish. DevTools save our time by allowing us to manipulate our code in the browser, allowing us to quickly debug styling issues and play with different ideas.

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” ).

DevTools Panels in Chrome Browser

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.

  1. Elements

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.

“Element” Panel demonstration

2.Console

Web developers often log messages to the Console to make sure that their JavaScript is working as expected. To log a message, you insert an expression like console.log(‘hello’) into your JavaScript, or if you have an array of objects, you could use console.log(array) to see a table of your datas and you could also use console.assert(expression, object). (For more console API references https://developers.google.com/web/tools/chrome-devtools/console/api). When the browser executes your JavaScript and sees an expression like that, it knows that it's supposed to log the message to the Console.

“Console” Panel demonstration
“console.table(array)” demonstration

3.Sources

Debug JavaScript, persist changes made in DevTools across page reloads, save and run snippets of JavaScript, and save changes that you make in DevTools to disk.

“Source” Panel demonstration

4.Network

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.
“Network” Panel demonstration

5.Performance Panel

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.

7.Memory

“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.

8.Application

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.
“Application” Panel Demonstration

9.Security

Use the “Security” panel in Chrome DevTools to make sure HTTPS is properly implemented on a page

“Security” Panel demonstration

10.Audits

Brief analyze and report about your web application.

“Audits” Panel demonstration

Sources:

Multi-human-lingual and multi-programming-lingual | https://www.gaierken.com/