Introduction:
• JavaScript is one of the most important programming languages used
in web development. While writing JavaScript programs, developers
often face errors called [Link] bugs may:
• Stop the program
• Produce wrong output
• The process of finding and fixing these errors is called debugging.
• JavaScript debugging is:
The process of identifying and removing errors from
JavaScript code using debugging techniques and tools.
Browser Debugging Tools:
JavaScript mainly runs in web browsers such as Chrome, Firefox, Edge, and
Safari
Every browser provides built-in developer tools (debugger) for JavaScript.
These tools help developers:
• Find and fix errors
• Run code step by step
• Set breakpoints
Examples:
Chrome → Chrome DevTools
Firefox → Firefox Developer Tools
Edge →Edge DevTools
What is Firebug?
•Firebug was a popular web development tool used in
the Firefox browser.
•It helped developers inspect, edit, and debug HTML, CSS,
and JavaScript directly in the browser.
•It provided a console and debugging panel to test JavaScript code
in real time.
Features of Firebug for JavaScript Debugging
1. JavaScript Console
Shows errors, warnings, and output of code.
• Example:
[Link]("Hello World");
Output appears in console: Hello World.
2. Script Panel (Debugger)
Lets you open JavaScript files and debug them line by line.
• Example:
let a = 10;
let b = 5;
let sum = a + b;
[Link](sum);
You can pause execution and check values of a, b, and sum.
3. Breakpoints
A breakpoint is a debugging feature used to pause the execution of a program at a specific
line of code.
Helps find logic errors
Enables step-by-step execution
• Example:
let x = 20; // breakpoint here
let y = 30;
let z = x + y;
Code pauses at breakpoint to inspect values.
4. DOM Inspector (HTML Panel)
View HTML structure of page
Modify elements live
Check element IDs and classes
• Example:
Change <h1> text without editing file
6. CSS Editing Panel
• Edit styles in real time
Test colors, spacing, layouts
Instant visual feedback
• Example:
Change background color live
7. Error Tracking
•Shows errors with line numbers.
Example:
[Link](name);
If name is not defined → error shown in console.
8. Step-by-Step Execution:
Firebug provides controls to move through code:
•Step Over (F10)→ Executes current line and moves to next
•Step Into (F11)→ Goes inside function calls
•Step Out (Shift +F11)→ Exits the current function
•Continue (F8)→ Runs code normally until next breakpoint
•function sum(a, b) {
let result = a + b;
return result;
}
let output = sum(5, 10);
[Link](output);
Debugging Process:
[Link] set at function call
[Link] Into → enters sum() function
[Link] Over → executes result = a + b
[Link] Out → exits function after return
[Link] → runs remaining code
Firebug Status: Discontinued and Replaced
• Firebug is no longer in use as a debugging tool. It was
officially discontinued in 2017 and is no longer supported or
updated.
• Its features have been fully replaced by the modern Firefox
Developer Tools, which are built directly into the Firefox
browser. These tools provide more advanced and efficient
debugging features for JavaScript and web development.
Setting up debug environment:
Example:
Debugging Procedure in Firebug
1. Open the Page
•Run your HTML file in Firefox browser
•Open Firebug / Developer Tools (F12)
2. Go to Script Panel
Open the Script tab (where JavaScript code is shown)
3. Set Breakpoint
Set breakpoint on this line:
let sum = a + b;
This is important because it is the calculation step
4. Start Debugging (Reload Page)
•Refresh the page
•Execution will pause at breakpoint
5. Step-by-Step Execution
Step over , Continue etc.
6. Output
Sum is: 15
