Overview of the Browser DevTools
FULL-STACK WEB DEVELOPMENT BOOTCAMP
2024 COHORT SIGNUPS END TOMORROW
The Browser DevTools are a fundamental element in the frontend developer toolbox, and they are available in all modern browsers. Discover the basics of what they can do for you
- The Browser DevTools
- HTML Structure and CSS
- The Console
- The emulator
- The network panel
- Application and Storage
- Security tab
The Browser DevTools
I don’t think there was a time where websites and web applications were easy to build, as for backend technologies, but client-side development was surely easier than now, generally speaking.
Once you figured out the differences between Internet Explored and Netscape Navigator, and avoided the proprietary tags and technology, all you had to use was HTML and later CSS.
Although lots of web pages are still plain HTML + CSS, like this page, many other websites are real applications that run in the browser.
Just providing the source of the page, like browser did once upon a time, was not enough.
Browser had to provide much more information on how they rendered the page, and what the page is currently doing, hence they introduced a feature for developers: their developer tools.
Every browser is different and so their dev tools are slightly different. At the time of writing my favorite developer tools are provided by Chrome, and this is the browser we’ll talk here, although also Firefox and Edge have great tools as well.
HTML Structure and CSS
The most basic form of usage, and a very common one, is inspecting the content of a webpage. When you open the DevTools that’s the panel the Elements panel is what you see:
The HTML panel
On the left, the HTML that composes the page.
Hovering the elements in the HTML panel highlights the element in the page, and clicking the first icon in the toolbar allows you to click an element in the page, and analyze it in the inspector.
You can drag and drop elements in the inspector to live change their positioning in the page.
The CSS styles panel
On the right, the CSS styles that are applied to the currently selected element.
In addition to editing and disabling properties, you can add a new CSS property, with any target you want, by clicking the
Also you can trigger a state for the selected element, so you can see the styles applied when it’s active, hovered, on focus.
At the bottom, the box model of the selected element helps you figure out margins, paddings, border and dimensions at a quick glance:
The second most important element of the DevTools is the Console.
The Console can be seen on its own panel, or by pressing
Esc in the Elements panel, it will show up in the bottom.
The special identifier
$0 allows you to reference the element currently selected in the elements inspector. If you want to reference that as a jQuery selector, use
You can write more than one line with
shift-enter. Pressing enter at the end of the script runs it.
For example failing to load a resource from the network, with information on why, is reported in the console.
In this case, clicking the resource URL brings you to the Network panel, showing more info which you can use to determine the cause of the problem.
You can filter those messages by level (Error / Warning / Info) and also filter them by content.
console.log('Some info message')
console.warn('Some warning message')
console.error('Some error message')
The Chrome DevTools embed a very useful device emulator which you can use to visualize your page in every device size you want.
You can choose from the presets the most popular mobile devices, including iPhones, iPads, Android devices and much more, or specify the pixel dimensions yourself, and the screen definition (1x, 2x retina, 3x retina HD).
In the same panel you can setup network throttling for that specific Chrome tab, to emulate a low speed connection and see how the page loads, and the “show media queries” option shows you how media queries modify the CSS of the page.
The network panel
The Network Panel of the DevTools allows you to see all the connections that the browser must process while rendering a page.
At a quick glance the page shows:
- a toolbar where you can setup some options and filters
- a loading graph of the page as a whole
- every single request, with HTTP method, response code, size and other details
- a footer with the summary of the total requests, the total size of the page and some timing indications.
A very useful option in the toolbar is preserve log. By enabling it, you can move to another page, and the logs will not be cleared.
Another very useful tool to track loading time is disable cache. This can be enabled globally in the DevTools settings as well, to always disable cache when DevTools is open.
Clicking a specific request in the list shows up the detail panel, with HTTP Headers report:
And the loading time breakdown:
This is a full-featured debugger. You can set breakpoints, watch variables, and listen to DOM changes or break on specific XHR (AJAX) network requests, or event listeners.
Application and Storage
The Application tab gives you lots of information about which information is stored inside the browser relative to your website.
You gain access to detailed reports and tools to interact with the application storage:
and you can quickly wipe any information, to start with a clean slate.
This tab also gives you tools to inspect and debug Progressive Web Apps.
Click manifest to get information about the web app manifest, used to allow mobile users to add the app to their home, and simulate the “add to homescreen” events.
Service workers let you inspect your application service workers. If you don’t know what service workers are, in short they are a fundamental technology that powers modern web apps, to provide features like notification, capability to run offline and synchronize across devices.
The Security tab gives you all the information that the browser has relatively to the security of the connection to the website.
If there is any problem with the HTTPS connection, if the site is served over TLS, it will provide you more information about what’s causing it.
The Audits tab will help you find and solve some issues relative to performance and in general the quality of the experience that users have when accessing your website.
You can perform various kinds of audits depending on the kind of website:
The audit is provided by Lighthouse, an open source automated website quality check tool. It takes a while to run, then it provides you a very nice report with key actions to check.
If you want to know more about the Chrome DevTools, check out this Chrome DevTools Tips list 😀