As a web developer, I couldn't imagine working on frontend features without having the browser developer tools.

Having said that, this article is a walkthrough at the most common use-cases of how I utilize dev tools in my day to day tasks.

More specifically, according to the title, I'll talk about features that are provided by the developer tools of Google Chrome, since this is the browser I use during development for the last few years.

However, most of these features can be found more or less in other modern browsers too, such as Firefox and Safari.

Usually, the dev tools window can be accessed by pressing Option + Cmd + I on Mac or with F12 on a Windows/Linux machine.

Network Tab

This is where the magic happens. Application data is retrieved from and sent to the server and they can be monitored in this view.

There are several useful things under this tab. Typically, it looks like this:

1. Filtering Requests

By clicking the filter icon, various controls become visible. The ones I use most are the Filter textbox and the Filter by request type buttons.

Both of them are pretty self-explained about how they work. Although, the latter one, where filter requests can be filtered by their type, offers a nice feature that I recently discovered. It is possible to combine various types by holding down Cmd + Click, or Ctrl + Click.

On the footer of Network Tab, the region that is highlighted with a red rectangle on the above screenshot, is another useful indicator. It displays what is the number of the filtered requests compared to the total requests that took place on the page as well as what is the size of the resources loaded by these requests compared to the total amount.

I find myself filtering requests quite often. One case would be when I want to focus only on the XHR requests and see their request headers and their response data. Another scenario comes in mind when I want to view only JS, CSS, Img, Font requests combined and check the network traffic during the page load.

Based on these statistics, pain points can be identified and decisions can be made about performance improvements.

2. Disable Cache

This is another handy feature within the network tab and does exactly what one would expect. When this option is enabled, it forces the browser to skip its cache and retrieve everything over the network.

This is useful to monitor a web page's initial load time and play the scenario where someone lands on it for the first time. It is also useful sometimes if enabled during development when a JavaScript file changes frequently but the browser keeps providing a cached version of it.

3. Throttling

Another great one here. This option is by default set to Online, which means that it is by default disabled and there is no throttling on the network requests. I use this feature either to simulate different network speeds or even pretend that I am offline.

One of the most common use-cases, why I would simulate different network statuses, is that I set throttling to Offline option to ensure that the application won't break into pieces and that the error handling feature works like a charm and finally notifies the user with a friendly message that something went wrong.

On the other side, by setting throttling to one of the predefined presets, i.e Slow 3G, I can ensure that there are no race condition problems. Image an autocomplete which retrieves suggestions from the server over a slow network. While the user is typing a search term, certain requests get fired, but due to the aforementioned throttling, no one can assure that they will also return in the same order. Interesting side-effects can happen here. Thus, this is an easy way to test whether this functionality works as expected.

4. HAR Import/Export

HAR stands for HTTP Archive, and it is a file format used by several HTTP session tools to export the captured data. Its format is a JSON object.

In dev tools, I mostly use the export functionality along with a free online HTTP Archive Viewer. Usually, I would do that to compare various states of a web page and compare how load times get affected version by version.

It has also occurred as a debugging use-case, to tell someone to export the HAR file from the dev tools and send it over to me so that I can check what did go wrong with the network requests on that session.

Device Emulator

The lifesaver feature for those developers who deal with responsive user interfaces.

It does a great job in emulating smaller screens, touch-based devices as well as their behavior. This is the place where I can verify that my media queries work as expected and how my application would look like on a portable device. This feature can be accessed from within dev tools at the top left side of the window as displayed here:

Nevertheless, this is not only for testing portable device resolutions. Recently, I started using this emulator for larger screens too.

It was when I wanted to test how would the layout of the page adapt on a 1920px wide screen but I was working on a 13" laptop with lower screen resolution.

I achieved that because there is an option to add a custom device profile by setting various parameters like desired screen resolution, whether it should be touched-based or not, and even, optionally, provide a specific user-agent string.

So, I created this profile for the larger screen resolution, and the emulator automatically set the zoom level to fit the content within the given virtual resolution.

Sensors

This is another amazing option provided by the developer tools. Device sensors can be mocked. To do that, follow the steps:

Not much to say here. From that page, Orientation, Touch, and the one I use most, Geolocation sensors can be mocked.

As the name implies, by mocking Geolocation, I can pretend that I am accessing the web page from whatever latitude and longitude I want per case. This is useful when working on features that use navigator.geolocation API without having to connect to any VPN service to simulate the current geolocation position.

Lighthouse

Lighthouse is a Google Chrome open-source software, an automated tool for improving the quality of web pages. It has audits for performance, best practices, SEO, and more.

So, Chrome comes with Lighthouse pre-installed and can be found under the Audits tab. It runs reports on given page URLs and provides a report that looks like this:

I have to say that while creating my blog I generated several lighthouse reports, especially for performance and SEO audits. In terms of SEO, I admit that it helped me understand a lot since I wasn't familiar with it before.

Elements Tab

Last but not least, probably the feature I use most on dev tools. Also known as Inspector and can be accessed easily by pressing Cmd + Shift + C on Mac or use Ctrl + Shift + C on Windows/Linux, and then select any highlighted element on the page.

This is my playground when I want to work with runtime DOM or edit CSS styles and classes to see the results live on the page before coding them in my IDE.

This is how it looks like:

1. Element Classes

As displayed above, by clicking the .cls option, a textbox appears along with a list of checkboxes. One checkbox displayed for each CSS class applied to the selected element on the left panel. Already applied classes can easily be toggled by the corresponding checkbox.

On the other hand, new classes may be applied using the Add new class textbox. This textbox behaves like an autocomplete as it searches through already defined CSS classes while the user is typing a class name. Simple as that.

2. Element States

On the left side of the .cls option, the :hov one is located. As one would imagine, when clicked, it expands a region with several predefined pseudo-classes that can be applied to the selected element on the left.

I am using it a lot, mostly when I want to simulate hover or focus states of an element and see whether desired styles are applied.

3. DOM Node Index == $0

Let's be honest. I rarely use it, but I thought it would be useful to be mentioned here as it is kind of a hidden feature in dev tools.

What it basically does, is that Chrome provides a JavaScript global $0 variable and assigns the value of the DOM node that gets selected on the left panel of the previous screenshot.

Consider it as an alternative of document.getElementById('app') or document.getElementsByClassName('article')[0].

Then it is accessible on dev tools Console window like this:

$0.innerHTML = "Where is my content ?"

I find my self using it when I want to attach an event listener to an element from the dev tools Console and avoid writing a document selector as described above.

Finale

There are tons of other useful features in dev tools but I can't list all of them in this post.

There are other great features as well, such as the Sources Tab that offers JavaScript debugging with breakpoints or Application Tab which provides visual access to application caching, local and session storages, and many many more.

This article aims to focus on these tools that apply most to my daily routine.

Disclaimer: There are also other great developer tools out there in other modern browsers too, but since this is a productivity tool exactly like an IDE or a terminal, I have chosen Chrome as it works best for my needs.

Happy coding and don't forget to test your application in other browsers too !