# 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:

```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.