Chrome Developer Tools Tutorial – 8 steps guide (2024)

Do you need an introduction to Chrome Developer Tools?

Every web developer should know this powerful toolset inside out, because good development is only possible with an in-depth analysis of websites!

Let’s start…

What are the Browser Developer Tools?

The Developer Tools are a collection of different website tools that help with the development of websites, web apps and PWAs.

Every major browser has some form of developer tools built in. There are differences between the Firefox and Chrome Dev Tools, but these are hidden in the details or usage.

Where can I find them?

Launch your Chrome, Ungoogled Chromium, Edge, Brave and any other Chromium-based browser.

Go to a web page and then press F12 or right-click – Inspect. The Dev Tools appear as a side menu or as a bottom menu. The Developer Tools consist of different components, which you usually use separately from each other.

What can I do with Chrome DevTools?

The Dev Tools allow you to change, add or delete (almost) everything on the website. You can throttle, prevent and modify transfers. The tools allow you to have a look at the storage (cookies, local storage and more), as well as analyse the website speed in detail.

Why do I need this?

A good-looking website is by no means a high-performance, reliable and secure application. Many small details in the background must be coordinated so that the user does not notice any jerks or inconsistencies.

The most important components

Check mobile view – device frames

Your website must work like a chameleon.

They adapt to their environment.

The structure is different on a smartphone than on a 27-inch monitor or a 7-inch tablet. Browsers present content in different ways depending on the operating system (Android, Windows, iOS, macOS).

You should therefore test a range of devices with the “Device Frames”. Watch out! The simulation is not as good as a real test. The final test should always take place on an original device.

Operating with JavaScript – Console

The browser is not just a display programme, but can also breathe life into the elements with JavaScript. You will find the JavaScript console in the 2nd tab. Errors, information and problems appear here. If you see a lot of red here, the developer has not done a good job. You can filter the messages (to the right of the white bar) and search them (centre bar).

Change elements in real time – Elements

The Elements tab shows the HTML and CSS behind the website. You can select and edit elements there. You can see how the content, colours and shapes change in real time. This is an absolute must for the designer. You can switch CSS styles on and off with a tick. Here you can also see calculated, implicit stylesheets, event listeners and XML properties.

The online file browser – Sources

This area is of interest to you if you are debugging with Chrome / Firefox. With other programmes, you can set breakpoints directly in the IDE to monitor variables. This is more difficult in web development. The execution environment of a JavaScript / TypeScript app is not your IDE, but the browser. Extensions for VSCode / VSCodium help you with debugging between programmes.

In this view you can see all files in compiled form like in a file browser, as well as all active, different breakpoints.

Check transmissions – Network

Websites today consist of more than just a single HTML file. The browser loads images, content, videos, script files and styles after the basic structure. A lot can go wrong and various errors can occur.

The Network tab helps you with troubleshooting. Each connection shows an HTTP (error) code and all HTTP headers. You can take a closer look at the “raw responses” under the “Response” sub-tab.

Check certificates – Security

Security has priority over new functions!

The Security tab shows you whether encryption (HTTPs) is active. A secure website needs a valid certificate from a recognised certificate authority. In addition, individual images and scripts from other domains may have other certificates. This tab gives you a full overview of the topic of secure transmission.

Check offline functionality – Application

New web applications, the progressive web apps, make it possible to use a website without the Internet.

Many functionalities can be displayed with downloaded content. An online calculator app or spreadsheet does not require permanent backend communication. Content can be stored in various offline storage locations on the client. You can view these in the Application tab:

• IndexDB as a key-value type database
• Cookies as small text files
• Permanent raw memory (File System API)
• Local memory up to 5 MB
• Session memory up to 5 MB

You can view, manipulate or delete all of these in the Application tab. Progressive web apps live from a local storage. Offline websites use these resources for caching.

Fast, faster, Lighthouse

Website speed is an important ranking factor for search engines. Furthermore, you lose new customers with every second of additional loading time because some are (very) impatient. If the competitor’s shop loads faster, the new customer tends to shop there.

The Lighthouse tool helps you to optimise speed. Caching, parallelisation and simplification help you to reduce the loading time. Lighthouse evaluates the speed and provides “optimisation tips”. A score above 80 (better 95) is desirable because time is money.

What can I do to improve my score?

• Use Gzip or Brotli compression:
  Instead of transferring the data in full raw format, you should send it “zipped” from your server. Less gross data has to flow over the line.
• Adapt images:
  The browser does not need to load a 16 megapixel image as a preview image. Reduce the size and use (lossless) compression. New formats such as WebP give you even more extra speed.
• Optimise slow tables:
  Old database installations can become cluttered over the years, so a fresh new installation will give you a performance advantage. The cache files from 5 years ago are no longer needed, nor is old “recycle bin” data.
• Minimalisation everywhere:
  Go through your website and consider whether you still need individual components. The plugin that you tested 3 years ago should be uninstalled. Function X, which has been in development for 4 years, needs a fresh start anyway. Remove it. Make sure to display functions with one / a few tools if possible and avoid overlapping functions, e.g. 3 different graphical website editors.
• Activate HTTP 2 or HTTP 3:
  The HTTP update enables many small files to be transferred compactly in one go.