Stepping through code using PhantomJS while running tests using Karma

Question

I am running my tests using Karma on PhantomJS, and am facing an asynchronous run loop issue. I was wondering if there is anyway to interactively debug code(step through) when tests are running.

Any help is greatly appreciated.

Answer 1

If you are using karma-phantomjs-launcher npm package in your karma tests, you can add the following snippet in the karma.conf.js file to run PhantomJS in debugger mode:

browsers: ['PhantomJS_custom'],

// you can define custom flags
customLaunchers: {
  'PhantomJS_custom': {
    base: 'PhantomJS',
    debug: true
  }
}

After this, write a debugger; statement where you want to place the breakpoint in your code.

Now, when you start the karma test runner, you will see that PhantomJS is waiting for your browser to connect to the debugger port to start execution of tests.

29 12 2016 13:14:25.269:INFO [launcher]: Starting browser PhantomJS
29 12 2016 13:14:25.325:INFO [phantomjs.launcher]: ACTION REQUIRED:
29 12 2016 13:14:25.325:INFO [phantomjs.launcher]: 
29 12 2016 13:14:25.326:INFO [phantomjs.launcher]:   Launch browser at
29 12 2016 13:14:25.326:INFO [phantomjs.launcher]:   http://localhost:9000/webkit/inspector/inspector.html?page=2
29 12 2016 13:14:25.326:INFO [phantomjs.launcher]: 
29 12 2016 13:14:25.326:INFO [phantomjs.launcher]: Waiting 15 seconds ...

Point your chrome to the address specified in the logs. Now, you will see a debugger interface served from Phantomjs. The code executes in PhantomJS engine but you can observe breakpoints, evaluate expressions and perform many debugging operations from any webkit based browser.