Debug eval sources

This page describes the JavaScript Debugger as it appears in Firefox 52 and above. To see what it's like in earlier versions of Firefox, see Debugger (before Firefox 52).

If you're using Firefox 52 or later and need to switch back to the old Debugger, you can do so by visiting about:config and setting the "devtools.debugger.new-debugger-frontend" preference to false.

You can debug JavaScript code that is evaluated dynamically, either as a string passed to eval() or as a string passed to the Function constructor.

In the video below, we load a page containing a source like this:

var script = `function foo() {
               console.log('called foo');
             }
             //# sourceURL=my-foo.js`;

eval(script);

var button = document.getElementById("foo");
button.addEventListener("click", foo, false);

The evaluated string is given the name "my-foo.js" using the //# sourceURL directive. This source is then listed in the source list pane, and can be opened and debugged like any other source.

The name of the source will also appear in stack traces appearing in the Web Console.

The debugger will also stop at debugger; statements in unnamed eval sources.

Document Tags and Contributors

 Contributors to this page: wbamberg, san650
 Last updated by: wbamberg,