Setting up JS debugging with IntelliJ/WebStorm and PhantomJS/Casper

Question

Can I get an interactive JS debugger working on PhantomJS and/or CasperJS?

Answer 1

PhantomJS has a remote-debugger-port option you can use to debug your casper script in Chrome dev tools. To use it, simply execute your casper script with this argument:

casperjs test script.js --remote-debugger-port=9000

Then, open up http://localhost:9000 in Chrome and click on the about:blank link that presents itself. You should then find yourself in familiar Chrome dev tools territory.

Since this is a script and not a web page, in order to start debugging, you have to do one of two things before your script will execute:

1. In the Chrome dev tools page, open the console and execute __run() to actually start your script.
2. Insert a debugger; line in your code, and run your casper script with an additional --remote-debugger-autorun=yes argument. Doing so with the remote debug page open will run the script until it hits your debugger; line.

There's a great tutorial that explains this all very nicely.