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

Image for post
Image for post
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.

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.

Image for post
Image for post
“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.

Image for post
Image for post
“Console” Panel demonstration
Image for post
Image for post
“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.

Image for post
Image for post
“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:

Image for post
Image for post
“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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
“Application” Panel Demonstration

9.Security

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

Image for post
Image for post
“Security” Panel demonstration

10.Audits

Brief analyze and report about your web application.

Image for post
Image for post
“Audits” Panel demonstration

Sources:

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store