Add "debug" argument for straightforward debugging

README.md

@@ -34,9 +34,10 @@ module.exports = function(config) {
           windowName: 'my-window',
           settings: {
             webSecurityEnabled: false
-          }
+          },
         },
-        flags: ['--remote-debugger-port=9000']
+        flags: ['--load-images=true'],
+        debug: true
       }
     }
   });
@@ -48,6 +49,12 @@ You can pass list of browsers as a CLI argument too:
 karma start --browsers PhantomJS_custom
 ```
 
+If you set the `debug` option to `true`, you will be instructed to launch a web browser to
+bring up the debugger. Note that you will want to put `debugger;` statements in your JavaScript
+to hit breakpoints. You should be able to put breakpoints in both your test code and your client
+code. Note that the `debug` option automatically adds the `--remote-debugger-port=9000` and
+`--remote-debugger-autorun=yes` switches to PhantomJS.
+
 ----
 
 For more information on Karma see the [homepage].

capture.template.js

@@ -0,0 +1,22 @@
+var system = require('system'),
+fs = require('fs'),
+webpage = require('webpage');
+
+(function (phantom) {
+  var page = webpage.create();
+
+  function debugPage() {
+    console.log('Launch the debugger page at http://localhost:9000/webkit/inspector/inspector.html?page=2');
+
+    var debuggerWait = 15000;
+    console.log('Waiting ' + (debuggerWait / 1000) + ' seconds for debugger page to launch...');
+
+    var launchPage = function () {
+      console.log('Launching page <%= url %>...');
+      page.open('<%= url %>');
+    };
+
+    setTimeout(launchPage, 15000);
+  }
+  debugPage();
+}(phantom));

index.js

@@ -1,5 +1,6 @@
 var fs = require('fs');
 var path = require('path');
+var _ = require('lodash');
 
 function serializeOption(value) {
   if (typeof value === 'function') {
@@ -22,7 +23,9 @@ var phantomJSExePath = function () {
   return phantomSource;
 };
 
-var PhantomJSBrowser = function(baseBrowserDecorator, config, args) {
+var PhantomJSBrowser = function(baseBrowserDecorator, config, args, logger) {
+  var log = logger.create('phantomjs.launcher');
+
   baseBrowserDecorator(this);
 
   var options = args && args.options || config && config.options || {};
@@ -43,14 +46,36 @@ var PhantomJSBrowser = function(baseBrowserDecorator, config, args) {
       }));
     }
 
-    var captureCode = 'var page = require("webpage").create();\n' +
+    var captureCode;
+    if (args.debug) {
+      flags = flags.concat('--remote-debugger-port=9000');
+      flags = flags.concat('--remote-debugger-autorun=yes');
+
+      var file = fs.readFileSync(path.join(__dirname, 'capture.template.js'));
+
+      var compiled = _.template(file.toString());
+      captureCode = compiled({url: url});
+
+    } else {
+      captureCode = 'var page = require("webpage").create();\n' +
         optionsCode.join('\n') + '\npage.open("' + url + '");\n';
+    }
+
     fs.writeFileSync(captureFile, captureCode);
 
     flags = flags.concat(captureFile);
 
     // and start phantomjs
     this._execCommand(this._getCommand(), flags);
+
+    if (args.debug) {
+      log.info('ACTION REQUIRED:');
+      log.info('');
+      log.info('  Launch browser at');
+      log.info('  http://localhost:9000/webkit/inspector/inspector.html?page=2');
+      log.info('');
+      log.info('Waiting 15 seconds ...');
+    }
   };
 };
 
@@ -65,7 +90,7 @@ PhantomJSBrowser.prototype = {
   ENV_CMD: 'PHANTOMJS_BIN'
 };
 
-PhantomJSBrowser.$inject = ['baseBrowserDecorator', 'config.phantomjsLauncher', 'args'];
+PhantomJSBrowser.$inject = ['baseBrowserDecorator', 'config.phantomjsLauncher', 'args', 'logger'];
 
 
 // PUBLISH DI MODULE

package.json

@@ -17,7 +17,8 @@
   ],
   "author": "Vojta Jina <vojta.jina@gmail.com>",
   "dependencies": {
-    "phantomjs": "~1.9"
+    "phantomjs": "~1.9",
+    "lodash": "~3.8.0"
   },
   "peerDependencies": {
     "karma": ">=0.9"