Search Knowledge Base Articles

How to Use Browser Developer Tools (Chrome/Firefox)

Key Tools for Debugging

1. Console Tab: Check JavaScript Errors

Steps:

  1. Open DevTools:
    • Windows: F12 or Ctrl + Shift + I
    • Mac: Cmd + Option + I
  2. Go to the Console tab to view errors/warnings.

2. Network Tab: Analyze Load Times

Steps:

  1. Open the Network tab in DevTools.
  2. Reload the page to see all network requests.
  3. Look for:
    • Red entries (failed requests).
    • Large files (e.g., uncompressed images).

3. Elements Tab: Inspect HTML/CSS

Steps:

  1. Right-click any page element → Inspect.
  2. Edit HTML/CSS live to test fixes (changes are temporary).

4. Sources Tab: Debug JavaScript

Steps:

  1. Open the Sources tab.
  2. Select a JavaScript file.
  3. Click line numbers to set breakpoints (pause code execution).

5. Performance Tab: Analyze Page Speed

Steps:

  1. Open the Performance tab.
  2. Click Record → interact with the page → stop recording.
  3. Analyze metrics like FCP (First Contentful Paint) and LCP (Largest Contentful Paint).

Pro Tips

  • Use debugger; in JavaScript to pause execution.
  • Test mobile responsiveness with Device Emulation (toggle device icon).
  • Use React Developer Tools for React apps.
Note: Shortcuts like Ctrl + Shift + C (Windows) or Cmd + Shift + C (Mac) open the Elements tab directly.

Did you find this article useful?


Related Articles