How to debug page loading errors in phantomJs

Question

Is there a way to debug page.open method of phantomjs ? My application loads some files saved locally but unfortunately the only info one can get when opening the page is if it was loaded successfully or not. What more interesting the very same page loads properly when opened in the browser.

Here's my code :

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

var openPage = function () {

    var url = 'http:\\localhost:53794/file.html';

    page.open(url, function (status) {
        if (status !== 'success') {
            console.log("FAIL:" + url);
            phantom.exit(2);
        }

        var date            = new Date().getTime();
        var outputFilename  = outputPath + 'print-' + date + '.png';

        setTimeout(function () {
            page.render(outputFilename);
            outputArray.push(outputFilename);

            setTimeout(function () {
                phantom.exit(1);
            }, 1);
        }, 1);        
    });
}

openPage();

Answer 1

via: http://newspaint.wordpress.com/2013/04/25/getting-to-the-bottom-of-why-a-phantomjs-page-load-fails/

After creating the page variable, but before calling page.open() add the following code:

page.onResourceError = function(resourceError) {
    page.reason = resourceError.errorString;
    page.reason_url = resourceError.url;
};

Now you can print out the reason for a problem in your page.open() callback, e.g.:

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

page.onResourceError = function(resourceError) {
    page.reason = resourceError.errorString;
    page.reason_url = resourceError.url;
};

page.open(
    "http://www.nosuchdomain/",
    function (status) {
        if ( status !== 'success' ) {
            console.log(
                "Error opening url \"" + page.reason_url
                + "\": " + page.reason
            );
            phantom.exit( 1 );
        } else {
            console.log( "Successful page open!" );
            phantom.exit( 0 );
        }
    }
);

Debugging Function

If you read further down the blog, he has some more suggested event handlers to add. I adapted them into a function that you can use to inject the event handlers into your page object (instead of having them defined in your main code)

// this method injects some debugging event handlers 
// into a PhantomJS page object.
// usage:
//   var page = require('webpage').create();
//   var system = require('system');
//   addDebugEvents(page,system);
function addDebugEvents(page, system) {

    page.onResourceError = function (resourceError) {
        page.reason = resourceError.errorString;
        page.reason_url = resourceError.url;
    };

    page.onResourceRequested = function (request) {
        system.stderr.writeLine('= onResourceRequested()');
        system.stderr.writeLine('  request: ' + JSON.stringify(request, undefined, 4));
    };

    page.onResourceReceived = function (response) {
        system.stderr.writeLine('= onResourceReceived()');
        system.stderr.writeLine('  id: ' + response.id + ', stage: "' + response.stage + '", response: ' + JSON.stringify(response));
    };

    page.onLoadStarted = function () {
        system.stderr.writeLine('= onLoadStarted()');
        var currentUrl = page.evaluate(function () {
            return window.location.href;
        });
        system.stderr.writeLine('  leaving url: ' + currentUrl);
    };

    page.onLoadFinished = function (status) {
        system.stderr.writeLine('= onLoadFinished()');
        system.stderr.writeLine('  status: ' + status);
    };

    page.onNavigationRequested = function (url, type, willNavigate, main) {
        system.stderr.writeLine('= onNavigationRequested');
        system.stderr.writeLine('  destination_url: ' + url);
        system.stderr.writeLine('  type (cause): ' + type);
        system.stderr.writeLine('  will navigate: ' + willNavigate);
        system.stderr.writeLine('  from page\'s main frame: ' + main);
    };

    page.onResourceError = function (resourceError) {
        system.stderr.writeLine('= onResourceError()');
        system.stderr.writeLine('  - unable to load url: "' + resourceError.url + '"');
        system.stderr.writeLine('  - error code: ' + resourceError.errorCode + ', description: ' + resourceError.errorString);
    };

    page.onError = function (msg, trace) {
        system.stderr.writeLine('= onError()');
        var msgStack = ['  ERROR: ' + msg];
        if (trace) {
            msgStack.push('  TRACE:');
            trace.forEach(function (t) {
                msgStack.push('    -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function + '")' : ''));
            });
        }
        system.stderr.writeLine(msgStack.join('\n'));
    };

}

Answer 2

You should change the URL

from

http:\\localhost:53794/file.html

to

http://localhost:53794/file.html