Frontend Inspection Tool — Chrome Extension - Analyze layouts, CSS selectors, accessibility, and Web Vitals with a single click.
Inspect elements • Extract selectors • Audit accessibility • Monitor performance
- Interactive hover inspection - Move your cursor to inspect any element
- Detailed element info - View DOM hierarchy, computed styles, and box model
- CSS selector extraction - Get unique selectors (ID, class, XPath)
- Layout detection - Automatically identify Flexbox & Grid layouts with visual guides
- Visual highlighting - Clean, non-intrusive overlay on inspected elements
- Core Web Vitals tracking - LCP, CLS, FID, INP, TTFB in real-time
- Performance metrics - Total nodes, images, scripts, stylesheets analysis
- Smart warnings - Actionable recommendations for performance issues
- Per-page caching - 5-second cache for optimal performance
- WCAG contrast ratio checker - Verify text/background color compliance
- Touch target validation - Check minimum 44x44px tap target sizes
- Font size verification - Ensure minimum 12px readable text
- ARIA label detection - Identify missing accessibility attributes
- Accessibility warnings - Real-time feedback on accessibility issues
- Dark/Light theme - Automatic OS preference detection or manual toggle
- Responsive design - Works seamlessly on all screen sizes
- Onboarding flow - First-time user welcome & feature guide
- Draggable panels - Customizable inspector panel positioning
- ESC key support - Quick panel dismissal
1.Install DevInspect directly from the Chrome Web Store
2. Click Add to Chrome
3. Confirm permissions
-
Clone the repository:
git clone https://github.com/preranah7/devinspect.git cd devinspect -
Install dependencies:
npm install
-
Build the extension:
npm run build
-
Load in Chrome:
- Open
chrome://extensions/ - Enable Developer mode (top-right)
- Click Load unpacked
- Select the
dist/folder
- Open
- Open DevInspect - Press the extension icon in your toolbar
- Activate Inspector - Click "Activate Inspector" button or press Ctrl+Shift+I
- Hover & Inspect - Move your cursor over any element to inspect
- View Details - Check layout, accessibility, performance, and CSS info
- Copy Selectors - Click selector buttons to copy to clipboard
- Layout Section - Visual Flexbox/Grid guides with gap & alignment info
- CSS Selectors - Copy ID, class-based, XPath, or unique selectors
- Web Vitals - Page-level performance metrics with severity indicators
- Accessibility - WCAG compliance scores and specific issues
- Warnings - Actionable recommendations for improvement
| Shortcut | Action |
|---|---|
Ctrl+Shift+I |
Toggle inspector |
ESC |
Close inspector panel |
Click selector button |
Copy to clipboard |
| Layer | Technologies |
|---|---|
| Frontend | TypeScript, Vite, Vanilla JS |
| Styling | CSS3, CSS Variables (theme system) |
| Build | Vite + @crxjs/vite-plugin |
| Architecture | Modular content scripts, popup UI, theme management |
| APIs | Chrome Extension APIs, Performance Observer, PerformanceObserver |
devinspect/
├── src/
│ ├── content/
│ │ ├── index.ts # Content script entry
│ │ ├── modules/ # Core inspection logic
│ │ │ ├── accessibility.ts # WCAG/accessibility checks
│ │ │ ├── inspector.ts # Element inspection
│ │ │ ├── layout.ts # Flexbox/Grid detection
│ │ │ ├── panel.ts # Inspector panel UI
│ │ │ ├── performance.ts # Web Vitals & metrics
│ │ │ ├── responsive.ts # Responsive helpers
│ │ │ ├── selectors.ts # CSS selector extractor
│ │ │ ├── state.ts # State & caching
│ │ │ ├── theme.ts # Dark/Light theme
│ │ │ ├── utils.ts # Shared utilities
│ │ │ └── index.ts # Module barrel file
│ │ └── types/
│ │ └── index.ts # TypeScript types
│ ├── popup/
│ │ ├── popup.html # Popup markup
│ │ ├── popup.css # Popup styles
│ │ └── popup.js # Popup logic
│ ├── styles/
│ │ └── content.css # In-page overlay styles
│ ├── manifest.json # Chrome extension manifest
│ └── index.ts # Main entry point
├── public/
│ └── icons/ # Extension icons & theme glyphs
│ ├── icon16.png
│ ├── icon48.png
│ ├── icon128.png
│ ├── moon.svg
│ └── sun.svg
├── screenshots/ # README & store screenshots
│ ├── popup-ui.png.jpg
│ ├── web-vitals-youtube.png.jpg
│ ├── performance-warnings.png.jpg
│ ├── web-vitals-wiki.png.jpg
│ ├── css-selector-accessibility.png.jpg
│ └── box-model.png.jpg
├── dist/ # Production build (generated)
├── node_modules/ # Dependencies
├── .gitignore # Git ignore rules
├── LICENSE # MIT license
├── PRIVACY.md # Privacy policy
├── package.json # Scripts & dependencies
├── package-lock.json # Locked dependency tree
├── tsconfig.json # TypeScript config
├── vite.config.ts # Vite build config
└── README.md # Project documentation
- Node.js >= 16.0.0
- npm >= 8.0.0
- Chrome/Chromium browser
# Clone repository
git clone https://github.com/preranah7/devinspect.git
cd devinspect
# Install dependencies
npm install
# Start development server
npm run dev
# Load in Chrome:
# 1. chrome://extensions/
# 2. Enable "Developer mode"
# 3. Click "Load unpacked" → select dist/ folder
# 4. Make changes, save → refresh extension (Ctrl+R)# Development mode (watch & rebuild)
npm run dev
# Production build (minified, optimized)
npm run build
# Preview production build
npm run preview- TypeScript - Strict mode enabled for type safety
- Modular architecture - Separated concerns (state, UI, logic, styles)
- Error handling - Try/catch blocks with console logging
- Performance optimized - Debouncing, caching, efficient DOM queries
- Inspector activates with keyboard shortcut (Ctrl+Shift+I)
- Elements highlight correctly on hover
- All selector types work (ID, class, XPath, custom)
- Web Vitals display correctly on page load
- Accessibility checks return accurate results
- Layout detection works on Flexbox & Grid elements
- Dark/Light theme toggles properly
- Panel closes with ESC key
- Works on major sites (Amazon, YouTube, etc.)
// Check if DevInspect is loaded
console.log('[DevInspect] Extension initialized');
// Verify inspector state
console.log('[DevInspect Inspector] Active');
// Performance metrics
console.log('[DevInspect Performance] Web Vitals:', vitals);# Create optimized build
npm run build
# Check dist/ folder for:
# ✓ manifest.json
# ✓ All JS/CSS files minified
# ✓ Icons in place
# ✓ No source maps (optional)# Zip the dist/ folder
cd dist
powershell Compress-Archive -Path * -DestinationPath ../devinspect-v1.0.0.zip
# Upload to Chrome Web Store:
# 1. Go to https://chrome.google.com/webstore/developer/
# 2. Click "New item"
# 3. Upload ZIP file
# 4. Fill in store listing (description, screenshots, privacy policy)
# 5. Submit for review- Total: ~450KB (uncompressed)
- Gzipped: ~100KB (production download)
- Breakdown:
- JS: 33KB
- CSS: 20KB
- Icons: 387KB
- HTML: 3KB
- No external calls - All analysis happens locally in your browser
- No data collection - Nothing sent to servers or third parties
- No cookies - Extension doesn't use cookies or tracking
- Local storage only - Preferences stored in browser memory
activeTab- Required to inspect current page elementsscripting- Allows content script injection for element inspection<all_urls>- Works on any webpage you visit
For detailed privacy information, see PRIVACY.md.
- Integration with DevTools
- Real-time collaboration mode
- Advanced filtering options
- Export reports (HTML/PDF)
- Dark mode refinements
Here's how to help:
Found a bug? Open an issue
Include:
- Chrome/Chromium version
- Website where issue occurred
- Steps to reproduce
- Expected vs actual behavior
- Console errors (if any)
- Fork the repository
- Create feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push branch:
git push origin feature/amazing-feature - Open a Pull Request
- TypeScript strict mode enforced
- Modular architecture required
- Add JSDoc comments for complex functions
- Test on multiple websites before submitting
- Follow existing code style
This project is licensed under the MIT License - see LICENSE file for details.
✅ Allowed - Feel free to use this in commercial projects or redistribute
DevInspect - Built with ❤️ for frontend developers,QA engineers.
- Creator: Prerana Hippargi
- Repository: github.com/preranah7/devinspect
- Issues: Report a bug
- Built with Vite for fast development
- TypeScript for type safety
- Chrome DevTools for inspiration
- Community feedback and contributions
Built to make frontend development faster, easier, and more accessible.
Report Issue • Contribute • Documentation
⭐ If you find DevInspect helpful, please star the repository!