Getting remote debugging set up with PhantomJS

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!

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.

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