index.rst (1513B)
1 ================== 2 Debug eval sources 3 ================== 4 5 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. 6 7 In the video below, we load a page containing a source like this: 8 9 .. code-block:: javascript 10 11 var script = `function foo() { 12 console.log('called foo'); 13 } 14 //# sourceURL=my-foo.js`; 15 16 eval(script); 17 18 var button = document.getElementById("foo"); 19 button.addEventListener("click", foo, false); 20 21 22 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. 23 24 .. raw:: html 25 26 <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> 27 <br/> 28 <br/> 29 30 The name of the source will also appear in stack traces appearing in the :doc:`Web Console <../../../web_console/index>`. 31 32 The debugger will also stop at `debugger; <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger>`_ statements in unnamed eval sources.