Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting remote debugging set up with PhantomJS

Tags:

phantomjs

People also ask

How do you debug a test in PhantomJS?

Open a new browser tab and return to the debugging portal at http://127.0.0.1:9000. There should now be a second entry in the bulleted list. Click on this entry to open a new debugger that operates in the context of your page inside PhantomJS.

How do I run PhantomJS?

Go to the “bin” folder and check phantomjs.exe file. If you are using it on a Windows OS, then you can set the path variable under the environment variable for fast access through command prompt. The command to run the PhantomJS program: C:\> phantomjs [options] file.


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.

debug console


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!


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

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!

enter image description here