Skip to content

Commit 5bc2052

Browse files
Copilotmfranzkenmerget
authored
feat: Implement vite-plugin-devtools-json for enhanced Chrome DevTools integration (#4819)
* Initial plan * Implement vite-plugin-devtools-json for enhanced Chrome DevTools integration Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com> * refactor: moved this file to it's correct place * refactor: optimized defined dependencies * Update docs/chrome-devtools-integration.md Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> * chore: removed vue output changes * fix: issue with linting * fix: linting issues * Update docs/evaluations/vite-plugin-devtools-json-evaluation.md * Update docs/evaluations/vite-plugin-devtools-json-evaluation.md * Update docs/evaluations/vite-plugin-devtools-json-evaluation.md * Update docs/evaluations/vite-plugin-devtools-json-evaluation.md --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com> Co-authored-by: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com> Co-authored-by: Nicolas Merget <104347736+nmerget@users.noreply.github.com> Co-authored-by: Nicolas Merget <nicolas.merget@deutschebahn.com>
1 parent 687a0c2 commit 5bc2052

File tree

6 files changed

+858
-2
lines changed

6 files changed

+858
-2
lines changed

‎docs/chrome-devtools-integration.md‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
# Chrome DevTools Integration
2+
3+
## Overview
4+
5+
The DB UX Design System now includes enhanced Chrome DevTools integration via the [`vite-plugin-devtools-json`](https://www.npmjs.com/package/vite-plugin-devtools-json) plugin. This provides improved debugging capabilities during development.
6+
7+
## What's Included
8+
9+
The plugin is automatically enabled in all Vite-based development environments:
10+
- React showcase (`/showcases/react-showcase/`)
11+
- Vue showcase (`/showcases/vue-showcase/`)
12+
13+
## Enhanced Features
14+
15+
### 1. DevTools JSON Generation
16+
The plugin automatically generates a `com.chrome.devtools.json` file that provides metadata about the running application to Chrome DevTools.
17+
18+
### 2. Better Debugging Experience
19+
- Enhanced source mapping
20+
- Improved component inspection
21+
- Better performance profiling
22+
- More detailed error reporting
23+
24+
## How to Use
25+
26+
### Prerequisites
27+
- Google Chrome or Chromium-based browser
28+
- Chrome DevTools (built-in)
29+
30+
### Steps
31+
1. Start any Vite development server:
32+
```bash
33+
# React showcase
34+
cd showcases/react-showcase && npm run dev
35+
36+
# Vue showcase
37+
cd showcases/vue-showcase && npm run dev
38+
```
39+
40+
2. Open Chrome DevTools (F12)
41+
42+
3. The enhanced debugging features will be automatically available in:
43+
- **Sources** tab - Better source mapping
44+
- **Elements** tab - Enhanced component inspection
45+
- **Performance** tab - More detailed profiling
46+
- **Console** tab - Improved error reporting
47+
48+
### Verifying the Integration
49+
50+
When the development server starts, you should see the Vite server output without any plugin errors. The DevTools JSON file is generated automatically and served by the development server.
51+
52+
## Development Workflow
53+
54+
### Component Development
55+
- Use the **Elements** tab to inspect component structures
56+
- Leverage enhanced source maps for debugging
57+
- Utilize improved error reporting in the **Console**
58+
59+
### Performance Analysis
60+
- Use the **Performance** tab for detailed profiling
61+
- Monitor component rendering performance
62+
- Analyze bundle loading characteristics
63+
64+
### Source Code Navigation
65+
- Enhanced source mapping makes debugging easier
66+
- Better stack traces for error resolution
67+
- Improved breakpoint debugging experience
68+
69+
## Configuration
70+
71+
The plugin is configured with default settings in all Vite configurations:
72+
73+
```typescript
74+
import devtoolsJson from 'vite-plugin-devtools-json';
75+
76+
// In vite.config.ts
77+
plugins: [
78+
// ... other plugins
79+
devtoolsJson() // Enable Chrome DevTools JSON generation
80+
]
81+
```
82+
83+
## Browser Compatibility
84+
85+
- ✅ Google Chrome (recommended)
86+
- ✅ Microsoft Edge (Chromium-based)
87+
- ✅ Opera (Chromium-based)
88+
- ❌ Firefox (limited support)
89+
- ❌ Safari (not supported)
90+
91+
## Troubleshooting
92+
93+
### Plugin Not Loading
94+
If you see errors related to the DevTools plugin:
95+
1. Ensure you're using a Chromium-based browser
96+
2. Clear browser cache and restart the development server
97+
3. Check console for specific error messages
98+
99+
### Missing DevTools Features
100+
If enhanced features aren't visible:
101+
1. Verify the development server started without errors
102+
2. Open DevTools before navigating to the application
103+
3. Refresh the page with DevTools open
104+
105+
## Production Impact
106+
107+
The `vite-plugin-devtools-json` only affects development builds. Production builds are not impacted:
108+
- No additional bundle size
109+
- No runtime performance impact
110+
- No security concerns
111+
112+
## More Information
113+
114+
For detailed information about the plugin, visit:
115+
- [Plugin Repository](https://github.com/ChromeDevTools/vite-plugin-devtools-json)
116+
- [Chrome DevTools Documentation](https://developer.chrome.com/docs/devtools/)

‎docs/evaluations/vite-plugin-devtools-json-evaluation.md‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
# Evaluation: vite-plugin-devtools-json
2+
3+
## Overview
4+
5+
This document evaluates the potential usage of [`vite-plugin-devtools-json` node package](https://www.npmjs.com/package/vite-plugin-devtools-json) in the DB UX Design System `core-web` repository.
6+
7+
## What is `vite-plugin-devtools-json` node package?
8+
9+
`vite-plugin-devtools-json` is a Vite plugin that generates a `com.chrome.devtools.json` file on the fly in the development server. This file is used by Chrome DevTools to provide enhanced debugging capabilities for web applications.
10+
11+
**Key Details:**
12+
13+
- Version: 1.0.0 (published August 13, 2025)
14+
- Maintainer: google-wombot (Google)
15+
- Repository: <https://github.com/ChromeDevTools/vite-plugin-devtools-json>
16+
- License: MIT
17+
- Dependencies: uuid ^11.1.0
18+
19+
## Purpose of `com.chrome.devtools.json` file / "endpoint"
20+
21+
The `com.chrome.devtools.json` file is a metadata file that:
22+
23+
1. Enables Chrome DevTools to discover and connect to debugging targets
24+
2. Provides additional debugging information about the running application
25+
3. Facilitates better integration with Chrome DevTools features
26+
4. Supports advanced debugging scenarios for complex web applications
27+
28+
## Current Vite Usage in Repository
29+
30+
The repository currently uses Vite in several locations:
31+
32+
### Showcases
33+
34+
- **React Showcase** (`/showcases/react-showcase/vite.config.ts`)
35+
- Uses `@vitejs/plugin-react`
36+
- Builds to `build-showcases/react-showcase`
37+
- Enables CSS dev source maps
38+
39+
- **Vue Showcase** (`/showcases/vue-showcase/vite.config.ts`)
40+
- Uses `@vitejs/plugin-vue`
41+
- Builds to `build-showcases/vue-showcase`
42+
- Enables CSS dev source maps
43+
44+
## Evaluation Criteria
45+
46+
### 1. Development Experience Benefits
47+
48+
**Potential Benefits:**
49+
50+
- Enhanced debugging capabilities during development
51+
- Better Chrome DevTools integration
52+
- Improved developer experience for component debugging
53+
- Automatic generation of DevTools metadata
54+
55+
**Assessment:** ✅ **Positive Impact**
56+
57+
- Design system developers would benefit from enhanced debugging
58+
- Component development and testing would be improved
59+
- No performance impact on production builds
60+
61+
### 2. Integration Complexity
62+
63+
**Current Setup:**
64+
65+
- Multiple Vite configurations already exist
66+
- Simple plugin architecture in place
67+
- Development-only concern (no production impact)
68+
69+
**Implementation Effort:**
70+
71+
- Low complexity - simple plugin addition
72+
- Minimal configuration required
73+
- No breaking changes to existing setup
74+
75+
**Assessment:** ✅ **Low Complexity**
76+
77+
### 3. Maintenance Overhead
78+
79+
**Considerations:**
80+
81+
- Plugin is maintained by Google
82+
- Recent release (August 2025)
83+
- Single dependency (uuid)
84+
- MIT license
85+
86+
**Assessment:** ✅ **Low Maintenance**
87+
88+
### 4. Use Case Alignment
89+
90+
**Repository Context:**
91+
92+
- Design system with multiple framework showcases
93+
- Component library development
94+
- Developer tools and debugging are important
95+
- Active development with multiple contributors
96+
97+
**Assessment:** ✅ **Good Alignment**
98+
99+
## Recommendation
100+
101+
### ✅ **RECOMMENDED for Implementation**
102+
103+
**Rationale:**
104+
105+
1. **Low Risk:** Development-only plugin with no production impact
106+
2. **High Value:** Improves debugging experience for design system development
107+
3. **Easy Implementation:** Simple plugin addition to existing Vite configs
108+
4. **Google Maintained:** Reliable source and maintenance
109+
5. **No Breaking Changes:** Additive enhancement only
110+
111+
### Implementation Plan
112+
113+
#### Phase 1: Test Integration
114+
115+
1. Add plugin to React showcase for testing
116+
2. Verify DevTools integration works as expected
117+
3. Document any benefits observed
118+
119+
#### Phase 2: Full Rollout
120+
121+
1. Add to all Vite configurations if Phase 1 is successful:
122+
- React showcase
123+
- Vue showcase
124+
2. Update documentation with DevTools usage guidelines
125+
126+
#### Phase 3: Documentation
127+
128+
1. Create developer guide for using enhanced DevTools features
129+
2. Add to development workflow documentation
130+
131+
## Proposed Implementation
132+
133+
### React Showcase Configuration
134+
135+
```typescript
136+
import react from "@vitejs/plugin-react";
137+
import devtoolsJson from "vite-plugin-devtools-json";
138+
import { defineConfig } from "vite";
139+
140+
export default defineConfig({
141+
base: `/react-showcase/`,
142+
plugins: [
143+
react(),
144+
devtoolsJson() // Add DevTools JSON generation
145+
],
146+
build: {
147+
outDir: "../../build-showcases/react-showcase",
148+
emptyOutDir: true
149+
},
150+
define: {
151+
process
152+
},
153+
css: {
154+
devSourcemap: true
155+
}
156+
});
157+
```
158+
159+
### Vue Showcase Configuration
160+
161+
```typescript
162+
import vue from "@vitejs/plugin-vue";
163+
import devtoolsJson from "vite-plugin-devtools-json";
164+
import { defineConfig } from "vite";
165+
166+
export default defineConfig({
167+
base: `/vue-showcase/`,
168+
plugins: [
169+
vue(),
170+
devtoolsJson() // Add DevTools JSON generation
171+
],
172+
build: {
173+
outDir: "../../build-showcases/vue-showcase",
174+
emptyOutDir: true
175+
},
176+
css: {
177+
devSourcemap: true
178+
}
179+
});
180+
```
181+
182+
## Conclusion
183+
184+
The `vite-plugin-devtools-json` plugin is a valuable addition to the DB UX Design System development workflow. It provides enhanced debugging capabilities with minimal implementation effort and no production impact. The plugin aligns well with the repository's focus on developer experience and component development.
185+
186+
**Next Steps:**
187+
188+
1. Install the plugin as a dev dependency
189+
2. Implement in React showcase for testing
190+
3. Validate enhanced DevTools functionality
191+
4. Roll out to other Vite configurations if successful

0 commit comments

Comments
 (0)