Is there any way to debug code written to a new window

Question

Is there anyway to debug code that has been written to a new window from the parent?

I have tried innerHTML, textContent, document.write, and append child. But none of them show up in the source console in chrome/ff. Any associated files do, but the source itself does not.

Maybe there is a way to do this with sockets or some other api...

This is what it looks like after I do a doc.write() or any of the other approaches, quite bare :/

*Note: If I include a reference to a file like <script src="jquery.js"></script> it is possible to debug that, but not any scripts embedded in the root html page itself.

My last ditch approach will be to put all the scripts in a file and link to them from the window, but if possible it would be nice to be able to debug the window scripts themselves as well. As my solution will be dynamic and it is easier to create a new window than a file in js.

Answer 1

I have tried innerHTML, textContent, document.write, and append child. But none of them show up in the source console in chrome/ff. Any associated files do, but the source itself does not.

That's how it should be. None of these methods does generate/change the source of a file, and your index.html is intentionally empty. If you'd use a data:-URI, I guess you could inspect its source.

All the methods above do actually modify the DOM, so you can look at the result in the DOM inspector (Elements tab of your devtools). Or, in case of document.write, they intercept the parser that leads to a DOM created from a different stream than the source.

To inspect what document.write has written in plaintext, you might wrap them in a logger function:

(function (d) {
     var w = d.write,
         wl = d.writeln;
     d.write = function() {
         this.source = (this.source || "") + [].join.call(arguments);
         w.apply(this, arguments);
     };
     d.writeln = function() {
         this.source = (this.source || "") + [].join.call(arguments) + "\n";
         w.apply(this, arguments);
     };
})(theDocumentYoureWritingTo);

// after you're done, you can
console.log(theDocumentYouWroteTo.source);