Subscribe to RSS Feed

Updated: how to use this feature from the command line

Have you ever placed console.log into a JS function just to figure out whether the function has been executed? Did you also happen to make a syntax error when doing that code modification? ;-)

Then you could be interested in Firebug feature that allows to log function calls without changing the code!

This feature is ready behind a Log Calls To ... menu item that is available if you right click on a function link (e.g. in the DOM panel).

The screenshot above shows the DOM panel for a page that implements myFunction function. If you right click on the function (the link on the right side) you'll see context menu with Log Calls to "myFunction" option. Check it, switch to the Console panel and operate the page to execute the function.

You can see the log on the screenshot, it's the function name. If you click it you'll be navigated to the Script panel to see the source code.

Activate logging from the Console Panel

The logging can be also activated from the Console panel.

  1. Open the test page
  2. Execute this expression in the command line: myFunction
  3. Right click on the result and pick Log Calls to "myFunction" option

Activate logging from the Watch Panel

Yet another way how to activate the logging is using the Watch side panel in the Script panel. If a reference to myFunction function is available in the Watch panel you can right click on its value (the green text) and again use the context menu.

Activate logging from the Command Line

You can also use Firebug Command Line to activate function calls logging.

There are two related commands.

  • monitor(fn)
  • unmonitor(fn)

If you execute the following expression in the command line, logging will be activated for myFunction function.

monitor(myFunction);

And you can deactivate as follows:

unmonitor(myFunction);

Breakpoint Panel

Finally, the list of functions, which are being logged to the Console panel is available in the Breakpoints side panel. You can also deactivate logging by clicking the red cross button on the right side.


If you have any tips how to improve this feature let us know.


Rss Commenti

11 Comments

  1. Oh, very useful... yes, patching in calls to console.log is pretty much routine for me, so being able to do it without code changes would be perfect.

    #1 Simon
  2. I see a lot of people which forget to remove their console.log() calls from their prodcution code, therefore this is perfect!

    #2 Markus
  3. [...] Firebug tip: Log function calls [...]

    #3 Mozilla Hacks Weekly, August 16th 2012 ✩ Mozilla Hacks – the Web developer blog
  4. [...] it’s hard to imagine doing so. Well, with mobile Firefox out and looking good, and stuff like logging function calls, I just might start plinking [...]

    #4 Today’s Readings | Aaron T. Grogg
  5. [...] Firebug tip: “Log function calls” [...]

    #5 Mozilla Hacks Weekly: This HTML5 blog-series is an undervalued resource for developers | t1u
  6. [...] Firebug tip: “Log function calls” [...]

    #6 Mozilla Hacks Weekly: This HTML5 blog-series is an undervalued resource for developers | TechDiem.com
  7. [...] Firebug tip: “Log function calls” [...]

    #7 Mozilla Hacks Weekly: This HTML5 blog-series is an undervalued resource for developers | | AAACBCAAACBC
  8. [...] Firebug tip : Log function calls [...]

    #8 Mozilla Hacks Weekly : cette série d’articles de blogs est une ressource sous-estimée par les développeurs- Le blog des nouvelles technologies : Web, Technologies, Développement, Interopérabilité
  9. [...] Log Function Calls feature has been improved and it also shows the current stack trace (issue 5866). [...]

    #9 Getfirebug Blog » Blog Archive » Firebug 1.11 alpha 3
  10. parameters and variables are also logged?

    #10 Arno.Nyhm
  11. [...] detailed explanation of this [...]

    #11 Firebug 1.11 New Features ✩ Mozilla Hacks – the Web developer blog

Sorry, the comment form is closed at this time.