A comprehensive guide for Chrome DevTools – Revised and Updated for July 2020

Chrome DevTools – who hasn’t heard about it. It’s one of the most powerful all-in-one tools you definitely need for programming websites and web applications.

Table of contents:

  1. Available panels
    1. Application
    2. Console
    3. Elements
      1. CSS
      2. DOM
      3. JS
    1. Lighthouse
    2. Memory
    3. Network
    4. Performance
    5. Storage
  2. Wrap up

It allows you to review and modify the code in real-time, test and measure performance and even assess quality & security of your website.

Image credits: https://developers.google.com

Available panels

Chrome DevTools consists of a couple of sections that will allow you to do the aforementioned, so we will go through each and one of them so you can really dig deeper into the power of this instrument.

In Chrome DevTools, you can order those panels by your own preference so in this article they might be sorted differently than you’re used to.

Chrome DevTools panels sorting
Chrome DevTools panels sorting

Application

A tab Application is a place where you can get information about how the web site interacts with your browser in general point of view.

You can for example see, detailed information about cookies, how they are stored, when they expire and from what sources they’ve been imported. You have access to localStorage, sessionStorage, in-browser DB, active background-sync processes and push notifications.

You can also remove all of the stored cached content a website saved on your computer.

Console

The Console panel is a place where you can interact with a website via javascript. It allows you to access all of the variables and function accessible in the global scope and also, it allows you to run your own custom code, for example, you can play around with plain javascript, you can add your custom functions into the document flow and they will behave as if they were a part of the website itself.

The console allows also you to run any console.* command you might be familiar with from when writing sourece code for your project, for example

  • console.clear()
  • console.log()
  • console.error()
  • console.warn()
  • console.dir()
  • …and so on.

Elements

This part of the Chrome DevTools allows you to overview the code the website is built upon. You can traverse DOM elements and their attributes,

DOM

This will probably be the most used section when working with DevTools. You can really see the DOM structure, see every element attribute, add custom element attributes, modify their values, add custom HTML code, delete elements from the website, see how the document is structured, see or something is missing.

CSS

The second most used feature of Chrome DevTools will be this “styling section”.

You can get real precise information about the styles applied to any particular element, you will get every single of piece of style applied to an element, you will see, if any of the properties has been overridden and if so, where the override resides.

In this section you will get outstanding tools to even prototype your website, because Google Chromw browser offers you

  • a color picker with every color fourbar out there (hex/a, rgb/a, hsl/a)
  • a color picker with magnyfing class, so if there is a 1x1px dot on your website, you can go for this tool and pick a color of that single pixel
  • then you’ve been offered css property suggestion when altering element styles, you are even offered experimental or deprecated attributes, like for example
    • -webkit-appearance
    • -webkit-overflow-scrolling
    • and so on…
  • you can alter timing functions of your transitions with really cool curve updater

JS

This will probably one of the least used features of the whole suite. Google Chrome DevTools allows you to oversee every single javascript event attached to any element you choose, so for example, if you’ve got a <form /> element on your website and you’ve decided to handle the submission via javascript, you can see the place, from which the event was attached.

The real confusion starts with when you’ve attached events globally to document, and because of that they will be propagated through the document and because of that, every single element will get a record of that event and it will really start to pile up.

Also, if you’ve ever found this section useful, don’t hesitate to let me know in the comment section below,

Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.

It is a standalone tool, that got its place directly in the Chrome browser, you can find more information on the product page.

Memory

This tab is here to give you some hints about how heavy is your website to users.

You can find more detailed information on the Google Chrome Developers portal.

Network

One of the beauties of Chrome DevTools is this one. A tab Network allows you to oversee all of the communication that your browsers makes with your website, as well as all of the communication the website does on its own.

You can track every single http/websocket request that has been done during the page load as well as every consequent request that website does.

It allows you to filter the request either by a keyword/regex expression, so for example if a website makes a bunch of various http requests and you want to find those belonging to google-analytics, you will just type google-analytics into the search field and it will automatically filter them.

By default the requests are ordered by time as they happen, but you can change the order based on the type of the request (either css file, js script, html page…etc) , sort them based on the size of the request – and by doing so you can unveil resources with really big file size and eliminate them (either minify, compress…etc)

You can also see every single http header that was being sent from the browser and also sent from the server, so for example if you’re working with an API and the server returns an error 503, you can take a look at the response headers and notice Retry-After header – which accompanies most of the 503 errors.

Or if you’re making an AJAX call, either with Fetch API or XMLHttpRequest and the request has been blocked by CORS, you can have a look at the http requests made by your browser, and see, if the endpoint is returning correct Access-Control-Allow-Origin headers.

Performance

If you’re an experienced developer, you will want to check this out. You can grab “a period of interaction” with your website and check out, how much of CPU or RAM it took, how many frames per second browser rendered and similar stuff. Check out Google Chrome Developer Portal for more information.

Security

Google Chrome DevTools comes with this helpful feature, that allows you to take a look at the SSL certificates used by the website bring shown. You can see every single detail about the certification, for example its issuer, validity, cipher and much more.

Check out Google Chrome Developer portal for more information.

Sources

Sources tab is also a featured you don’t want to miss. Using this panel Chrome allows you to look up every single resource used on the website, for example scripts, styles, images and so on.

As far as styles and scripts go, doesn’t matter if the resource is being minified, Google Chrome will it unminify for you 🙂 .

One more really interesting feature is you can directly edit styles and scripts that are loaded and it will update the website real-time. It is an alternative for Elements -> Styles section of the DevTools panel.

Wrap up

Google Chrome DevTools is really the single most used tool in my repertoire as a web developer. The only thing I miss is making arbitrary http request, for which I need to use Postman, which you may already know.

With the speed of the development of new features that get added almost every month, it is possible Google Chrome engineering team will decided to implement this or maybe entirely different useful feature.

What are your thoughts? Have you been using Chrome DevTools and have a hack or a interesting point of view?

Don’t be shy to share it! 😉

Yours in coding,

Ivan