Angular DevTools Released, Includes Component Explorer and Profiler

Write for InfoQ

Minko Gechev, software engineer working on Angular at Google, recently announced the Angular DevTools Chrome extension. Angular DevTools includes a component explorer and profiler that let developers visualize component trees and analyze change detection cycles. Angular DevTools supports applications built with Angular v9 and above with Ivy enabled.

Gechev summarized the motivation behind the Angular DevTools as follows:

Based on the results we received from external and internal studies we identified the following areas which need the most attention:

• Improvements in error messages
• Understanding change detection execution
• Understanding injector hierarchy and provider instantiation
• Visualization of component structure
  [...]
  To address [the second and fourth concerns] and provide an Angular-specific view based on the Chrome DevTools features, we developed Angular DevTools.

Angular DevTools includes a component explorer where developers can preview the component tree of an Angular application:

Angular DevTools component explorer

The component explorer displays components’ metadata, properties, inputs and outputs in the right panel. Developers can modify properties directly in the developer tool user interface, and see the changes immediately reflected in the Angular application.

Angular DevTools also includes a profiler that developers may use to identify possible performance bottlenecks. The profiler lets developers preview change detection cycles as they occur in real time:

Angular DevTools profiler

Each bar in the timeline corresponds to a separate change detection cycle. By selecting a bar, developers can see what triggered change detection, how much time Angular spends in the change detection phase, and whether the current cycle costs any frame drops. The profiler additionally includes a flame graph and treemap visualizations to better understand the execution of change detection cycles. An example of treemap visualization is as follows:

Tree map visualization

While Angular developers could already profile Angular applications in the regular Chrome DevTools, Angular DevTools arguably provide an Angular-centric experience, with possible productivity gains when debugging and profiling applications.

Developers will find all necessary instructions to install the Angular DevTools and a quick demonstration in a separate video available online.

Angular is open source software distributed under the MIT license. Contributions are welcome via the Angular GitHub repository.

Related Topics:

• Development
• Chrome
• Web Browser
• Code Profiler
• Web Development
• Profilers
• Chrome OS
• Angular
• Operating Systems

We protect your privacy.