1. Augury: Chrome debug plugin for Angular
  2. Sources to debug
  3. WebStorm + JetBrains IDE Support



Augury: Chrome debug plugin for Angular



1.1 Augury installation



augury.angular.io/






1.2 Usage






1.2.1 Viewing the Component Structure







1.2.2 Viewing Properties/Methods/DI/source code







1.2.3 Component diagram







1.2.4 Routing Structure







2. The Sources and debugging



Sources to debug



F12
Sources
webpack://



  • If you use the Angular CLI, ng Serve provides the full sourcemap by default, with a simple mouse click
  • If you are using a self-configured Webpack environment (Devtool), you need to select sourcemap with the Module version to map the contents of the bundle back to the source file, such as cheap-module-eval-source-map.



3. WebStorm + JetBrains IDE Support






3.1 Installing JetBrains IDE Support



Chrome.google.com/webstore/ca…



3.2 WebStorm Debug Configuration






Run => Editing Configurations



JavaScript Debug




address
port




3.3 Adding a Breakpoint










The Debug conditions




3.4 Starting Debugging