Set breakpoints and debug eval'd JavaScript

debugging, javascript

Solution

Instead of using `eval`, and instead of manually copy/pasting into a separate file, you can dynamically load the JS directly into the page that generated it by using a data uri on a dynamically-created `<script>` element. With this approach, Chrome's Developer Tools (and Firebug) allow you to pick the data-URI as a script, turn on the Pretty Print, set breakpoints, and away you go.

var js = createMyJSCodeString();
addCode(js); // Right now! Debuggable!

// Dynamically evaluate JavaScript-as-string in the browser
function addCode(js){
  var e = document.createElement('script');
  e.type = 'text/javascript';
  e.src  = 'data:text/javascript;charset=utf-8,'+escape(js);
  document.body.appendChild(e);
}

Problem

I* am using client-side JS to parse XML files and generate complex JS code to `eval` as a result. (Generating re-usable functions that are kicked off by a runtime.) However, I need to debug the code being generated, and would like to use Chrome's built-in breakpoints, stepping, watch windows, etc. Is there an easier way to do this than: - Dump the generated JS string to the console and/or window. - Copy the JavaScript - (optional) Run the JS through a prettifier like JSBeautifier. - Paste the JS into a file that is loaded via `<script src="...">` in another web page. * actually, a friend of mine was doing this, not me

Original source