DevTools guide for web developers

Introduction to Chrome DevTools

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. It allows you to inspect and debug your code, optimize performance, and understand how your application is working. To open DevTools, you can right-click on any webpage and select "Inspect" or use the keyboard shortcut Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac).

Key Features of Chrome DevTools

1. Elements Panel

The Elements panel is where you can inspect and modify the HTML and CSS of a webpage. It allows you to see the structure of the webpage and make real-time changes to see how they affect the layout and styling.

Changing an Element's Style

Open the Elements panel.
Select an element by clicking on it in the DOM tree. You can change the text for fun.
In the Styles panel, observe and modify the CSS properties.

You can change the styles and content and see the effect immediately.

2. Console Panel

The Console panel is a powerful tool for debugging JavaScript. You can log messages, run JavaScript on the fly, and see errors and warnings. You can do logs for debugging in your react app and see the logs in the console.

For more information, check out the blog Debugging beyond console.log() in JavaScript.

3. Sources Panel

The Sources panel allows you to view and debug your JavaScript code. It's not very usefull if you are using some framework like React, Angular, or Vue, but it's very useful if you are working with vanilla JavaScript. You can check out React Developer Tools for debugging React applications.

4. Network Panel

The Network panel is essential for understanding network activity and performance. You can see all the network requests made by your webpage, including XHR and Fetch requests, and inspect the details of each request.

Analyzing a Network Request

Open the Network panel.
Reload the page to capture the network requests.
Click on any request to see details such as headers, response, and timing.

Features of the Network Panel

Filters: Use filters to view specific types of requests, such as documents, scripts, stylesheets, images, and XHR. This helps in isolating specific types of network traffic.
Timing: The timing breakdown shows how long each request took, broken down into DNS lookup, connection, request, response, and download phases. This can help identify bottlenecks.
Initiator: See what caused a request to be made (e.g., a script or an HTML element).
Throttling: Simulate slower network conditions to test how your application performs on various network speeds (e.g., 3G, 4G).
Preserve Log: Keep network logs after a page reload, which is useful for debugging issues that occur during page navigation.

5. Performance Panel

The Performance panel helps you analyze your webpage's runtime performance. You can record performance profiles to identify bottlenecks and optimize your code.

Recording a Performance Profile

Open the Performance panel.
Click the "Record" button and perform the actions you want to analyze.
Click "Stop" to finish recording.

The Performance panel will show you a detailed breakdown of the recorded activities, including scripting, rendering, and painting.

Features of the Performance Panel

Flame Chart: The flame chart shows a visual representation of the call stack over time. The wider the bar, the longer it took. This helps in identifying performance bottlenecks.
Summary: The summary provides an overview of the main categories of activities (e.g., scripting, rendering, painting) and their respective times.
FPS Chart: Frames per second (FPS) chart shows how smoothly your page is running. Lower FPS can indicate performance issues.
Heaviest Stack: Identifies the call stack that took the most time, helping you pinpoint the most significant performance issues.
Memory Usage: Monitor memory usage to detect potential memory leaks or excessive memory consumption.

6. Application Panel

The Application panel gives you insight into your webpage's storage. You can inspect cookies, local storage, session storage, and IndexedDB.

Viewing Cookies

Open the Application panel.
Expand the "Cookies" section.
Select your domain to see all the cookies stored for that webpage.

7. Security Panel

The Security panel provides information about the security of your webpage. It shows you the security state of your connection, including HTTPS and certificate details.

Inspecting the Security State

Open the Security panel.
Look at the summary to see if the connection is secure.
Click on the details to inspect the certificate.

Extending Chrome DevTools with Extensions

Chrome DevTools can be further enhanced with extensions that provide additional functionality. Here are some popular extensions that can be added to your DevTools toolkit:

1. React Developer Tools

If you're working with React, the React Developer Tools extension is a must-have. It allows you to inspect React component hierarchies, view props and state, and understand the structure of your React applications.

Inspecting React Components

Install the React Developer Tools extension.
Open DevTools and navigate to the "Components" tab.
Select a component to view its props, state, and context.

Note: It won't work if you are using a production build of React. You can use the development build to make it work.

2. Redux DevTools

Redux DevTools provides powerful tools for inspecting and debugging Redux state changes. You can view the state tree, action history, and time-travel through state changes.

Viewing Redux State

Install the Redux DevTools extension.
Open DevTools and navigate to the "Redux" tab.
Explore the state tree and action history.

3. React Profiler

The React Profiler extension helps you analyze the performance of your React applications. You can record and visualize the rendering behavior of your components to identify performance bottlenecks.

Example: Profiling React Components

Make sure React Developer Tools is installed.

Open DevTools and navigate to the "Profiler" tab.
Click the "Record" button to start profiling.
Interact with your React application to trigger re-renders.
Click the "Stop" button to end the recording session.

For more information, check out the blog Optimize React Components with the React Profiler.

Note: React Profiler can be only used in development mode.

4. Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. It provides audits for performance, accessibility, SEO, and more.

Example: Running a Lighthouse Audit

Open DevTools and navigate to the "Lighthouse" tab.
Click "Generate report" to run an audit.
Review the audit results and follow the recommendations to improve your webpage.

Some more tips

Use Keyboard Shortcuts: Learn and use keyboard shortcuts to speed up your workflow. For example, Ctrl+Shift+J (Windows/Linux) or Cmd+Option+J (Mac) to open the Console panel directly.
Leverage Workspaces: Workspaces allow you to save changes made in DevTools directly to your local files. Set up a workspace to streamline your development process.
Use Device Mode for Responsive Design: Test your webpage on different screen sizes and resolutions using the Device Mode in the Elements panel.
Throttle Network Conditions: Simulate different network speeds to test how your webpage performs under various conditions. This can help you optimize for slower connections.

Conclusion

By now, you should be equipped with the knowledge to inspect, debug, and optimize your web applications like a pro. Whether you're tweaking CSS on the fly, profiling JavaScript performance, or diving into network requests, Chrome DevTools has got your back. Remember to explore the various panels, experiment with different features, and stay curious about how you can improve your development workflow. For more detailed information and tutorials, be sure to check out the official Chrome DevTools documentation.