Angular - Debugging Step by Step in Browser - Theory

Debugging an Angular project in the browser involves using various tools provided by modern web browsers, primarily developer tools. Here's a step-by-step guide to debugging an Angular project in the browser:

1. Open developer tools:

• Launch your preferred web browser (such as Chrome, Firefox, or Edge).
• Open Developer Tools by pressing F12 or Ctrl + Shift + I (Windows/Linux) or Cmd + Opt + I (Mac).

2. Navigate to the "Sources" tab:

• In the Developer Tools window, navigate to the "Source" tab This tab allows you to view and debug your project's source code.

3. Set the breakpoint:

• Locate the JavaScript or TypeScript files associated with your Angular project in the "Sources" tab
• Click on the line number where you want to set a breakpoint. This will pause the execution of your code when the action is reached.
• You can set breakpoints directly in TypeScript files and the browser will map them to the corresponding JavaScript files.

4. Inspect variables and execution:

• When the code is paused at a breakpoint, you can check the current state of variables and objects by hovering over them or using the debugging console.
• Use the "Scope" panel to inspect the variables available in the current context

5. Step through the code:

• Use the controls provided in the developer tools to step through your code:
• Step Over (F10): Execute the current line and move to the next line.
• Step Into (F11): If the current line calls a function, step into that function.
• Step Out (Shift + F11): Exit the current function and return to its caller.
• Resume Script Execution (F8): Continue executing the script until the next breakpoint is encountered.

6. Console logging:

• Use the console.log() statement in your code to log relevant information to the console. This method helps to track execution flow and inspect variable values.

7. Network tab:

• Use the "Network" tab to monitor HTTP requests and responses made by your Angular application This tab provides valuable insight into your application's network activity.

8. Application Status:

• Use the "Applications" tab to inspect the application's local storage, session storage, cookies, and IndexedDB.

9. Performance Analysis:

• Use the "Performance" tab to profile your application's performance, identify bottlenecks, and optimize its speed.

By following these steps and using the debugging tools provided by modern web browsers, you can effectively debug your Angular project in the browser.