Injecting & using Firebug-Lite with PhantomJS

Question

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

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

Answer 1

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