Debug Angular in VSCode and Chrome

In this blog, I will introduce how to debug an Angular Application step by step.

  1. Though angular devtools extension for chrome is not the subject of this blog, I think it is a prerequisite for all Front-end developers. Coz it is recommended by Angular.io angular dev tool
  2. Let's go! First, Install the extension: Debugger for Chrome. debugger extension
  3. Create a launch.json file. launch file launch file launch file
  4. Toggle breakpoint breakpoint
  5. Run and Debug debug browser
  6. Application jump backs to vscode from chrome browser when it encounters the breakpoints. browser