@meui-creative/dev-tools
v1.0.6
Published
Professional responsive DevTools for React applications with device preview, performance testing, and accessibility auditing
Maintainers
marianmaresReadme
@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
bun add @meui-creative/dev-tools
# or
npm install @meui-creative/dev-toolsQuick Start
Nejjednoduší způsob - automatické skrytí v produkci
// 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
// 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
// App.tsx
import { DevTools } from '@meui-creative/dev-tools'
function App() {
return (
<div>
<YourApp />
<DevTools /> {/* Žádná podmínka není potřeba! */}
</div>
)
}Manual Integration
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í)
import { DevToolsForce } from '@meui-creative/dev-tools'
function App() {
return (
<>
<YourApp />
<DevToolsForce /> {/* Vždy viditelné, i v produkci */}
</>
)
}Advanced Usage
Provider Pattern
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
import { withDevTools } from '@meui-creative/dev-tools'
const AppWithDevTools = withDevTools(YourApp)
export default AppWithDevToolsStandalone Usage
import { DevToolsStandalone } from '@meui-creative/dev-tools'
// Perfect for component testing
function ComponentTest() {
return <DevToolsStandalone url="http://localhost:3000" />
}Keyboard Shortcuts
Ctrl+Shift+D(orCmd+Shift+D) - Toggle DevToolsEscape- 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í:
- NODE_ENV -
process.env.NODE_ENV === 'development' - Dev servery - porty 3000, 3001, 5173, 8080, 4200, 8000, 9000
- Dev hosty - localhost, 127.0.0.1, 0.0.0.0
- Query parameter -
?dev=true
Jak ovládat zobrazení
// 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=trueConfiguration
DevTools automatically hides in production and when ?no-dev-tools=true is in the URL.
TypeScript Support
Full TypeScript support with exported types:
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