Phantomjs 转储 dom 对象

Question

我是 Phantomjs 的新手。为了在远程服务器上调试，我经常想转储一个 DOM 对象来查看结构（类似于 Perl 中的 Data::Dumper ）。目前这是为了抓取几个网站。

我认为 JSON.stringify 可能对此有所帮助，但它仍然显示一个对象名称，如“[object HTMLDocument]”

编辑：我也看过 JavaScript: how to serialize a DOM element as a string to be used later? ，但我似乎无法在 phantomjs 中注入 jquery （仍在寻找解决方案，并且不希望依赖），并且另一个答案似乎不起作用。正如我认为 Phantom 分析 DOM 的常见情况一样，我认为 Phantom 用户对此有解决方案是很常见的。

var page = require('webpage').create();
var system = require('system');

page.onConsoleMessage = function(msg) {
        console.log( msg );
}

page.open('http://www.test.com', function(status) {
       if(status !== "success") {
                console.log( status );
       } else {
                page.evaluate(function() {

                    var headline = document.querySelectorAll('div');
                    console.log(  JSON.stringify( headline )  ); // HERE???

                });
        }
        phantom.exit();
});

有什么办法可以做到这一点，还是我的做法有误？

Answer 1

在page.evaluate()中，你可以使用XMLSerializer.serializeToString()来转换任何你想串起来的DOM节点。

page.evaluate(function() {
    var s = new XMLSerializer();
    return s.serializeToString(document.getElementById('div'));
});

我还没有用 "querySelectorAll" 尝试过，因为它可能 return 数组而不是独立的 DOM 节点，但它绝对适用于 DOM 节点。

MDN Link

Phantomjs 转储 dom 对象

Phantomjs dump dom object

phantomjs