Getting remote debugging set up with PhantomJS

Question

I'm trying to set up remote debugging with PhantomJS, without much luck. I am following the instructions at https://github.com/ariya/phantomjs/wiki/Troubleshooting. I have a little program named debug.js:

var system  = require('system' ), fs = require('fs'), webpage = require('webpage');

(function(phantom){
    var page=webpage.create();

    function debugPage(){
        console.log("Refresh a second debugger-port page and open a second webkit inspector for the target page.");
        console.log("Letting this page continue will then trigger a break in the target page.");
        debugger; // pause here in first web browser tab for steps 5 & 6
        page.open(system.args[1]);
        page.evaluateAsync(function() {
            debugger; // step 7 will wait here in the second web browser tab
        });
    }
    debugPage();
}(phantom));

Now I run this from the command line:

$ phantomjs --remote-debugger-port=9001 --remote-debugger-autorun=yes debug.js my.xhtml

The console.log messages are now displayed in the shell window. I open a browser page to localhost:9001. It is at this point that the documentation says "get first web inspector for phantom context" However, I see only a single entry for about:blank. When I click on that, I get an inspector for the irrelevant about:blank page, with the URL http://localhost:9001/webkit/inspector/inspector.html?page=1. The documentation talks about executing __run(), but I can't seem to get to the page where I would do that; about:html seems to contina a __run() which is a no-op.

FWIW, I am using PhantomJS 1.9.1 under W8.

What am I missing?

Answer 1

I had problems getting debugging to work on Mac using Chrome Version 57.0.2987.133 (64-bit). I got the debugger to open on localhost:9000 (127.0.0.1:9000 didn't work for me) but after entering __run() (yes, with double underscore), there was no response. I could see other js files under Sources, mine was listed but was empty. (I did enable debugging in chrome)

I tried the same on safari and it all worked as advertised.

UPDATE for Chrome: (from Thiago Fernandes below): Apparently the issue is caused by the Chrome not accepting the enter key, so the workaround is to evaluate this function inside chrome console, to get the enterKey working:

function isEnterKey(event) { return (event.keyCode !== 229 && event.keyIdentifier === "Enter") || event.keyCode === 13; } 

Answer 2

To debug a script, start phantomjs like so:

phantomjs --remote-debugger-port=9000 hello.js

Here's a super simple test script that works (hello.js). Note that you should put debugger; at the top of your script, or wherever in your script you want to break into the debugger.

hello.js

debugger;

for (var i=0; i < 5; i++)
{
  console.log('debugging in phantom js:' + i);
}

phantom.exit();

Now just load the following url in your browser:

http://127.0.0.1:9000/

Then you'll see a link listed in the browser page

about:blank

Click on it, and then you'll see a whole page that looks like the Chrome Inspector. Click on the "Console" button in the toolbar that's in this page (not the console of Chrome or Safari that you're used to using).

Now, in that console type __run() and hit enter. Your script will display and start debugging!

Answer 3

The documentation says :

To run your script, simply enter the __run() command in the Web Inspector Console.

__run() is not a no-op but just a wrapper to your script. You need to select Console tab first and then enter __run() in the command window. If you are familiar with Chrome, it's fairly the same as for developpers tool.

Answer 4

In my case the __run() would not be executed in the console. If this is the same issue you have, read on....

Open PowerShell and execute the script:

cls
# we go to the folder where our test.js script resides
cd "C:\Users\xxx\Phantomjs.Console"
phantomjs --remote-debugger-port=9000 --remote-debugger-autorun=yes test.js 

1. Open your Chrome browser and go to
2. http://localhost:9000
3. Click on your, in my case test.js file.
4. Switch to the Sources tab!
5. Execute __run() under Watch Expressions!

Put a debugger statement in your script for debugging!