• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Tips and Tricks HQ

  • Home
  • Projects
    • All Projects
    • Simple WP Shopping Cart
    • WP Express Checkout Plugin
    • Accept Stripe Payments
    • WP Download Monitor
    • Easy HTTPS Redirection
    • WP Security and Firewall Plugin
    • WP eStore Plugin
    • WP Affiliate Platform
    • WP eMember
  • Products
    • All Products
    • Checkout
  • Support
    • Support Portal
    • Customer Only Forum
    • WP eStore Documentation
    • WP Affiliate Software Documentation
    • WP eMember Documentation
  • Contact

Debugging JavaScript Code with Firebug

Home » Blog » Debugging JavaScript Code with Firebug

Last updated: February 28, 2018





Firebug has become an indispensable tool for doing front-end development of web applications. However, most developers are unaware of some very useful features of this tool, especially when it comes to debugging JavaScript code. I’ve personally seen many of my colleagues relying on alert() function to reveal the flow of execution of their complex codes. In this article we’ll look into some ways that Firebug can help you debug JavaScript and boost your productivity.

software-debug

Breakpoints

Setting a breakpoint on a line enables you to pause/resume execution of code at your will. When you put a breakpoint on a line, say line 10, the program pauses execution when it reaches line 10. Let’s see how we can do that:

Turn Firebug on and enable Console and Script views. Then visit ajaxify.com. In the Script view, choose firebug.js from the dropdown menu at the top left corner. On the sub-view at the right click on Breakpoints pane. On the left margin of Script view, you will see the line numbers appear. Now click on line 10, it will be marked by a red circle. This red circle is the breakpoint, the Breakpoint sub-view will list you have set.



Now refresh and hit the Change the Message! button. You’ll notice line 10 is highlighted, a yellow arrow appearing at the margin indicates that the script has made its way to the breakpoint. From this point you can control the flow of execution using the controls now activated at the top right corner of Script view.

  • Continue This button resumes execution. The script will only pause again if and when the script reaches a breakpoint.
  • Step Over This button executes the current line, including any functions that are invoked along the way, and moves to the next line.
  • Step Into This button ordinarily moves to the next line, as with Step Over. However, if the debugger happens to be paused at a line that invokes a function, the script will instead jump to the first line of the function.
  • Step Out This button causes the script to jump out of the current function, returning to the method from which it was called.
Firebug Debug Screenshot
Firebug Debug Screenshot

Conditional Breakpoints

Sometimes you may want a set a breakpoint, but make it apply only in certain conditions. You need conditional breakpoints. Right-click on a breakpoint and you’ll see a balloon-styled dialog asking you to enter a condition. This is simply a JavaScript expression; each time the breakpoint is reached, Firebug will evaluate the expression. If—and only if—the expression is true, the breakpoint will be applied and execution will pause.

Watches

A watch is a JavaScript expression that the debugger can continuously evaluate and display the value at your request, so that you don’t have to do it manually using the alert box. The expression could be as simple as a variable, or as complex as a formula containing calls to other functions. In our previous example, click on Watch and enter counter in the text field new watch expression… As you keep clicking on the Change the Message! button the value of counter increases, and you can watch the value in the sub-view at the right.

Tip: When you type in a new watch expression, hit the tab button to get auto-suggestions for properties of objects.

Call Stack Tracing

Call stack tracing is the process which reveals the sequence of function calls, with the latest function called showing at the top and the first showing at bottom. When the debuggers is paused, you can click on the Stack sub-view to see the function call sequence. For our first example, when the program reaches the breakpoint and execution is paused, the stack trace will be like this:

changeMessage
handleButtonClick

It means when you clicked the button, the handler for the event handleButtonClick was called, which then called changeMessage. Thus, stack tracing can give you useful insight about program execution flaw when you stuck untangling some messy logic.

Logging function calls

Sometimes a problematic function is called so many times that you can’t break into the debugger every time. You just want to know when it’s called and what parameters were passed in. To track all calls to a function, just right click on it in the Script tab and choose “Log calls to ‘function name'”. Then hop over to the Console and watch the calls stream in.

Sometimes a problematic function is called so many times that breaking into the debugger seems like a tedious task. If you just want to know when the function is called and what parameters are passed in, you can log the calls to this function in the Console. To achieve this, right click on the function in the Script view and choose Log calls to . Then switch to Console view, execute the code and watch the stream of calls.

Related Posts

  • Apache Mod Security update, How to Fix ‘Error 406’ or ‘Not Acceptable’ issue
  • How to fix WordPress.com Stats plugin showing zero (0) visitors!
  • How to Fix ‘Unable to create directory’ error when uploading image into WordPress
  • How to Clean/Remove Not Found Errors from Google web master tools generated from translated versions

Web Development Debugging,  Javascript,  Troubleshooting

Reader Interactions

Comments (10 responses)

  1. Viraj says:
    September 4, 2012 at 11:51 am

    Thank you for such a proper explanation……

  2. Matt says:
    January 31, 2011 at 11:17 am

    Firebug is a great tool. I actually didn’t discover this helpful Add-On, rather my cousin who I was babysitting with. He is great with computers and showed me most of its options. This tool has made my life easier, thanks!

  3. John Gamings says:
    January 3, 2011 at 10:56 am

    Firebug is such a useful Add-On, it saves me an immense amount of time. Also, Firecookies, which goes in hand with Firebug, is another Add-On that I’d highly recommend, as it has proved incredibly useful for me in the past

  4. Alexander says:
    March 2, 2010 at 7:12 pm

    I have decided to learn Firebug.
    Very useful article.
    Thanks.

  5. sudharsan @ technoskillonline says:
    February 19, 2010 at 3:50 am

    very usefull for a webdesigner…

  6. alfondores says:
    February 13, 2010 at 1:05 am

    i’v used firebug its really nice to me.. its save my time

  7. Amal Roy says:
    January 31, 2010 at 9:28 pm

    The Firebug plugin is really a time saver, imagine the time it saves you by avoiding the need for trial and error methods. It really helps to quickly get to the design we need.

  8. sembako says:
    January 13, 2010 at 7:07 pm

    lol..really enjoy my being here..vewwy great info.bookmarked!

  9. neeshu says:
    January 12, 2010 at 6:56 am

    the best thing about firebug is its ease of use another tool that must be used along with it is web developer tool extension

  10. Avinash says:
    December 11, 2009 at 2:48 pm

    Firebug is a excellent tool even for guys like me who are dumb in things like CSS, javascript or even HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Featured & Popular Articles

Video Answers to Top WordPress QuestionsWordPress Optimization Tips and Tricks for Better Performance and SpeedEssential WordPress Security Tips - Is Your Blog Protected?WordPress Simple PayPal Shopping Cart PluginTop 15 Search Engine Optimization (SEO) Techniques I Forget to DoList of the Best and Must Use WordPress PluginsHow do I Start a Blog and Make Money Online?Good Domain Name Picking Tips for Your Blog SetupFind Out Which WordPress Web Hosting Company Offers the Cheapest and Reliable Web Hosting Solution

Featured WordPress Plugins

WP Express Checkout Plugin
wordpress estore plugin
wordpress membership plugin
wordpress affiliate plugin

Recent Posts

  • How to Use Browser Developer Tools to Inspect Elements and [...]
  • Accept Donations via PayPal from Your WordPress Site Easil [...]
  • Buy Now Button Graphics for eCommerce Websites [...]
  • Subscription Button Graphics for eCommerce Websites [...]
  • Adding PayPal Payment Buttons to Your WordPress Sidebar Ea [...]

Comment & Socialize

  • @Rob, We have just released ...
    - admin
  • I installed the plugin a co ...
    - Rob
  • @Sebastian, We've released ...
    - admin
  • I've used this plugin on a ...
    - Sebastian Djupsjöbacka
  • @John, this plugin doesn't ...
    - admin

Check out our solutions

View our WordPress plugin collection and start using them on your site.

Our WordPress Solutions

Footer

Company

  • About
  • Privacy Policy
  • Terms and Conditions
  • Affiliate Login

Top WordPress Plugins

  • Simple Shopping Cart
  • PayPal Donations
  • WP Express Checkout
  • WP eStore
  • WP eMember

Blogging Tips

  • How to Start a Blog
  • Selecting a Good Domain
  • Cheap WP Hosting
  • WP Video Tutorials
  • Simple SEO Tips

Search


Keep In Touch

Copyright © 2025 | Tips and Tricks HQ