ng-form-devtools

ng-form-devtools helps you inspect Angular forms during development. It adds runtime form tracking to your app, creates structured snapshots, and provides the bridge for an upcoming Chrome DevTools experience focused on Angular forms.

Current Status

ng-form-devtools is currently a work in progress. Feedback, ideas, and bug reports are very welcome. The API and overall behavior are planned to be considered stable starting with v1.0.0.

The Chrome DevTools integration is also still evolving. A dedicated Chrome plugin is planned and this package already contains the foundation for that upcoming extension.

Install

npm install ng-form-devtools

Minimal Setup

import { provideExperimentalZonelessChangeDetection } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideFormDevtools } from 'ng-form-devtools';

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    provideFormDevtools({ bridge: 'window-message' })
  ]
});

Track a form inside an injection context:

import { Component } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { track } from 'ng-form-devtools';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `<form [formGroup]="form"></form>`
})
export class ExampleFormComponent {
  private readonly formBuilder = new FormBuilder();

  readonly form = this.formBuilder.group({
    firstName: [''],
    lastName: ['']
  });

  private readonly _tracked = track(this.form, 'profileForm');
}

Local Demo And Documentation

If you want to explore the project locally, clone the repository, install dependencies, and start the example app:

npm install
npm run dev

The example app currently acts as the easiest hands-on documentation for the package.

To test the Chrome DevTools integration locally:

1. Run npm run build:extension:chrome-devtools.
2. Open chrome://extensions.
3. Enable Developer Mode.
4. Click Load unpacked.
5. Select dist/extensions/chrome-devtools.
6. Open the example app in Chrome.
7. Open Chrome DevTools and switch to the Angular Forms panel.

More Information

• Repository: github.com/timtilch/ng-form-devtools
• Issues and feedback: github.com/timtilch/ng-form-devtools/issues