Subscribe to RSS Feed

Firebug 2 (first alpha) has been released this week and it's time to checkout some of the new features. Note that you need at least Firefox 30 to run it.

This brand new version introduces a lot of changes where the most important one is probably the fact that it's based on new Firefox debugging engine known as JSD2.

Also Firebug UI has been polished to match Australis theme introduced in Firefox 29.


Dynamically Created Scripts

Let's see how debugging of dynamically created scripts has been improved in this release and how Firebug UI deals with this common task. We'll cover following dynamic scripts in this post:

  • Inline Event Handlers
  • Script Element Injection
  • Function Object

There are other ways how to create scripts dynamically.

 

Inline Event Handlers

Inline event handlers are little pieces of JavaScript placed within HTML attributes designed to handle basic events like onclick.

<button onclick="testFunction()">Click Me</button>

These scripts are compiled dynamically when needed (before executed for the first time). That's why they are considered dynamic and you don't have to see them in the Script location list (until compiled by the browser).

Script's URL is composed dynamically (there is no real URL for dynamic scripts) and event handlers scripts follow this scheme:

<element-name> <attribute-name> <button-label>

If you select the script from the script location menu, you should see the source that is placed within the onclick attribute.

Of course, you can create a breakpoint as usual. Try live example page if you have Firebug 2 installed.

 

Script Element Injection

Another way how to dynamically compile a piece of script is using <script> element injection.

var script =
        "var a = 10;\n" +
        "var b = 10;\n" +
        "console.log('a + b = %d', a + b);\n" +
        "//# sourceURL=injected-script.js\n";

var scriptTag = document.createElement("script");
scriptTag.textContent = script;
document.body.appendChild(scriptTag);

Again, you can check out live example.

There is couple of things to see:

  • There is one event handler script: button onclick Click Me since we injected the script through a button and its event handler.
  • There is another dynamic script injected-script.js - this one created using the injected <script> element
  • Injected script uses custom URL, which is defined within the source using sourceURL comment:
    //# sourceURL=injected-script.js

  • If no sourceURL is provided default one is generated (using script element id or xpath)

 

Function Object

Another way how to compile a script dynamically is using JavaScript native Function object.

var source = "console.log('a + b = %d', a + b);\n";
var myFunc = new Function("a", "b", source);
myFunc.displayName = "myFunc";

myFunc(10, 10);

  • The script URL is generated automatically. The following scheme is used: <parent-page-url> <line-number> "> Function";
  • You can't use sourceURL due to a platform bug
  • There is one event handler script

Check out live example.

 

We want to switch into beta phase soon and it would be great to hear from you about how this version is working for you.

 


Rss Commenti

4 Comments

  1. The article says " ", but it should rather be " " to describe the general format.

    You say "You can't use displayURL due to a platform bug", but you actually mean "sourceURL".

    Sebastian

    #1 Sebastian Zartner
  2. Hmm, the tags got stripped out. So here's the corrected version:

    The article says "[element-name] [attribute-name] [button-label]", but it should rather be "[element-name] [attribute-name] [text-content]" to describe the general format.

    Sebastian

    #2 Sebastian Zartner
  3. > but you actually mean "sourceURL".
    Fixed, thanks!

    I kept button-label in there, I think it's more understandable what it means.

    Honza

    #3 Honza
  4. hi, I have encountered one problem about this feature, if the script is executed using jQuery.globalEval so that I can't create a breakpoint.
    I have checked the source code of jQuery.globalEval, it used an anonymous function to eval the script. How can I set breakpoint in this case?
    thanks

    #4 cheltenham

Sorry, the comment form is closed at this time.