debugging-angular | Debugging Angular with Visual Studio Code | Code Editor library

63276 is the port debugger is started on, it should not match the port your server is listening on. Please make sure to close all running Chrome instances prior to starting the debugger - as it's written in the error message, debug port can't be opened if you have a running Chrome with your user data. See https://www.jetbrains.com/help/webstorm/configuring-javascript-debugger.html#ws_js_debug_default_chrome_user_data:

To open a new Chrome instance with your familiar look-and-feel, configure Chrome in WebStorm to start with your user data. In this case, before starting a debugging session, always make sure that Chrome is not already running with your user data. Otherwise WebStorm still launches another instance of Chrome with your user data but is unable to open a debugging port for it. As a result, WebStorm debugger fails to connect to the application in the new Chrome instance and the debugging session does not start.

Adding one NPM run configuration to Before launch section won't work, as the main process will wait for return code from the process run in Before launch (and won't start until it is terminated). This is the way 'before launch' is designed - it's supposed to be used to run some sort of pre-processing before running the main process. If you need both processes to be debugged in parallel, you can try the custom Multirun plugin:

Update: since 2018.1, you can also use Compound run configuration for this. the only disadvantage (as compared to Multirun) is that it's not possible to specify the execution order and delays, so both configurations will be run simultaneously, and you will have the refresh the browser once the webpack build completes

Debugging info is enabled by default during development in Angular2.

Debugging tools need to be enabled with enableDebugTools

For production enableProdMode() should be called to get rid of debug information that slows down your application and increases code size.

For details how to access debug info from the console see how to access Angular2 component specific data in console?

https://augury.angular.io/ provides a browser Plugin with a graphical UI

Because an Angular application is built for deployment, the options need to be enabled when the application is built, otherwise it won't be included in the deployable.