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:
- Available panels
- 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.
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.
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.
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
- …and so on.
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,
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.
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
- and so on…
- you can alter timing functions of your transitions with really cool curve updater
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 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.
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.
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
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.
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 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.
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,