Injecting & using Firebug-Lite with PhantomJS


up vote
0
down vote
favorite

1

share [g+]
share [fb]
share [tw]

I'm trying to inject Firebug & jQuery into a webpage using PhantomJS, but I'm unable to access them.

I've tried both PhantomJS methods for adding other JS to a page: page.injectJs() and page.includeJs.

I'm not able to get anything returned from includeJs (which I wasn't expecting to get, from reading the documentation).

After I injectJs() and try to use firebug-lite and jQuery functions or objects (like $ and inspect() ) I get errors saying they are undefined or the variable can't be found.

This is my complete script. You can also see it here: http://piratepad.net/XTPefXOB4o

"use strict";"use warnings";var page =newWebPage(), 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();});

This is my output:

$ 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
javascript phantomjs firebug-lite
link|edit|flag
83% accept rate

1 Answer

active
oldest
votes

up vote
1
down vote

You've got some confusion here around the context of each function:

  • When you run includeJs(url, callback), the callback function runs in the PhantomJS context. So it has access to page, but does not have access to variables and namespaces created by the included script - these were included in the client context, and will be available to functions you run through page.evaluate().

  • You're trying to run page.injectJs() within page.evaluate(). This won't work - the function you run in page.evaluate() is sandboxed in the client execution context, and does not have access to the page object.

So you should try one of these approaches - either run page.evaluate() in the page.includeJs() callback:

  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]));
      });
    });

or run page.injectJs() and then run 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]));});
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。