Subscribe to RSS Feed

Firebug (and also Web Inspector) allows to label dynamically evaluated scripts using a special directive. The directive is a simple comment that is appended to the bottom of the evaluated script.

//@ sourceURL=foo.js

Such label is important especially for debuggers displaying list of scripts available on a page and so, developers can pick the right script see the source code and eventually create a breakpoint.

In order to avoid IE JS conditional compilation issues, Firebug will also support new syntax:

//# sourceURL=foo.js

This support will be available since Firebug 1.11.5 and Firebug 1.12 alpha 7

 

Syntax of the directive needs to match this regular expression:

/\/\/[@#]\ssourceURL=\s*(\S*?)\s*$/m;

How to use 'sourceURL' directive

Let's see an example. Following code snippet shows a simple script that is evaluated using eval() function.

var script =
    "function test()\n" +
    "{\n" +
    "    console.log('test');\n" +
    "}\n";

window.eval(script);

There is no explicit name provided for such script and so Firebug doesn't know what label to use. Check out the script location menu:

 

Let's modify the example and provide sourceURL directive with a name:

var script =
    "function test()\n" +
    "{\n" +
    "    console.log('test');\n" +
    "}\n";

script += "//@ sourceURL=evaluated-script.js";
window.eval(script);

At this point Firebug can use the name and make the script list more understandable.

 

Of course, you can also specify entire URL for the script:

var script =
    "function test()\n" +
    "{\n" +
    "    console.log('test');\n" +
    "}\n";

script += "//@ sourceURL=http://janodvarko.cz/evaluated-script.js";
window.eval(script);

 

Check out an example online.

 


Rss Commenti

2 Comments

  1. Thank you very much for the great article. this is very useful post. All the points you mentioned are relevant and put together in an interesting way.

    #1 Manish sharma
  2. 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

    #2 khalil

Sorry, the comment form is closed at this time.