@meui-creative/dev-tools
Version:
Professional responsive DevTools for React applications with device preview, performance testing, and accessibility auditing
284 lines (215 loc) • 5.8 kB
Markdown
# @meui-creative/dev-tools
Professional responsive DevTools for React applications with device preview, performance testing, and accessibility auditing.
## Features
- 📱 **Multi-Device Preview** - Test across phones, tablets, laptops, and desktops
- ⚡ **Performance Analysis** - Lighthouse-style metrics and Core Web Vitals
- ♿ **Accessibility Testing** - WCAG compliance checking
- 🔍 **SEO Analysis** - Complete SEO auditing with recommendations
- 🔒 **Security Testing** - Security headers and vulnerability scanning
- 🎨 **Real Device UI** - Authentic iOS/Android status bars and browser chrome
- 🌙 **Dark Mode** - Beautiful dark and light themes
- ⌨️ **Keyboard Shortcuts** - Quick access with Ctrl+Shift+D
## Installation
```bash
bun add @meui-creative/dev-tools
# or
npm install @meui-creative/dev-tools
```
## Quick Start
### Nejjednoduší způsob - automatické skrytí v produkci
```tsx
// app/layout.tsx nebo kdekoli
import { DevTools } from '@meui-creative/dev-tools'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{children}
<DevTools /> {/* Automaticky se skryje v produkci */}
</body>
</html>
)
}
```
### Jako wrapper
```tsx
// app/layout.tsx
import { DevToolsLauncher } from '@meui-creative/dev-tools'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<DevToolsLauncher>
{children}
</DevToolsLauncher>
</body>
</html>
)
}
```
### React App
```tsx
// App.tsx
import { DevTools } from '@meui-creative/dev-tools'
function App() {
return (
<div>
<YourApp />
<DevTools /> {/* Žádná podmínka není potřeba! */}
</div>
)
}
```
### Manual Integration
```tsx
import { DevToolsManual, useDevTools } from '@meui-creative/dev-tools'
function MyApp() {
const { isOpen, toggle } = useDevTools()
return (
<>
<YourApp />
<button onClick={toggle}>Toggle DevTools</button>
<DevToolsManual isOpen={isOpen} onToggle={toggle} />
</>
)
}
```
### Force Show (pro testování)
```tsx
import { DevToolsForce } from '@meui-creative/dev-tools'
function App() {
return (
<>
<YourApp />
<DevToolsForce /> {/* Vždy viditelné, i v produkci */}
</>
)
}
```
## Advanced Usage
### Provider Pattern
```tsx
import { DevToolsProvider, useDevToolsContext } from '@meui-creative/dev-tools'
function App() {
return (
<DevToolsProvider>
<YourApp />
</DevToolsProvider>
)
}
function SomeComponent() {
const { open, close } = useDevToolsContext()
return (
<button onClick={open}>Open DevTools</button>
)
}
```
### HOC Pattern
```tsx
import { withDevTools } from '@meui-creative/dev-tools'
const AppWithDevTools = withDevTools(YourApp)
export default AppWithDevTools
```
### Standalone Usage
```tsx
import { DevToolsStandalone } from '@meui-creative/dev-tools'
// Perfect for component testing
function ComponentTest() {
return <DevToolsStandalone url="http://localhost:3000" />
}
```
## Keyboard Shortcuts
- `Ctrl+Shift+D` (or `Cmd+Shift+D`) - Toggle DevTools
- `Escape` - Close DevTools
## Device Categories
### Phones
- iPhone SE (375×667)
- iPhone 15 Pro (393×852) with notch
- Samsung S24 Ultra (412×915)
### Tablets
- iPad Mini (768×1024)
- iPad Air (820×1180)
- iPad Pro 12.9" (1024×1366)
### Laptops
- MacBook Air 13" (1280×800)
- MacBook Pro 14" (1512×982)
- MacBook Pro 16" (1728×1117)
### Desktops
- Small Desktop (1366×768)
- Standard Desktop (1920×1080)
- 4K Desktop (3840×2160)
### Special Monitors
- Ultrawide 21:9 (3440×1440)
- Super Ultrawide 32:9 (5120×1440)
- Vertical Coding (1440×2560)
## Testing Features
### Performance Testing
- Lighthouse scores (Performance, Accessibility, Best Practices, SEO, PWA)
- Core Web Vitals (LCP, FID, CLS, FCP, SI, TBT)
- Resource analysis (bundle size, compression, caching)
- Network metrics
### Accessibility Testing
- Color contrast checking
- Missing alt text detection
- Heading structure validation
- Keyboard navigation testing
- ARIA compliance
### SEO Analysis
- Meta tags optimization
- Heading structure
- Image alt text coverage
- Technical SEO (HTTPS, mobile-friendly, canonical URLs)
- Structured data validation
### Security Testing
- HTTPS encryption
- Security headers (HSTS, CSP, X-Frame-Options)
- Mixed content detection
- Vulnerability scanning
## Automatická detekce Development Environment
DevTools automaticky detekuje development environment a skryje se v produkci. Detekce funguje pomocí:
1. **NODE_ENV** - `process.env.NODE_ENV === 'development'`
2. **Dev servery** - porty 3000, 3001, 5173, 8080, 4200, 8000, 9000
3. **Dev hosty** - localhost, 127.0.0.1, 0.0.0.0
4. **Query parameter** - `?dev=true`
### Jak ovládat zobrazení
```tsx
// Základní - automatické skrytí v produkci
<DevTools />
// Zakázat automatické skrytí
<DevTools hideInProduction={false} />
// Skrýt pomocí URL parametru
// http://localhost:3000?no-dev-tools=true
// Zobrazit pomocí URL parametru v produkci
// https://mysite.com?dev=true
```
## Configuration
DevTools automatically hides in production and when `?no-dev-tools=true` is in the URL.
## TypeScript Support
Full TypeScript support with exported types:
```tsx
import type {
Device,
LighthouseMetrics,
AccessibilityIssue,
SEOMetrics
} from '@meui-creative/dev-tools'
```
## Browser Support
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
## License
MIT © MEUI Creative
## Contributing
Issues and PRs welcome! Please read our contributing guidelines.
---
Made with ❤️ by [MEUI Creative](https://github.com/meui-creative)