feat(nuxt): add integration with chrome devtools workspaces #32084
Conversation
|
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds support for Chrome DevTools integration via the new Project Settings API for Nuxt projects, enabling automatic workspace configuration. Key changes include the addition of a new schema property and experimental flag ("chromeDevtoolsProjectSettings") and updates in the Nitro server to serve the corresponding configuration file.
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/schema/src/types/schema.ts | Added a new boolean config property with documentation. |
| packages/schema/src/config/experimental.ts | Introduced the experimental flag with a default value. |
| packages/nuxt/src/core/nitro.ts | Integrated file handling to support Chrome DevTools workspaces. |
WalkthroughAn experimental feature was added to enable integration with Chrome DevTools Workspaces in Nuxt projects. This includes a new boolean configuration option, Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/nuxt/src/core/nitro.ts (1)
568-589: Implementation of Chrome DevTools Project Settings integrationThis implementation correctly handles the new experimental feature:
- Checks for existing configuration in the Nuxt cache directory
- Creates a new configuration with a random UUID if one doesn't exist
- Registers a development handler to serve the workspace configuration at the standard Chrome DevTools endpoint
The TODO comment indicates this might be refactored into a dedicated module as the feature expands, which is a good approach.
Consider adding error handling for the file write operation:
- await writeFile(resolve(nuxt.options.rootDir, 'node_modules/.cache/nuxt/chrome-workspace.json'), JSON.stringify(projectConfiguration), 'utf-8') + try { + await writeFile(resolve(nuxt.options.rootDir, 'node_modules/.cache/nuxt/chrome-workspace.json'), JSON.stringify(projectConfiguration), 'utf-8') + } catch (error) { + console.warn('Failed to write Chrome DevTools workspace configuration:', error) + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/nuxt/src/core/nitro.ts(3 hunks)packages/schema/src/config/experimental.ts(1 hunks)packages/schema/src/types/schema.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: codeql (javascript-typescript)
🔇 Additional comments (4)
packages/schema/src/types/schema.ts (1)
1487-1494: New experimental feature added for Chrome DevTools Workspaces integrationThe new configuration option enables Chrome DevTools Workspaces integration, allowing for better development experience with direct editing capabilities. The feature is enabled by default via the
experimental.chromeDevtoolsProjectSettingssetting.packages/schema/src/config/experimental.ts (1)
496-501: Configuration option added with appropriate documentationThe Chrome DevTools Workspaces integration is properly defined with a default value of
trueand includes a reference to the Google documentation. This matches the type definition in the schema file.packages/nuxt/src/core/nitro.ts (2)
4-5: Added necessary filesystem and crypto importsThese new imports are required for reading/writing the workspace configuration file and generating UUIDs for new workspace configurations.
14-14: Added H3 event handler importThe
defineEventHandlerfunction is now correctly imported, which is needed for registering the Chrome DevTools API endpoint.
@nuxt/kit
nuxt
@nuxt/rspack-builder
@nuxt/schema
@nuxt/vite-builder
@nuxt/webpack-builder
commit: |
CodSpeed Performance ReportMerging #32084 will not alter performanceComparing Summary
|
|
Added upstream tracker also for nitro to possibly support in dev server (via shared config) nitrojs/nitro#3360 |
|
Not sure if you're aware that there's a "Vite Plugin for DevTools Project Settings (devtools.json)" at https://github.com/ChromeDevTools/vite-plugin-devtools-json. If you are, just ignore this message 😃 |
|
I am aware, but this integration works with webpack, rspack, and any other bundlers people might use Nuxt with. |
|
Will this fix come to nuxt 3, too? |
|
yep! |
🔗 Linked issue
resolves #31978
📚 Description
This adds support for the new Chrome DevTools Project Settings API, which at the moment only supports Automatic Workspace configuration.
I suggest we migrate this to an internal module when more features are supported.
cc: @bmeurer