For Frontend Developers
The Tools You Reach for Every Day, Without Opening DevTools
onHover is a Chrome extension built around the tasks that fill a frontend developer's day: inspecting styles, checking responsive layouts, simulating slow networks, measuring page performance, and testing live CSS and JS fixes.
5 tools built for your workflow
CSS Inspector
Chasing a visual bug between DevTools and the page
Hover over any element and onHover shows computed styles, box model dimensions, font details, and spacing in a side panel — without opening DevTools. Edit any CSS property live and watch the change apply instantly. When you find the fix, copy the corrected rule and paste it into your source.
vs. DevTools Elements panel: no keyboard shortcut to open, no panel resize juggling, no losing the hovered element when you tab away.
Responsive Tester
Checking a layout across breakpoints without losing context
Pick a device preset (iPhone SE, iPhone 14, iPad, Android, Desktop) or type a custom width and height. The page re-renders at that viewport immediately. Rotate, zoom, and switch between presets in one click. Your session state and cookies stay intact.
vs. DevTools device mode: no DevTools panel to open, no accidental viewport lock-in, no layout shift from the DevTools sidebar itself changing available width.
Network Throttle
Testing on a slow connection without leaving the browser
Select Fast 3G, Slow 3G, or Offline from the extension popup. The throttle applies to the current tab immediately via Chrome's debugger API. Reload the page and watch your waterfall as if you're on a mobile network. Disable it with one click.
vs. DevTools Network conditions panel: no DevTools required, one click to toggle, applies per-tab without disrupting other tabs.
Page Insights
Measuring Core Web Vitals without opening Lighthouse
onHover's Page Insights panel captures LCP, FCP, CLS, INP, and TTFB as a live snapshot from browser Performance APIs. Includes a load timing breakdown, resource size by type, DOM node count, and JS heap memory. Enable the live badge to see CWV persist across navigations.
vs. PageSpeed Insights: no URL submission, works on localhost, works on authenticated pages, no 30-second wait for results.
Code Injection
Testing a CSS or JS fix before touching the source
Write CSS or JavaScript in the built-in editor and inject it into the current page immediately. Enable per-hostname auto-inject so your scripts run automatically every time you visit that site — useful for prototype overrides, third-party script debugging, or persistent style experiments.
vs. Stylus / Tampermonkey: no separate extension, CSS and JS in the same panel, scoped to hostname automatically, synced with onHover's other inspection data.
The frontend debugging loop
Five tools, one workflow. From spotting a visual bug to closing the ticket — without ever leaving the page.
Spot the visual bug
A layout breaks at 375px. You open onHover.
CSS Inspector
Hover the element. See computed margin-inline and flex-basis values.
Live fix
Edit the property value in the panel. Confirm the fix looks right.
Responsive Tester
Switch to iPhone SE preset. Check the fix holds at other breakpoints.
Screenshot
Capture the fixed state as a full-page screenshot for the PR description or design review.
Done
Copy the corrected CSS rule into your source. Close onHover.
Also included in the same popup
7-day free trial, all 14 tools
No credit card required. Works on Chrome and all Chromium-based browsers.
Start Free Trial