Debugging AngularJS Source with WebStorm

The great thing about AngularJS is that it comes with a very full featured test suite. This means that you can use tests if you:

• want to play around and try to add new features in AngularJS 
• or try to understand AngularJS internals

This is my quick guide on the steps I had to carry out to debug the code I downloaded. I'll be using windows and webstorm. Some of these are pretty standard steps if you know nodejs + karma but should be helpful nonetheless. All commands should be run the from main AngularJS folder. The git root folder (whatever you want to call it). Not the src folder. In particular the folder where you have package.json , Gruntfile.js, karma-config-* files.

Get AngularJS source

Download (git clone) from https://github.com/angular/angular.js

Make sure you have NodeJS installed 

A pretty painless task: http://www.youtube.com/watch?v=VLncCs8bdI0

Install the pre requisite global NodeJS packages

You need grunt and karma. Pretty painless after you have node: 

npm install -g grunt

npm install -g karma 

Download AngularJS prerequisite NodeJS packages

Run:

npm install

from the main AngularJS folder. This will basically read package.json and download any prerequisites. 

Setup your CHROME_BIN

I have this environment variable pointing to my chrome.exe (not chrome canary).

Build Angular

Build AngularJS (required if you want to run the tests):

grunt build

Run the karma server

Simple command: 

karma start karma-modules.conf.js --no-single-run --auto-watch --reporters dots

This should start chrome + run the tests (module tests in this case as I ran karma-modules.conf.js) 

Leave this command (i.e. karma) running in the background.

Now setup debug environment in WebStorm

Create a new WebStorm project from your AngularJS folder. Edit your run configurations: 

(Don't mind that I already have debug karma setup, you will not). 

Add a remote debug config: 

Add set it up as follows. Call it whatever you want but url to open and remote url are important: 

http://localhost:9876/debug.html

http://localhost:9876/base

Great. Now set a breakpoint, Start debugging and watch the magic happen. 

Origin null is not allowed by Access-Control-Allow-Origin Chrome fix

When working on simple html prototypes that don't really need a backend server (Single page app prototypes). You often need to load html / js files from disk. This is disallowed for your protection by default and you will get errors like:

Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. file:///D:/asdf.html
XMLHttpRequest cannot load file:///D:/asdf.html. Origin null is not allowed by Access-Control-Allow-Origin. 

Simple solution for chrome: Start with --allow-file-access-from-files option :

chrome --allow-file-access-from-files