Cannot access casper instance methods at breakpoints using PhantomJS remote debugger

Question

I'm trying to debug casperjs scripts using the remote debugger and I am finding that the casper instance methods do not work until script execution completes. It seems like it's some callback quirk of how then() and run() work in casper, but I'm not sure how the casper console side of the debugger is even useful if you can't pause the program execution and run code as if it's still running (this answer really makes it sound like you can).

For example, hello_wolfram.js starts a casper instance, goes to wolfram alpha, echoes the page title, searches for fractals, and then echoes the page title again. These page title calls work fine in the running script, but if I try to run that command in the casper context console, it returns null. None of the other casper methods work either. The casper variable is defined though, and I do get access to a nice, informative Casper object.

var casper = require('casper').create();                                                                                                                                                                                                                                                         
casper.start('http://www.wolframalpha.com');                                                                                                                                                                                                                                                     

// echo page title for sanity check
casper.then(function(){
  debugger; // 1                                                                                                                                                                                                                                                               
  this.echo('Hello, Wolfram! The Page title is ' + this.getTitle());                                                                                                                                                                                                           
});                                                                                                                                                                                                                                                                          

// enter search term and submit form
casper.then(function() {
  this.fill('form.index', {'i': 'fractals'}, true)
});                                                                                                                                                                                                                                                                          

// echo page title on search results page
casper.then(function(){
  debugger; // 2                                                                                                                                                                                                                                                               
  this.echo('The Page title is now ' + this.getTitle());                                                                                                                                                                                                                       
});                                                                                                                                                                                                                                                                          

casper.run();

Break 1:

casper variable is defined and returns a Casper object with currentURL="http://www.wolframalpha.com/"
casper.getTitle() returns null

Break 2:

casper variable is defined and returns a Casper object with currentURL="http://www.wolframalpha.com/input/?i=fractals"
casper.getTitle() returns null

I was really hoping that I could run casper commands in the casper console and see their effects on the DOM in the other window, which seems like what a debugger would give you. Is there a way to do this with casperjs?

score 0 · Answer 1 · edited May 23 '17 at 11:44

While you are at the breakpoint, casper execution is paused. You can access any properties on the casper object, but to run casper commands you need to add them to the queue. This just means wrapping it in casper.then(), and then stepping past your breakpoint.

At break one, if you run casper.steps.length, you have 5 steps and you are currently at step 3 (output of casper.step).

You can then add you getTitle code, wrapped in casper.then():

casper.then(function() {
  this.echo('The Page title is now ' + this.getTitle());
});

Now casper.steps.length === 6; you have added a step immediately after the current one, but you are still at the breakpoint.

So continue/step, and your text will be printed. If you want you can add additional debugger statements inside the casper.then() block; you will then pause at step 4 (your newly added step). The scripts tab will be updated with a small script just containing your function.

More info on casper.then in this answer: https://stackoverflow.com/a/11957919

Cannot access casper instance methods at breakpoints using PhantomJS remote debugger

1 Answers1