在噩夢中編寫DOM元素到瀏覽器控制檯

Question

我使用NightmareJS進行無頭瀏覽。我的代碼如下所示：

var Nightmare = require('nightmare'); 
var google = new Nightmare() 
    .goto('http://www.google.com') 
    .wait(3000) 
    .inject('js', 'jquery.min.js') 
    .screenshot('screenshot.png') 
    .evaluate(function(){ 
     return $('#footer').html(); 
    }, function(value){ 
     console.log(value); 
    }) 
    .run(function(err){ 
     console.log('All done!'); 
    }); 

我需要經常使用console.log調試DOM元素。但是，console.log似乎不適用於。評估塊。

我該如何登錄。評估到控制檯？

Answer 1

所以我能夠使用Promise早些時候解決這個問題。以下是更新代碼：

var Nightmare = require('nightmare'); 
var Promise = require('es6-promise').Promise; 

var nightmare = new Nightmare(); 
Promise.resolve(nightmare 
    .goto('http://www.google.com') 
    .wait(3000) 
    .inject('js', 'jquery.min.js') 
    .screenshot('screenshot.png') 
    .evaluate(function(){ 
     return $('#footer').html(); 
    })) 
    .then(function(value){ 
     console.log(value); 
     console.log('All Done!'); 
     return nightmare.end(); 
    }) 
    .then(function(result){ 
    }, function(err){ 
     console.error(err); 
    }); 

請記住npm install es6-promise。除了我在這裏使用的其他Javascript實現外，您還可以使用其他Javascript Promises實現。

希望它有幫助。

Answer 2

console.log()作品（裏面的evaluate()）的頁面內容的精細裏面，但你必須聽吧：

new Nightmare() 
    .on("consoleMessage", function(msg){ 
     console.log("remote> " + msg); 
    }) 
    .goto('http://www.google.com') 
    .evaluate(function(){ 
     console.log($('#footer').html()); 
    }, function(){}) 
    ... 

請記住，你不能只是完全輸出DOM節點像控制檯你會在你最喜歡的瀏覽器的開發工具。這太多了。您必須打印您必須自己構建的DOM節點的表示。

您也可以使用所有其他事件PhantomJS provides以相同的方式，但這僅適用於2.x之前的Nightmare版本，因爲從版本2.x開始，Electron被用作基礎瀏覽器而不是PhantomJS。