Browser dev tools tutorial

In this guide, we’ll walk through how to use the built-in Developer Tools (F12) in Chrome, Edge, and Firefox to inspect code, debug issues, and fix CSS styling problems.

Table of Contents:

  1. Accessing Developer Tools
  2. Inspecting Elements (HTML/CSS)
  3. Debugging JavaScript
  4. Fixing CSS Issues
  5. Mobile Emulation
  6. Debugging Network Issues

Please note all screenshots taken for this tutorial were made on Chrome browser, other devtools like Microsoft Edge, Firefox or Safari should have similar names and locations.

1. Accessing Developer Tools

All major browsers have similar developer tools that can be accessed with a single keystroke:

  • Chrome: Press F12 or Ctrl + Shift + I
  • Edge: Press F12 or Ctrl + Shift + I
  • Firefox: Press F12 or Ctrl + Shift + I

Note: The first time, a popup may appear asking you to open the DevTools. You can check ‘Remember this decision’ and select ‘Open tools’ to proceed.

Browser Dev tools open for first time

Once opened, you’ll see a panel usually docked at the bottom or right of your browser window. This panel includes multiple tabs like Elements, Console, Sources, and Network.

2. Inspecting Elements (HTML/CSS)

One of the core features of DevTools is the ability to inspect the structure of a webpage. This is especially useful when debugging layout or styling issues.

Steps to Inspect an Element:

  1. Right-click on any element on a webpage and choose Inspect.
  2. The Elements tab will open, highlighting the selected element’s HTML and CSS.
  3. In the Styles panel on the right (or bottom), you’ll see all CSS rules applied to the element. You can toggle, add, or modify these rules in real time.
Show an HTML element selected in DevTools, with corresponding CSS in the Styles panel.

Pro Tip:

You can hover over elements in the HTML tree, and DevTools will highlight them in the browser view, showing their exact size, margin, and padding.

3. Debugging JavaScript

DevTools also provide powerful debugging tools for JavaScript code. This helps in tracking down errors, setting breakpoints, and stepping through code.

Steps to Debug JavaScript:

  1. Go to the Sources tab.
  2. Find the JavaScript file you want to debug in the left panel.
  3. Set breakpoints by clicking on the line number where you want the code to pause. Refresh your page (F5) to trigger the content in the JS.
  4. When the code execution reaches this line, it will stop, allowing you to inspect variables and step through the code.
  5. Remember to remove your breakpoints once the debugging is done, otherwise the page will be stopping on every refresh or load.
How to set a breakpoint in the Sources tab in Chrome

Console for Debugging:

The Console tab is useful for logging messages, errors, and testing small code snippets.

  • Use console.log() to print variables or messages in the Console tab.
  • View any errors or warnings in the Console as well.

4. Fixing CSS Issues

If a webpage isn’t displaying correctly, CSS is often the culprit. With DevTools, you can quickly identify and correct styling problems.

Steps to Fix CSS Issues:

  1. Open the Elements tab and select the problem element.
  2. In the Styles pane, inspect the applied CSS rules.
  3. You can:
    • Edit values directly (e.g., change color from red to blue).
    • Disable rules by unchecking the box next to the property.
    • Add new styles using the + button in the Styles pane.

Pro Tip:

Use the Computed tab (next to Styles) to see the final calculated values for properties like margin, padding, width, and height.

CSS changes being made live in the Styles panel

5. Mobile Emulation

Testing how your website looks and functions on mobile devices is critical. Nowadays, there are developing technics that prioritize mobile view developing vs screen developing, as accessing through the phone is more common than screen device like PC, mac, etc. DevTools provides a built-in mobile emulator that simulates different screen sizes and devices.

Steps for Mobile Emulation:

  1. In the Elements tab, click the Toggle Device Toolbar (a small phone and tablet icon in the top-left corner).
  2. Select a device from the drop-down (e.g., iPhone X, Galaxy S9).
  3. The webpage will resize to simulate the chosen device.
Mobile emulator in action

Pro Tip:

You can also change the orientation (portrait/landscape) by clicking the rotate button in the Device Toolbar.

6. Debugging Network Issues

If you’re facing issues with loading resources, DevTools offers the Network tab, which tracks all network requests made by the page (such as images, scripts, stylesheets, etc.).

Steps to Debug Network Requests:

  1. Open the Network tab.
  2. Reload the page. You’ll see a list of all requests made.
  3. Click on any request to view details like headers, response, and timings.
  4. Look for errors such as 404 (file not found) or 500 (server errors).
Network requests in DevTools, highlighting a 404 error

Pro Tip:

Use filters to narrow down requests (e.g., filter by CSS, JS, Images) to quickly find the resource causing issues.

Conclusion

By mastering the DevTools in Chrome, Edge, and Firefox, you can significantly improve your workflow as a developer, whether you’re debugging JavaScript errors, fixing CSS issues, or testing how your site looks on different devices. Start experimenting with these powerful tools, and soon, you’ll be debugging and tweaking your code like a pro!

Scroll to Top