Can I get an interactive JS debugger working on PhantomJS and/or CasperJS?
2 Answers
I didn't solve this entirely, but I definitely reduced the pain.
PhantomJS provides a command line argument to enable webkit's remote debugger. AFAIK, PhantomJS launches a server and dumps the script into the <head>
of a webpage with the familiar in-browser debugger. It's actually pretty nice, with breakpoints, etc. However, switching to manually digging around in the terminal for a random command line parameter and the path to your script is seriously irritating.
So, I used IntelliJ's "external tools" feature to launch a Bash script that kills any previous debugging session, launches PhantomJS, and then opens the page up in Chrome.
#!/bin/bash
lsof -i tcp@0.0.0.0:9000 #list anything bound to port 9000
if [ $? -eq 0 ] #if something was listed
then
killall 'phantomjs'
fi
/usr/local/Cellar/phantomjs/2.0.0/bin/phantomjs --remote-debugger-port=9000 $1 &
# --remote-debugger-autorun=yes <- use if you have added 'debugger;' break points
# replace $1 with full path if you don't pass it as a variable.
sleep 2; #give phantomJS time to get started
open -a /Applications/Google\ Chrome.app http://localhost:9000 & #linux has a different 'open' command
# alt URL if you want to skip the page listing
# http://localhost:9000/webkit/inspector/inspector.html?page=1
#see also
#github.com/ariya/phantomjs/wiki/Troubleshooting
The next few lines are settings for IntelliJ, although the above code works just as well on any platform/IDE.
program: $ProjectFileDir$/path/to/bash/script.sh
parameters: $FilePath$
working dir: $ProjectFileDir$
-
In Chrome it is --remote-debugging-port, not --remote-debugger-port. That's also the flag in the webkit article. You might want to double-check that the flag is correct. Sep 6, 2013 at 5:31
-
-
3While this answer has gotten me plenty of internet points, I would like to see a REAL solution to this sometime and I would be happy to award the answer to anyone that can post it! Nov 4, 2013 at 16:59
-
1Here's a great tutorial on using Remote debugging with casper/phantomjs. Dec 11, 2015 at 17:00
-
@brettjonesdev Contribute a new answer! I'd be happy to award an answer that gave real solution instead of this hack. I'd do it myself but I've moved on from PhantomJS. Dec 12, 2015 at 1:51
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:
- In the Chrome dev tools page, open the console and execute
__run()
to actually start your script. - 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 yourdebugger;
line.
There's a great tutorial that explains this all very nicely.