Source code
Revision control
Copy as Markdown
Other Tools
==================
Debug eval sources
==================
You can debug JavaScript code that is evaluated dynamically, either as a string passed to `eval() <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval>`_ or as a string passed to the `Function <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function>`_ constructor.
In the video below, we load a page containing a source like this:
.. code-block:: javascript
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 :ref:`source list pane <debugger-ui-tour-source-list-pane>`, and can be opened and debugged like any other source.
.. raw:: html
<iframe width="560" height="315" src="https://www.youtube.com/embed/AkvN40-y1NE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br/>
<br/>
The name of the source will also appear in stack traces appearing in the :doc:`Web Console <../../../web_console/index>`.
The debugger will also stop at `debugger; <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger>`_ statements in unnamed eval sources.