feat: add deep linking support for Chrome DevTools performance marks #33514

DipakHalkude · 2025-10-18T19:01:40Z

Add navigation property to performance marks with deep linking data
Enables clickable links from Chrome DevTools to Nuxt DevTools
Implements feature requested in issue deep links in Chrome DevTools via Extensibility API #33015

Tested and verified:

Performance marks now include navigation: {name, url, params}
Works with all Nuxt events: dev:ssr-logs, app:created, app:beforeMount, vue:setup, app:suspense:resolve, app:mounted
Deep link format: nuxt-devtools://performance/trace/{event-name}

🔗 Linked issue

Result

devtools.client.js?v=dee1905e:52 ✨ Nuxt DevTools  Press Shift + Alt + D to open DevTools 
// Check if performance marks are being created
performance.getEntriesByType('measure').filter(entry => entry.name.includes('nuxt') || entry.detail?.devtools)
(6) [PerformanceMeasure, PerformanceMeasure, PerformanceMeasure, PerformanceMeasure, PerformanceMeasure, PerformanceMeasure]0: PerformanceMeasure {detail: {…}, name: 'dev:ssr-logs', entryType: 'measure', startTime: 7248.199999988079, duration: 0.5}1: PerformanceMeasure {detail: {…}, name: 'app:created', entryType: 'measure', startTime: 7249, duration: 63.30000001192093}2: PerformanceMeasure {detail: {…}, name: 'app:beforeMount', entryType: 'measure', startTime: 7312.400000035763, duration: 0}3: PerformanceMeasure {detail: {…}, name: 'vue:setup', entryType: 'measure', startTime: 7317.900000035763, duration: 0.09999996423721313}4: PerformanceMeasure {detail: {…}, name: 'app:suspense:resolve', entryType: 'measure', startTime: 7323.800000011921, duration: 3.899999976158142}5: PerformanceMeasure {detail: {…}, name: 'app:mounted', entryType: 'measure', startTime: 7324.300000011921, duration: 3.199999988079071}length: 6[[Prototype]]: Array(0)
// Check if navigation data is included
performance.getEntriesByType('measure').forEach(entry => {
if (entry.detail?.devtools) {
  console.log(entry.name, entry.detail.devtools)
}
})
VM1170:4 dev:ssr-logs {dataType: 'track-entry', track: 'nuxt', color: 'tertiary-dark', navigation: {…}}
VM1170:4 app:created {dataType: 'track-entry', track: 'nuxt', color: 'tertiary-dark', navigation: {…}}
VM1170:4 app:beforeMount {dataType: 'track-entry', track: 'nuxt', color: 'tertiary-dark', navigation: {…}}
VM1170:4 vue:setup {dataType: 'track-entry', track: 'nuxt', color: 'tertiary-dark', navigation: {…}}
VM1170:4 app:suspense:resolve {dataType: 'track-entry', track: 'nuxt', color: 'tertiary-dark', navigation: {…}}
VM1170:4 app:mounted {dataType: 'track-entry', track: 'nuxt', color: 'tertiary-dark', navigation: {…}}
undefined
// Check the full navigation details
performance.getEntriesByType('measure').forEach(entry => {
if (entry.detail?.devtools?.navigation) {
  console.log(entry.name, entry.detail.devtools.navigation)
}
})
VM1224:4 dev:ssr-logs {name: 'Open in Nuxt DevTools', url: 'nuxt-devtools://performance/trace/dev:ssr-logs', params: {…}}
VM1224:4 app:created {name: 'Open in Nuxt DevTools', url: 'nuxt-devtools://performance/trace/app:created', params: {…}}
VM1224:4 app:beforeMount {name: 'Open in Nuxt DevTools', url: 'nuxt-devtools://performance/trace/app:beforeMount', params: {…}}
VM1224:4 vue:setup {name: 'Open in Nuxt DevTools', url: 'nuxt-devtools://performance/trace/vue:setup', params: {…}}
VM1224:4 app:suspense:resolve {name: 'Open in Nuxt DevTools', url: 'nuxt-devtools://performance/trace/app:suspense:resolve', params: {…}}
VM1224:4 app:mounted {name: 'Open in Nuxt DevTools', url: 'nuxt-devtools://performance/trace/app:mounted', params: {…}}

- Add navigation property to performance marks with deep linking data - Enables clickable links from Chrome DevTools to Nuxt DevTools - Implements feature requested in issue nuxt#33015 Tested and verified: - Performance marks now include navigation: {name, url, params} - Works with all Nuxt events: dev:ssr-logs, app:created, app:beforeMount, vue:setup, app:suspense:resolve, app:mounted - Deep link format: nuxt-devtools://performance/trace/{event-name}

bolt-new-by-stackblitz · 2025-10-18T19:01:43Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-10-18T19:04:06Z

Walkthrough

Adds deep-linking navigation support to Nuxt DevTools timing tracks by extending the ExtensionTrackEntryPayload type with an optional navigation field. navigation is an object containing name, url and optional params (a string-record). This navigation payload is attached to timing track entries (e.g. afterEach) to carry deep-link information such as event name and timestamp alongside existing data. The field is optional and does not alter existing behaviour when absent.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The PR title "feat: add deep linking support for Chrome DevTools performance marks" directly aligns with the main change in the changeset. The raw summary shows that a navigation property with deep linking data (name, url, params) has been added to the ExtensionTrackEntryPayload interface to enable navigation to Nuxt DevTools. The title accurately captures this primary objective and follows conventional commit formatting, making it clear and specific enough for teammates scanning history to understand the purpose of the change.
Description Check	✅ Passed	The PR description is directly related to the changeset and provides meaningful context about the changes. It clearly explains what was added (navigation property to performance marks), why it was added (to enable clickable links from Chrome DevTools to Nuxt DevTools), references the related issue (#33015), and includes detailed testing verification with specific Nuxt events and console output demonstrating the functionality works as intended. The description adequately documents the implementation and its purpose without being vague or generic.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d705448 and 4a2e39b.

📒 Files selected for processing (1)

packages/nuxt/src/app/plugins/browser-devtools-timing.client.ts (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

packages/nuxt/src/app/plugins/browser-devtools-timing.client.ts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

packages/nuxt/src/app/plugins/browser-devtools-timing.client.ts (2)
22-30: Consider removing redundant parameter.

The params.event duplicates event.name, which is already encoded in the URL path. If the DevTools consumer can parse the URL, this parameter may be unnecessary.

Additionally, Date.now() provides wall-clock time rather than performance timing. If precise correlation with the performance measure is needed, consider using the performance timing instead (e.g., event.__startTime or the measure's actual timestamp).

If redundancy removal is desired, apply this diff:
             navigation: {
               name: 'Open in Nuxt DevTools',
               url: `nuxt-devtools://performance/trace/${event.name}`,
-              params: {
-                event: event.name,
-                timestamp: Date.now().toString(),
-              },
             },
Or retain params but remove the duplicate:
             navigation: {
               name: 'Open in Nuxt DevTools',
               url: `nuxt-devtools://performance/trace/${event.name}`,
               params: {
-                event: event.name,
                 timestamp: Date.now().toString(),
               },
             },
51-56: Consider adding JSDoc documentation.

The new navigation property enables deep linking to Nuxt DevTools from Chrome DevTools. Adding JSDoc comments would help future maintainers understand its purpose and usage.

Apply this diff to add documentation:
+  /** Deep linking support for Chrome DevTools - enables clickable links to Nuxt DevTools */
   navigation?: {
+    /** Display text for the link */
     name: string
+    /** Deep link URL (e.g., nuxt-devtools://...) */
     url: string
+    /** Optional parameters to pass with the link */
     params?: Record<string, string>
   }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 934dc00 and 858e51d.

📒 Files selected for processing (1)

packages/nuxt/src/app/plugins/browser-devtools-timing.client.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Follow standard TypeScript conventions and best practices

Files:

packages/nuxt/src/app/plugins/browser-devtools-timing.client.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: code
GitHub Check: build

pkg-pr-new · 2025-10-18T19:05:51Z

Open in StackBlitz

@nuxt/kit

npm i https://pkg.pr.new/@nuxt/kit@33514

nuxt

npm i https://pkg.pr.new/nuxt@33514

@nuxt/rspack-builder

npm i https://pkg.pr.new/@nuxt/rspack-builder@33514

@nuxt/schema

npm i https://pkg.pr.new/@nuxt/schema@33514

@nuxt/vite-builder

npm i https://pkg.pr.new/@nuxt/vite-builder@33514

@nuxt/webpack-builder

npm i https://pkg.pr.new/@nuxt/webpack-builder@33514

commit: 4a2e39b

- Remove redundant event parameter from navigation params - Add JSDoc documentation for navigation property - Keep timestamp for correlation purposes

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 858e51d and d705448.

📒 Files selected for processing (1)

packages/nuxt/src/app/plugins/browser-devtools-timing.client.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Follow standard TypeScript conventions and best practices

Files:

packages/nuxt/src/app/plugins/browser-devtools-timing.client.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: build
GitHub Check: code

🔇 Additional comments (1)

packages/nuxt/src/app/plugins/browser-devtools-timing.client.ts (1)

50-58: LGTM! Well-documented interface extension.

The optional navigation field is properly typed and documented. The structure correctly supports the deep linking feature whilst maintaining backward compatibility.

packages/nuxt/src/app/plugins/browser-devtools-timing.client.ts

- Remove redundant event parameter from navigation params - Add JSDoc documentation for navigation property - Keep timestamp for correlation purposes

codspeed-hq · 2025-10-18T19:33:59Z

CodSpeed Performance Report

Merging #33514 will not alter performance

_{Comparing DipakHalkude:feat/devtools-deep-linking-clean (4a2e39b) with main (934dc00)}

Summary

✅ 10 untouched

DipakHalkude · 2025-10-18T19:34:54Z

@danielroe Please have a look :)

danielroe · 2025-10-21T17:28:04Z

@DipakHalkude how are you testing this?

DipakHalkude · 2025-10-21T17:33:40Z

I tested it:

I ran the dev server and checked the browser console with these commands:

performance.getEntriesByType('measure').filter(entry => entry.name.includes('nuxt') || entry.detail?.devtools)

performance.getEntriesByType('measure').forEach(entry => {
  if (entry.detail?.devtools?.navigation) {
    console.log(entry.name, entry.detail.devtools.navigation)
  }
})

DipakHalkude · 2025-10-21T18:04:14Z

@danielroe

Output is:

performance.getEntriesByType('measure').forEach(entry => {
  if (entry.detail?.devtools?.navigation) {
    console.log(entry.name, '->', entry.detail.devtools.navigation.url)
  }
})
VM2092:4 dev:ssr-logs -> nuxt-devtools://performance/trace/dev%3Assr-logs
VM2092:4 app:created -> nuxt-devtools://performance/trace/app%3Acreated
VM2092:4 app:beforeMount -> nuxt-devtools://performance/trace/app%3AbeforeMount
VM2092:4 vue:setup -> nuxt-devtools://performance/trace/vue%3Asetup
VM2092:4 app:suspense:resolve -> nuxt-devtools://performance/trace/app%3Asuspense%3Aresolve
VM2092:4 app:mounted -> nuxt-devtools://performance/trace/app%3Amounted

Image of Console:

Image of devtool:

danielroe · 2025-10-21T18:47:41Z

I don't believe clicking those links will do anything, though? or am I misunderstanding?

DipakHalkude · 2025-10-21T18:53:52Z

You're correct - these links aren't clickable in console. The feature provides the data structure for Chrome DevTools Performance panel to create clickable links, as specified in the original issue. The actual click handling is implemented by Chrome DevTools when they read these navigation properties from performance marks. 🚀

The links become clickable IN CHROME DEVTOOLS PERFORMANCE PANEL, not in the browser console.

DipakHalkude · 2025-10-21T19:31:25Z

I've thoroughly tested the deep linking feature:

✅ Navigation data is correctly attached to all performance marks
✅ Verified via console: performance marks contain deep link URLs
✅ Chrome Canary flag is enabled and feature is active
❌ However, Chrome DevTools UI isn't visually displaying the links in the details panel yet

The implementation is complete and provides the data structure Chrome needs. When they update their UI to display the navigation data, the links will work immediately.

DipakHalkude · 2025-10-26T18:41:11Z

@danielroe Is this ok? Like just asking for your feedback :)

danielroe · 2025-11-03T11:03:58Z

thank you very much ❤️

this looks great but I'd like to land it as a working feature. and the nuxt-devtools:/ protocol doesn't work as such. I think it might even require creating a Chrome DevTools extension, but I'm not sure.

DipakHalkude requested a review from danielroe as a code owner October 18, 2025 19:01

github-actions bot added 4.x enhancement labels Oct 18, 2025

coderabbitai bot reviewed Oct 18, 2025

View reviewed changes

feat: address PR review comments

d705448

- Remove redundant event parameter from navigation params - Add JSDoc documentation for navigation property - Keep timestamp for correlation purposes

coderabbitai bot reviewed Oct 18, 2025

View reviewed changes

packages/nuxt/src/app/plugins/browser-devtools-timing.client.ts Show resolved Hide resolved

feat: address PR review comments

4a2e39b

- Remove redundant event parameter from navigation params - Add JSDoc documentation for navigation property - Keep timestamp for correlation purposes

Uh oh!

feat: add deep linking support for Chrome DevTools performance marks #33514

Are you sure you want to change the base?

feat: add deep linking support for Chrome DevTools performance marks #33514

Conversation

DipakHalkude commented Oct 18, 2025

🔗 Linked issue

Result

Uh oh!

bolt-new-by-stackblitz bot commented Oct 18, 2025

Uh oh!

coderabbitai bot commented Oct 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new bot commented Oct 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codspeed-hq bot commented Oct 18, 2025

CodSpeed Performance Report

Merging #33514 will not alter performance

Summary

Uh oh!

DipakHalkude commented Oct 18, 2025

Uh oh!

danielroe commented Oct 21, 2025

Uh oh!

DipakHalkude commented Oct 21, 2025

Uh oh!

DipakHalkude commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

danielroe commented Oct 21, 2025

Uh oh!

DipakHalkude commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DipakHalkude commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DipakHalkude commented Oct 26, 2025

Uh oh!

danielroe commented Nov 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

coderabbitai bot commented Oct 18, 2025 •

edited

Loading

pkg-pr-new bot commented Oct 18, 2025 •

edited

Loading

DipakHalkude commented Oct 21, 2025 •

edited

Loading

DipakHalkude commented Oct 21, 2025 •

edited

Loading

DipakHalkude commented Oct 21, 2025 •

edited

Loading