使用PhantomJS注入并使用Firebug-Lite

Question

我试图使用PhantomJS将Firebug &注入到网页中，但我无法访问它们。

我已经尝试了用于将其他JS添加到页面的两个PhantomJS方法：page.injectJs（）和page.includeJs。

我无法从includeJs中获得任何返回的内容（我从阅读文档时并不期望得到它）。我试图使用firebug-lite和jQuery函数或对象（如$和inspect（））后，我得到错误，说他们是未定义的或变量无法找到。

这是我的完整脚本。您还可以在这里看到：http://piratepad.net/XTPefXOB4o

"use strict"; 
"use warnings"; 

var page = new WebPage(), address; 
var useragent = "PhantomJS Firebug integration tool (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.56 Safari/535.11"; 

page.onConsoleMessage = function (msg) { 
    console.log("+eval:" + msg); 
}; 

page.open(address, function (status) { 
    if (status !== 'success') { 
     console.log('Unable to access network'); 
    } else { 
     console.log("got into page.open()"); 

     var testInclude = page.includeJs("http://getfirebug.com/releases/lite/1.4/firebug-lite.js", function() { 
      var result = true; 
      try { 
       inspect($("*")[5]); 
      } 
      catch(err) { 
       result = false; 
      } 
      console.log("from includeJS: " + result); 
      return result; 
      // is there any way to return a value from this? 
     }); 

     var results = page.evaluate(function() {  
      var debug = []; 

      try { 
       page.injectJs("http://getfirebug.com/releases/lite/1.4/firebug-lite.js"); 
       page.injectJs("http://pconerly.webfactional.com/site_media/js/jquery-1.7.min.js"); 
      } catch(err) { 
       debug[0] = false; 
      } 
      debug[0] = true; 

      debug[1] = true; 
      try { 
       // all 3 of these commands fail. 
       //$(document); 
       inspect(document.querySelectorAll("*")[i]); 
       //firebug; 
      } 
      catch(err) { 
       console.log(err.message) 
       debug[1] = false; 
      } 

      //debug[1] = inspectAEl(5); 

      return debug; 
     }); 

     var stuff = results; 
     console.log("did not error on injecting JS: " + stuff[0]); 
     console.log("used inspect within page.evaluate: " + stuff[1]); 

     console.log("return value from includeJs: " + testInclude); 

     console.log("processing finished");    
    } 
    phantom.exit(); 
});  

这是我的输出：

$ phantomjs firebug-integration.js 
got into page.open() 
+eval:Can't find variable: inspect 
did not error on injecting JS: true 
used inspect within page.evaluate: false 
return value from includeJs: undefined 
processing finished 

Answer 1

你已经有了一些困惑在这里每一个功能的情况下：

• 当你运行includeJs(url, callback)，callback函数在PhantomJS上下文中运行。所以它可以访问page，但是而不是可以访问由包含脚本创建的变量和名称空间 - 这些都包含在客户端上下文中，并且可用于通过page.evaluate()运行的函数。

• 您正试图在page.evaluate()内运行page.injectJs()。这将不起作用 - 您在page.evaluate()中运行的函数在客户端执行上下文中被沙箱化，并且无法访问page对象。

所以，你应该尝试这些方法之一 - 无论是在page.includeJs()回调运行page.evaluate()：

page.includeJs("http://getfirebug.com/releases/lite/1.4/firebug-lite.js", 
     function() { 
      page.evaluate(function() { 
       // do stuff with firebug lite here 
       console.log(inspect($("*")[5])); 
      }); 
     }); 

或运行page.injectJs()和然后运行page.evaluate()：

// note - this is a reference to a local file 
page.injectJs("firebug-lite.js"); 
page.evaluate(function() { 
    // do stuff with firebug lite here 
    console.log(inspect($("*")[5])); 
});