Selecting a DOM Node for Inspection

When you're tracking down a bug, you often need to grab a specific element from the page to inspect or modify it. Instead of manually scrolling through the DOM tree or writing a complex query selector, you can rely on tools like Chrome's element picker or the handy global reference $0.

Accessing DOM Nodes Efficiently

During a debugging session, you'll frequently find the need to single out an element. A faster approach than digging through the DOM hierarchy is to use Chrome's picker tool. Once you've selected an element this way, it's automatically assigned to the global variable $0, making it immediately accessible in the console.

1

Angular ng.global

Angular provides a set of powerful debugging utilities that are accessible through the global ng object. When your app is running in development mode, these functions are available and can give you deep insights into the state of your application.

Read more about ngGlobal

Using Ng Debugging Functions

These built-in Angular functions allow you to interact with component instances directly, offering the ability to inspect and even manipulate them in real time. Here's a look at some of the most useful ones:

ng.getComponent

This function grabs the component instance that is attached to a given DOM element.

const component = ng.getComponent($0);
console.log(component);
Enter fullscreen mode Exit fullscreen mode

2

ng.applyChanges

This function signals that a component needs to be checked and then triggers a synchronous change detection cycle for the application it belongs to.

const component = $0;
ng.applyChanges(component);
Enter fullscreen mode Exit fullscreen mode

ng.getContext

If the element is inside an embedded view (like one created by ngIf or ngFor), this function returns the context of that view. Otherwise, it returns the instance of the component that owns the view containing the element.

const context = ng.getContext($0);
console.log(context);
Enter fullscreen mode Exit fullscreen mode

3

ng.getDirectiveMetadata

This function provides the debug metadata for a specific directive or component. By passing an instance of a directive or component, you receive its corresponding metadata as the return value.

const metadata = ng.getDirectiveMetadata($0);
console.log(metadata);
Enter fullscreen mode Exit fullscreen mode

Mastering these functions can significantly speed up the process of isolating and fixing issues in your Angular apps, leading to a more streamlined development experience.

I recommend checking out the official Angular documentation to read more ng global https://angular.io/api/core/global

Angular DevTools: A Powerful Debugging Extension

Angular DevTools is a browser extension available for Chrome and Firefox that enhances your ability to debug and profile Angular applications. It is most effective when used with Angular v12 or newer, provided your application is built with the optimization flag disabled ({optimization:false}).

Once installed, you'll find the extension under the Angular tab in your browser's developer tools. This tab contains two primary sections:

  • Components: This section allows you to explore the component and directive tree of your app. From here, you can inspect and even modify the state of these instances.

  • Profiler: This section is used for performance analysis. It helps you pinpoint performance bottlenecks that occur during the change detection process.

Additionally, the extension displays the Angular version currently in use and the latest commit hash of the extension itself.

4

Debugging with Angular DevTools

Angular DevTools gives you a clear visual representation of your application's structure. You can navigate the tree of components and directives, using your mouse or keyboard shortcuts to view details and properties of any given node.

5

From the properties view, you have the ability to directly change property values and gain access to the selected component or directive instances.

Profiling Your Application

The Profiler tab is a valuable tool for recording how Angular performs change detection. It provides detailed event information that can be visualized in a bar chart format, illustrating the activity of each component during every change detection cycle.

6

This tab allows you to see exactly how Angular detects changes and offers useful event information. It presents this data as a simple bar chart that shows each component's activity at every step. Furthermore, it includes a flame graph view that displays each item's position in the render tree and the time it took for change detection to process it.

If you want to learn more, check out the official video from the Google team.

Angular DevTool Chrome Extension

Debugging through VS Code

Visual Studio Code (VS Code) provides its own set of powerful debugging capabilities for Angular projects, complementing the built-in tools. Here’s how you can leverage the editor for client-side debugging.

Placing a Breakpoint

Begin by opening app.component.ts and placing a breakpoint. Click directly in the gutter—the area to the left of the line numbers—at the desired line. A red dot will appear, marking your breakpoint location.

7

Debugger Setup

Next, configure the debugger. Open the Run and Debug panel with Ctrl+Shift+D, then click the gear icon. This action generates a launch.json configuration file for the debugger.

8

From the Select debugger dropdown, pick ng-serve. This will create a launch.json file inside a newly created .vscode directory in your project root, complete with a configuration for launching your site.

To start debugging and launch a fresh browser window, press F5 or click the green play button. Note that the breakpoint may not trigger immediately because the code executes before the debugger attaches. Refresh the page, and the breakpoint should then work as expected.

22

Once active, you can step through your code with (F10), examine variables like AppComponent or `ProductService`, and review the call stack for your client-side Angular application.

10

With these tools at your disposal, debugging Angular code inside VS Code becomes far more straightforward and productive.

Wrap-Up

To sum it up, we examined Angular debugging practices, looked at Chrome's Angular DevTools extension, and reviewed Visual Studio Code's debugging features—providing you with the tools and strategies for a smoother, more effective development workflow.