BT

Facilitating the spread of knowledge and innovation in professional software development

Contribute

Topics

Choose your language

InfoQ Homepage News Angular DevTools Released, Includes Component Explorer and Profiler

Angular DevTools Released, Includes Component Explorer and Profiler

Bookmarks

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.

We need your feedback

How might we improve InfoQ for you

Thank you for being an InfoQ reader.

Each year, we seek feedback from our readers to help us improve InfoQ. Would you mind spending 2 minutes to share your feedback in our short survey? Your feedback will directly help us continually evolve how we support you.

Take the Survey

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.