有没有办法调试写入新窗口的代码

时间:2013-03-26 12:17:52

标签: javascript google-chrome-devtools

无论如何调试已从父级写入新窗口的代码?

我尝试过innerHTML,textContent,document.write和append child。但它们都没有出现在chrome / ff的源控制台中。任何相关文件都可以,但源本身却没有。

也许有办法用套接字或其他api来做这个...

这是我在执行doc.write()或任何其他方法之后的样子,非常简单:/

enter image description here

*注意:如果我包含对<script src="jquery.js"></script>等文件的引用,则可以对其进行调试,但不能在根html页面本身中嵌入任何脚本。

我的最后一个方法是将所有脚本放在一个文件中并从窗口链接到它们,但如果可能的话,能够自己调试窗口脚本也会很好。由于我的解决方案是动态的,因此创建新窗口比使用js中的文件更容易。

1 个答案:

答案 0 :(得分:1)

  

我尝试过innerHTML,textContent,document.write和append child。但它们都没有出现在chrome / ff的源控制台中。任何相关文件都可以,但源本身不会。

应该是这样的。这些方法都不会生成/更改文件的来源,并且您的index.html故意为空。如果您使用data: - URI,我猜您可以检查其来源。

上面的所有方法都会实际修改DOM,因此您可以在DOM检查器(devtools的 Elements 选项卡)中查看结果。或者,在document.write的情况下,它们拦截导致从与源不同的流创建的DOM的解析器。

要检查明文中写的document.write是什么,可以将它们包装在记录器功能中:

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