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. 

NodeJS Debugging with WebStorm

WebStorm makes getting started with NodeJS a breeze. I made a short video tutorial to show this that you can check out on youtube http://www.youtube.com/watch?v=6bKsDoFj83o also embedded below:

Webstorm Error : XMLHttpRequest cannot load file. Origin null is not allowed by Access-Control-Allow-Origin

This happens because XMLHttpRequest is not allowed by default in any web browser when running off the local file system.

One way around that is to run in a web server but for simple quick scripts that might be an overkill.

Here's how you can run your site in webstorm without a web server: 

There is a simple flag --allow-file-access-from-files you can set in Chrome to overcome this. Go to your settings:

Then Web Browsers and click on Settings button next to chrome:

Put in the flag and get cracking:

Make sure you have all instances of chrome closed before you start a debug session because the command line flag will only work on a fresh launch of the browser.

Update: or you could always use (for webstorm 6+) : http://localhost:63342/Your_Project_Name which is the built-in web server inside WebStorm.

See how to do it here: