Firebug was a popular extension for Firefox that helped developers inspect and debug HTML, CSS, and JavaScript on web pages. However, Firebug has not been available since 2017, and its functionalities have been integrated into the built-in Firefox Developer Tools. Here is a guide to using these modern tools.
1. Open Developer Tools
Keyboard shortcut: Press F12 or Ctrl+Shift+I (Cmd+Opt+I on Mac).
Via the menu:
Click the hamburger menu (the three lines in the top right).
Go to More Tools and select Web Developer Tools.
2. Overview of the Developer Tools
The Developer Tools consist of several tabs:
Inspector
What does it do?: Helps inspect and modify HTML and CSS.
Usage:
Hover the mouse over elements on the web page to see the corresponding code.
Right-click an element and choose Inspect Element to go directly to the code.
You can make live changes to HTML and CSS and see the effects immediately.
Console
What does it do?: Displays error messages, warnings, and console.log() output from JavaScript.
Usage:
Use JavaScript commands directly in the console.
View error messages to resolve script issues.
Debugger
What does it do?: Helps debug JavaScript code.
Usage:
Set breakpoints to go through the code step by step.
View variable values at runtime.
Network
What does it do?: Displays all network requests such as API calls, images, and scripts.
Use:
Analyze resource load times.
View detailed information about each request, such as headers and responses.
Performance
What does it do?: Measures the performance of a web page, such as load times and rendering.
Use:
Start and stop recording to analyze where delays occur.
View graphs of CPU usage and frames per second.
Storage
What does it do?: Provides insight into local storage such as cookies, localStorage, and sessionStorage.
Use:
View and modify stored values.
Useful for debugging login sessions or user settings.
3. Handy Tips and Tricks
Quick Inspection: Right-click a page element and choose Inspect Element to instantly view the HTML and CSS.
Live Editing: You can adjust CSS properties and see the effect immediately without reloading the page.
Console shorthand: Use $0, $1, etc., to refer to the last selected elements in the Inspector.
Test Mobile View: Click the Responsive Design Mode icon (phone and tablet icon) to test the website for different screen sizes.
