Debugging Angular PatternFly

How to Debug Angular-PatternFly Components in WebStorm

You will need to install a JetBrains browser plug-in/extension. I use this JetBrains Chrome Extension

Run -> Edit Configuration… -> "+" Javascript:
grunt serve or click on ‘serve’ in WebStorm’s Grunt panel.
Run -> Debug… -> ‘ngdocs’. Should launch a second browser window with top yellow debug bar which says "JetBrains IDE Support" is debugging this browser”:

Open up docs/grunt-scripts/angular-patternfly.js which is a single file which contains all the angular-patternfly components, find component code, set breakpoint by clicking in left hand gutter, next to line you want to WebStorm to break for.
In the browser with the yellow debug bar, click on the ngDoc example for the component. Should stop at breakpoint in component:

You will need to install a JetBrains browser plug-in/extension. I use this JetBrains Chrome Extension

In WebStorm: Run -> Edit Configurations. Click on top green "+", select Karma. Fill in as follows:
Open up a test file in the test directory, set a breakpoint:
Run -> Debug… -> ‘a-pf unit tests’ (or whatever you named the debug config)
Should see a browser window open with yellow bar on top which says "JetBrains IDE Support" is debugging this browser”:

In WebStorm it should stop on the breakpoint:

Note: This is an alternative to debugging the component in WebStorm as described in previous section.

angular-patternfly> grunt serve
In Chrome, left click -> Inspect -> Sources Tab. Open up grunt-scripts\angular-patternfly.js which is a single file which contains all the angular-patternfly components. Search for a component and set a breakpoint in the file, then click on that component’s ngDoc link, should stop at breakpoint.

Note: this is the source code for the component, to debug ngDoc example code see How to Debug ngDoc example code in Chrome

The ngDoc example code is actually commented out in the source files, so we can’t set a breakpoint there. To actually set a breakpoint in the ngDoc example for the component you must first click on it’s link in the ngDocs, once that is done you’ll notice a new Javascript file is generated for that ngDoc under Sources -> (no domain). Click on the new js partial file which was just generated and set a breakpoint. Now reload the ngDoc example, breakpoint should be hit: