Debugging Angular PatternFly
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”:
*I use this JetBrains Chrome Extension
In WebStorm it should stop on the breakpoint:
-
Run -> Edit Configuration… -> "+" Javascript:
-
grunt serveor click on ‘serve’ in WebStorm’s Grunt panel. -
Run -> Debug… -> ‘ngdocs’. Should launch a second browser window with top yellow debug bar.
-
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.
-
In the browser with the yellow debug bar, click on the ngDoc example for the component. Should stop at breakpoint in component:
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.jswhich 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](#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:
