feat(devtools): add transfer state tab #62465

Avcharov · 2025-07-04T08:04:46Z

The commit message follows our guidelines: https://github.com/angular/angular/blob/main/contributing-docs/commit-message-guidelines.md
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

Bugfix
Feature
Code style update (formatting, local variables)
Refactoring (no functional changes, no api changes)
Build related changes
CI related changes
Documentation content changes
angular.dev application / infrastructure changes
Other... Please describe:

What is the current behavior?

transfer state is visible only on elements tab in ng-state script.

Issue Number: #62237

What is the new behavior?

Did workaround with adding of new transfer state tab. Still consider solution with transfer state list in components tab intead of proposed. Let me know which one is prefered.

Demo:

Does this PR introduce a breaking change?

Yes
No

Avcharov · 2025-07-04T08:05:30Z

Help needed:

In presented solution it looks for transferState script only by ng-state id. However if APP_ID would not be default it will not work. How to inject APP_ID from debugged applications?
I used material for layout if needed can be edited to custom solution.

devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts

devtools/projects/ng-devtools-backend/src/lib/ng-debug-api/ng-debug-api.ts

devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts

devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts

...ools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.scss

...ools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.html

JeanMeche · 2025-07-08T17:39:27Z

packages/core/src/render3/util/transfer_state_utils.ts

+  const doc = getDocument();
+
+  const appId = injector.get(APP_ID);
+  const scriptId = appId + '-state';
+  const script = doc.getElementById(scriptId) as HTMLScriptElement;
+
+  if (!script) {
+    return {};
+  }
+
+  if (!script.textContent || script.textContent.trim() === '') {
+    return {};
+  }
+  return JSON.parse(script.textContent) as Record<string, unknown>;


This can basically be replaced by retrieveTransferredState() located in transfer_state.ts (we'll need to export it first).

I would expect this function to strip internal framework keys from packages/core/src/hydration/utils.ts : __nghData__ & __nghDeferData__ which are used for (incremental) hydration and don't have real meaning for developers.

devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts

devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html

...ools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.html

devtools/projects/ng-devtools-backend/src/lib/ng-debug-api/ng-debug-api.ts

devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts

JeanMeche · 2025-07-18T23:54:23Z

@Avcharov I've allowed myself to force push an update following the merge of #62627

AndrewKushnir

Looks great, just left one comment.

packages/core/src/render3/util/transfer_state_utils.ts

AndrewKushnir

@JeanMeche thanks for the update, I've left a comment with a couple of suggestions.

AndrewKushnir · 2025-07-20T04:13:27Z

packages/core/src/hydration/utils.ts

+/**
+ * Set of transfer state keys that are used internally by the framework
+ */
+export const internalHydrationTransferStateKeys = [
+  TRANSFER_STATE_TOKEN_ID,
+  TRANSFER_STATE_DEFER_BLOCKS_INFO,
+];
+


I'd like to propose a couple of changes:

Create a function (instead of an array) as mentioned below

Use the function to filter out such keys from the transfer state (in the logic inside of getTransferState)

For tests, we can use regular hydration specs as a base, just add a few more keys to the transfer state and after that assess whether getTransferState returns only public/application keys

Suggested change

/**

* Set of transfer state keys that are used internally by the framework

*/

export const internalHydrationTransferStateKeys = [

TRANSFER_STATE_TOKEN_ID,

TRANSFER_STATE_DEFER_BLOCKS_INFO,

];

/**

* Checks whether a given key is used by the framework for transferring hydration data.

*/

export function isInternalHydrationTransferStateKey(key: string): boolean {

return key === TRANSFER_STATE_TOKEN_ID || key === TRANSFER_STATE_DEFER_BLOCKS_INFO;

}

I've extracted the core part of this PR into a separate PR #62722

JeanMeche · 2025-07-20T22:56:01Z

Blocked on #62722
We'll split the core part of this PR into a separate one to simplify the review !

Avcharov · 2025-07-21T09:49:09Z

@JeanMeche what you think about adding checkbox "Hide internal keys" on top of the page to hide hydration and other internal keys conditionally?

As sometimes maybe that keys can be useful, as @eneajaho mentioned in this PR

JeanMeche · 2025-07-21T11:36:40Z

That could an idea, but let's keep that for as a follow-up and let's try to land this PR first 🙂

JeanMeche · 2025-07-21T21:11:45Z

PR is now unblocked, we need a final approval and we can send it to the merge queue !

dgp1130

This all looks good to me, happy to merge this as is and we can iterate more as we move forward with it.

Thanks @Avcharov for contributing this! It's a very cool addition to Angular DevTools.

Add transfer state tab, which is taking transfer state script by using APP_ID. Created internal api ɵgetTransferState to retrieve transfer state value from app into devtools app.

thePunderWoman

LGTM!

reviewed-for: fw-general

kirjs · 2025-07-22T12:41:12Z

This PR was merged into the repository by commit a2f366f.

The changes were merged into the following branches: main

angular-automatic-lock-bot · 2025-08-22T00:12:52Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

pullapprove bot requested a review from AleksanderBodurri July 4, 2025 08:04

angular-robot bot added detected: feature PR contains a feature commit area: devtools labels Jul 4, 2025

ngbot bot added this to the Backlog milestone Jul 4, 2025

alan-agius4 reviewed Jul 4, 2025

View reviewed changes

JeanMeche reviewed Jul 4, 2025

View reviewed changes

devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts Outdated Show resolved Hide resolved

hawkgs reviewed Jul 4, 2025

View reviewed changes

...ools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.scss Show resolved Hide resolved

hawkgs reviewed Jul 4, 2025

View reviewed changes

...ools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.scss Outdated Show resolved Hide resolved

hawkgs reviewed Jul 4, 2025

View reviewed changes

...ools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.scss Outdated Show resolved Hide resolved

hawkgs reviewed Jul 4, 2025

View reviewed changes

...ools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.html Outdated Show resolved Hide resolved

hawkgs reviewed Jul 4, 2025

View reviewed changes

...ools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.html Outdated Show resolved Hide resolved

Avcharov force-pushed the devtools/transfer-state-tab branch 2 times, most recently from eb9c225 to a331ee5 Compare July 7, 2025 09:44

pullapprove bot requested a review from AndrewKushnir July 7, 2025 09:44

Avcharov requested review from JeanMeche, alan-agius4 and hawkgs July 7, 2025 09:46

Avcharov force-pushed the devtools/transfer-state-tab branch from a331ee5 to 5ca05aa Compare July 8, 2025 11:53

JeanMeche reviewed Jul 8, 2025

View reviewed changes

devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts Show resolved Hide resolved

JeanMeche reviewed Jul 8, 2025

View reviewed changes

devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts Outdated Show resolved Hide resolved

JeanMeche reviewed Jul 8, 2025

View reviewed changes

devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts Outdated Show resolved Hide resolved

JeanMeche reviewed Jul 8, 2025

View reviewed changes

devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html Outdated Show resolved Hide resolved

JeanMeche reviewed Jul 8, 2025

View reviewed changes

...ools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.html Outdated Show resolved Hide resolved

hawkgs reviewed Jul 9, 2025

View reviewed changes

devtools/projects/ng-devtools-backend/src/lib/ng-debug-api/ng-debug-api.ts Show resolved Hide resolved

hawkgs reviewed Jul 9, 2025

View reviewed changes

devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts Outdated Show resolved Hide resolved

hawkgs reviewed Jul 9, 2025

View reviewed changes

devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts Outdated Show resolved Hide resolved

hawkgs reviewed Jul 9, 2025

View reviewed changes

devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts Outdated Show resolved Hide resolved

hawkgs reviewed Jul 9, 2025

View reviewed changes

devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts Outdated Show resolved Hide resolved

JeanMeche approved these changes Jul 18, 2025

View reviewed changes

JeanMeche force-pushed the devtools/transfer-state-tab branch from 93d523a to 9c20601 Compare July 18, 2025 23:53

JeanMeche removed request for AleksanderBodurri, alan-agius4 and hawkgs July 18, 2025 23:59

AndrewKushnir reviewed Jul 19, 2025

View reviewed changes

packages/core/src/render3/util/transfer_state_utils.ts Outdated Show resolved Hide resolved

AndrewKushnir reviewed Jul 20, 2025

View reviewed changes

JeanMeche added the state: blocked label Jul 20, 2025

JeanMeche force-pushed the devtools/transfer-state-tab branch from 7be7172 to 9c20601 Compare July 20, 2025 23:00

JeanMeche force-pushed the devtools/transfer-state-tab branch from 9c20601 to 35a701d Compare July 21, 2025 21:09

JeanMeche removed the state: blocked label Jul 21, 2025

JeanMeche force-pushed the devtools/transfer-state-tab branch from 35a701d to 7ec3fc2 Compare July 21, 2025 21:10

JeanMeche force-pushed the devtools/transfer-state-tab branch from 7ec3fc2 to 037febd Compare July 21, 2025 22:01

dgp1130 approved these changes Jul 21, 2025

View reviewed changes

feat(devtools): add transfer state tab

03f1d92

Add transfer state tab, which is taking transfer state script by using APP_ID. Created internal api ɵgetTransferState to retrieve transfer state value from app into devtools app.

JeanMeche force-pushed the devtools/transfer-state-tab branch from 037febd to 03f1d92 Compare July 21, 2025 22:24

thePunderWoman approved these changes Jul 22, 2025

View reviewed changes

JeanMeche added action: merge The PR is ready for merge by the caretaker target: minor This PR is targeted for the next minor release labels Jul 22, 2025

kirjs closed this in a2f366f Jul 22, 2025

hybrist mentioned this pull request Jul 23, 2025

release: bump Angular DevTools version to 1.0.40 #62767

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 22, 2025

feat(devtools): add transfer state tab #62465

feat(devtools): add transfer state tab #62465

Uh oh!

Conversation

Avcharov commented Jul 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Uh oh!

Avcharov commented Jul 4, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JeanMeche Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JeanMeche Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JeanMeche commented Jul 18, 2025

Uh oh!

AndrewKushnir left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

AndrewKushnir left a comment

Choose a reason for hiding this comment

Uh oh!

AndrewKushnir Jul 20, 2025

Choose a reason for hiding this comment

Uh oh!

JeanMeche Jul 20, 2025

Choose a reason for hiding this comment

Uh oh!

JeanMeche commented Jul 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Avcharov commented Jul 21, 2025

Uh oh!

JeanMeche commented Jul 21, 2025

Uh oh!

JeanMeche commented Jul 21, 2025

Uh oh!

dgp1130 left a comment

Choose a reason for hiding this comment

Uh oh!

thePunderWoman left a comment

Choose a reason for hiding this comment

Uh oh!

kirjs commented Jul 22, 2025

Uh oh!

angular-automatic-lock-bot bot commented Aug 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

Avcharov commented Jul 4, 2025 •

edited

Loading

JeanMeche Jul 8, 2025 •

edited

Loading

JeanMeche commented Jul 20, 2025 •

edited

Loading