Skip to content

Comments

Adds sourcemaps and a debug build to Angular DevTools#67189

Open
dgp1130 wants to merge 3 commits intoangular:mainfrom
dgp1130:devtools-debug
Open

Adds sourcemaps and a debug build to Angular DevTools#67189
dgp1130 wants to merge 3 commits intoangular:mainfrom
dgp1130:devtools-debug

Conversation

@dgp1130
Copy link
Contributor

@dgp1130 dgp1130 commented Feb 21, 2026

This makes three changes:

  • It introduces source maps in both dev and production on the basis that they are cheap for end users in a DevTools context (where bundle size is less important and linked sourcemaps avoids processing them) and occasionally useful when debugging weird issues.
  • It disables minification of dev builds, so even if sourcemaps aren't available, it's easier to inspect the extension.
  • Documents how to load a dev build of the extension and where to find all the relevant scripts, given they are scattered in weird and unintuitive locations if you're not familiar with how extensions work.

This adds source maps to both the dev and production builds. Since this project is open source and downloaded ahead of time, there is not much negative cost to shipping source maps in production, as this can help any developers who encounter bugs related to Angular DevTools on the page.

There is a slight performance cost to both processing the `sourceMappingURL` comment _and_ actually processing the sourcemaps. Ideally, we would use linked sourcemaps all the time, as this avoids processing this and parses only a trivial comment unless the user actually opens a debugger. Unfortunately, Chrome seems to fail to load linked sourcemaps for scripts injected into the user's page (the backend script and content scripts), so these need inlined sourcemaps to work, which somewhat increases the performance cost. These scripts should be small enough to not be a major issue, but we can consider removing them in production based on signal from the community if necessary.
This disables esbuild minification when building DevTools in debug mode, introducing a new `//devtools:debug` flag and a `pnpm run devtools:build:chrome:dev` script to trigger it. This should make debugging a little easier.
This adds instructions on how to load and debug the Angular DevTools extension in Chrome locally, including where all the relevant sources are.
@dgp1130 dgp1130 requested a review from hawkgs February 21, 2026 01:20
@dgp1130 dgp1130 added action: review The PR is still awaiting reviews from at least one requested reviewer target: patch This PR is targeted for the next patch release labels Feb 21, 2026
@pullapprove pullapprove bot requested a review from alan-agius4 February 21, 2026 01:20
@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: docs Related to the documentation area: devtools labels Feb 21, 2026
@ngbot ngbot bot modified the milestone: Backlog Feb 21, 2026
@dgp1130
Copy link
Contributor Author

dgp1130 commented Feb 21, 2026

/cc @csmick

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

action: review The PR is still awaiting reviews from at least one requested reviewer area: devtools area: docs Related to the documentation detected: feature PR contains a feature commit target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant