CODEWITHSUNDEEP
javascriptdebugging
Phrogz
Phrogz

Reputation: 303520

Set breakpoints and debug eval'd JavaScript

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:

* actually, a friend of mine was doing this, not me

Upvotes: 9

Views: 4202

Answers (1)

Phrogz
Phrogz

Reputation: 303520

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);
}

Upvotes: 19

Related Questions