In and Out of Chrome DevTools — Part 1

8 min read2 days ago

As the popular meme goes:

HTML is the skeleton of the web. CSS is the muscle.
And the browser? Well, it's the caffeine keeping everything alive. 😂☕️

From the V8 engine powering our JavaScript to the dynamic frameworks like React, Angular, and Vue reshaping how we build user interfaces, the browser has become an indispensable tool for developers and users alike. Imagine a world without browsers. It’s unthinkable! Web applications — the backbone of our digital era — are entirely dependent on them.

Among all the browsers, Google Chrome stands out as a game changer. Introduced under Sundar Pichai’s leadership, Chrome has redefined how we interact with the web and how developers craft it. But beyond its speed and features lies a hidden treasure: DevTools.

For developers, DevTools is the unsung hero of the browser. It’s the ultimate debugging companion, helping us fine-tune performance, monitor API calls, analyze page loads, manipulate the DOM, and so much more. To put it simply: DevTools is the frontend developer’s best friend. Master it, and you’ll not only solve problems faster but also stand out as a developer who truly understands the craft.

In this article, I’ll walk you through the core tools of browser DevTools, explaining their functionality and sharing tips on how to use them effectively.

The DevTools Toolbox

Here’s what we’ll cover:

Elements
Console
Sources
Network
Performance
Memory
Application
Security
LightHouse
Recorder

Each of these tools serves a unique purpose, and together, they empower developers to create and optimize applications with confidence. Let’s dive in!

1. Elements: Inspect and Manipulate Your DOM

The Elements panel is where you can see your entire HTML DOM and CSS in action. It’s a real-time editor for your HTML and CSS, allowing you to:

Inspect any element.
Make CSS changes dynamically.
View hover effects and animations.
Edit, add, or delete attributes or nodes.

You can even view and test website accessibility directly in this panel. We can also check margins, padding, or flexbox alignments.

Note : Changes made here are runtime only. A page refresh will reset everything, so ensure you save changes elsewhere if needed.

2. Console: Your JavaScript Playground

The Console is the beating heart of DevTools and often the first stop for developers. It’s a power-packed section where you can:

View all logs, errors, and warnings.
Execute JavaScript code in real time.
Access and manipulate browser APIs like document and window.

What makes the Console truly special is its integration with your application’s runtime. It’s not just for viewing errors; it’s for actively solving them.

Additional features of console

Hide Network : Hides network-related logs (e.g., fetch, XHR requests) from the console output. It Helps reduce clutter when you only want to focus on JavaScript logs or other events and not network requests.
Preserve Log : It retains console logs even after the page reloads.
Selected Context Only : It limits the console logs to only those from the currently selected context (e.g., iframe or worker).
Log XMLHttpRequests : Displays XMLHttpRequest (XHR) and fetch requests in the console. It is useful for tracking API calls and monitoring network requests directly from the console for better debugging.
Eager Evaluations : Forces expressions to be evaluated eagerly when the console command is typed, providing immediate feedback.
Treat Code Evaluation as User Action : Treats code evaluations (e.g., running scripts in the console) as if they were user-initiated actions. It ensures that events triggered by code evaluation are treated as user interactions, which can be important for tracking events or simulating user behavior.
Show CORS Errors in Console : Displays Cross-Origin Resource Sharing (CORS) errors in the console. It helps to identify and debug CORS-related issues that occur when your web application tries to access resources from different origins.

3. Sources: Debug Your Source Code

The Sources panel is a go-to tool for debugging your actual source files. Whether you’re debugging a bug or analyzing the runtime behavior/execution of your code, this section provides everything you need to:

Debug function invocations and inspect their execution flow.
Monitor the runtime values of your variables at any given point.
Track the call stack, event loop, and thread activity.

The Sources panel allows you to:

Set breakpoints: Pause code execution precisely where you need, including DOM-specific and event listener-based breakpoints.
Inspect the scope of variables: See how variable values evolve after each line of execution.
Debug XHR calls and fetch requests: Set breakpoints for network calls and analyze their behavior directly.

One of the most powerful features is that you can see your current execution point and step through your code line by line, watching how it interacts with other parts of your application.

4. Network: Monitoring Client-Server Communication

The Network tab in Chrome DevTools is an invaluable tool for understanding how your client-side application interacts with the server. It offers detailed insights into every network request and response, helping developers identify performance bottlenecks, optimize resource loading, and troubleshoot issues.

Key Features of the Network Tab:

Monitor Resource Downloads: View every asset downloaded by your frontend, including CSS, JS, images, and other resources.
Analyze API Calls: Track API calls made through Fetch, XHR, WebSockets, and manifests.
Inspect Request Details: Analyze request headers, responses, and statuses for each API call.

With these features, you can:

Track resource timing to understand how long each request takes from start to finish.
Debug API calls by editing and resending requests to test different parameters or payloads.
Identify performance bottlenecks and resolve issues like slow API calls or large payloads.
Simulate network conditions using throttling to test how your app behaves under different network speeds (e.g., 3G, 4G, offline).

For example, if an API call is slow, the Network tab helps you pinpoint whether the issue lies in the request itself, server-side processing, or the response, enabling you to optimize either your backend or frontend.

Additional features of network tab :

Group by Frames: Groups network requests by the frames they belong to (e.g., main frame or iframes). This is useful for isolating requests made by different parts of a webpage or embedded content.
Screenshots: A timeline of screenshots alongside network requests lets you correlate visual changes with network activity. This helps identify when certain content becomes visible on the page.
Big Request Rows: Expands request rows to display more detailed information, like the request method, status code, and size, allowing for a quick overview without opening individual entries.
Invert : Reverses the current filter logic. For example, if you are viewing only .js files, selecting Invert will show everything except .js files.
Hide Extension URLs : Hides requests made by browser extensions, such as those with chrome-extension:// URLs. It will help you to eliminate noise from extensions and focus only on requests made by your web page.
Hide Data URLs : Hides requests with data: URLs, commonly used for inline resources (like images or small scripts encoded in base64). It will simplify the request list and focus on external network requests like API calls or scripts.
Blocked Response Cookies : Highlights requests where cookies in the response were blocked (e.g., due to missing attributes like SameSite). It will be helpful when you debug authentication or tracking issues and ensure compliance with security policies.
Blocked Requests : Identifies requests blocked by the browser or extensions, typically due to CORS policies, firewall rules, or ad blockers.
3rd-Party Requests : Displays requests made to third-party domains (e.g., analytics services, CDNs). It is used to identify dependencies on third-party services and their impact on performance.

5. Performance: Fine-Tuning Web Vitals for Optimal UX

The Performance tab is a critical tool for optimizing your application’s speed and responsiveness, especially in the era of Core Web Vitals. This tab allows you to measure and analyze key performance metrics such as:

Largest Contentful Paint (LCP): Time taken to render the largest visible content on the screen.
Cumulative Layout Shift (CLS): The degree of unexpected layout movement during a page’s lifecycle.
Interaction to Next Paint (INP): Measures responsiveness to user interactions.

With the Performance tab, you can:

Record and analyze performance metrics under controlled conditions by simulating different CPU and network throttling levels.
Inspect the timeline of your application’s loading and rendering process.
Use the Garbage Collector to clean up unused memory and evaluate its impact on performance.

This tool provides a comprehensive visualization of how your page loads, where bottlenecks occur, and how various events — such as script execution and paint operations — affect the overall user experience.

Additional features of Performance tab :

Disable JavaScript Samples : Disabling JavaScript stack sampling reduces overhead during performance recordings, allowing you to focus on other aspects like rendering or layout without being bogged down by JavaScript execution details. It’s particularly useful when you’re not troubleshooting JavaScript and want to analyze browser processes more efficiently.
Enable CSS Selectors Stats : This feature tracks the efficiency of CSS selectors, providing insights into how often and how costly each selector matching operation is. By enabling it, you can identify inefficient CSS selectors that may be slowing down rendering.
Enable Advanced Paint Instrumentation : Advanced paint instrumentation provides detailed data about paint events, helping you diagnose rendering issues like unnecessary repaints or expensive painting operations. This feature is ideal when you’re troubleshooting problems like excessive repaints triggered by DOM updates or animations.

It’s interesting to learn about all these, right? Absolutely!

Chrome DevTools is packed with powerful features that can significantly boost productivity, but many of them often remain underutilized. By understanding the hidden gems within DevTools, you can diagnose issues faster, optimize performance more effectively, and streamline development. While we may not use every feature daily, knowing how to leverage them when needed can make a huge difference in the quality and speed of our development process.

Looking forward to diving deeper into DevTools in Part II of the series, where we’ll explore Memory, Application, Security, Lighthouse, and Recorder.