Development Blog

Give your eval a name with //@ sourceURL

The first Firebug feature I worked on was a whopper: eval() debugging.  One of the challenges is how to name the source code buffer.

By default Firefox names the eval() buffer using the containing filename. This is a disaster:  it’s the debugger equivalent of overstrike: eval functions overlap orginal functions.

Coming up with an alternative is not so easy. The name has to uniquely identify the buffer to support breakpoints and yet be understandable by developers. The Firebug default is to compute an MD5 hash for the buffer then show the developer a string related to the calling file and the source.

Firebug also supports developer-named eval() buffers: just add a line to the end of your eval(expression) like:

//@ sourceURL=foo.js

This makes the source appear to come from the calling domain at file foo.js. The syntax of the line needs to match this regular expression:

const reURIinComment = /\/\/@\ssourceURL=\s*(\S*?)\s*$/m;

sroussey points out that this feature has recently been added to Webkit so it should also work in Safari.


Followup in the newsgroup please.

3 Responses to “Give your eval a name with //@ sourceURL”

  1. small steps | UGamela Blog Says:

    [...] browserify geschrieben, mittlerweile verwende ich webmake für die Erstellung der Client Datei. SourceURL hilft dabei in der großen Datei beim Debuggen nicht die Übersicht zu verlieren. Die [...]

  2. Introduction to JavaScript Source Maps | The CSS Ninja - All things CSS, JavaScript & HTML Says:

    [...] further reading on eval naming and the displayName [...]

  3. Slurp the Web / Introduction to JavaScript Source Maps Says:

    [...] further reading on eval naming and the displayName [...]