Hoverify: All-in-one extension for web developers

Please note: This is a paid extension, you can buy it from https://tryhoverify.com

⭐ Inspector: Hover to Inspect, Click to Edit
• Inspect any site by hovering over the element.
• Don't miss any styles. Inspect pseudo-elements and classes.
• Inspect and edit styles for all screen sizes and animations in real time.
• Style elements visually with our powerful visual editor in real time.
• Move, scale, and rotate elements, tweak flex and grid layouts, and build gradient backgrounds from the visual editor.
• Edit HTML, styles, media queries, and animations in real-time.
• View source CSS from different selectors in the code tab.
• The code is syntax-highlighted for better reading and editing.
• Copy or export the whole component with children to CodePen, or save it as an HTML file.
• Copy the full CSS, or copy only the changes you made.
• Reset your edits back to the original styles whenever you want.
• Edit Copy - Check how different copy looks on your page by editing the element's content in real-time.
• Download images and videos straight from the element you're inspecting, with file size and dimensions shown.
• Hide or Remove Elements - Debug page structure by hiding or removing elements.
• Accessibility - Inspect any element's role, accessible name, contrast, states, and ARIA attributes as you hover. See the accessibility issues for that element and get suggested contrast fixes.
• Color Palette - Get every color from the page.
• Font Viewer - Know what fonts each tag is using, and where they load from.
• Search - Find the element through tag name, id, or classes. Even with CSS selectors!
• CSS Box - Visually inspect the padding, margin, border, and size of the element.
• Grids - Outline every element on the page to see how it's built.
• Guidelines - Ruler guides that line up with the element you're looking at.
• Keyboard Shortcuts - Fully customizable shortcuts so you can work without lifting your hands off the keyboard.

⭐ Color Eyedropper: Spot, Point, and Select Colors
• Pick colors from anywhere on the page, even from images and iframes.
• Get RGB, OKLCH, CMYK, HSL, and hex values.
• Zoom in with a magnifier so you pick the exact pixel you mean.
• Generate a Tailwind style full shade range from any color you pick, from 50 all the way to 950.
• Keep a history of the colors you've picked recently.
• Save any color to your library.

⭐ Responsive Viewer: Preview on Multiple Devices
• Test your websites on multiple devices under multiple conditions in parallel.
• Click, type or scroll on one device and other devices will follow.
• Simulate modern devices with frames, frame styles, and OS. Includes iPhone 16, iPhone 15, Nothing Phone, Pixel 7 Pro, and more.
• Switch between device frame styles and colors to match real-world hardware.
• Works on any site - can be injected directly into the page for full compatibility.
• Add new custom device profiles to fit your needs.
• Test sites on viewports bigger than your display.
• Toggle horizontal and vertical scrollbars per device.
• Change user-agent.
• Screenshot one device or every device at once, either the visible viewport or the full page.
• Save shots as PNG, JPEG, or WebP, copy to clipboard, or download them all as a zip.
• Open any device screenshot in the built-in editor.
• Use single-viewport mode and drag the edges to resize to any width and height.
• Zoom the whole board in and out, and navigate with back, forward, refresh, or a typed URL.

⭐ Assets: Extract all the assets in one place
• Extract images, videos, SVGs, PDFs, Lottie animations, and favicons from the page.
• Extract assets from iframes and hidden elements. No valuable content is overlooked.
• Preview video thumbnails directly in the images tab.
• Play videos and Lottie animations right in the panel before you save them.
• Filter and sort assets by type, size, and format. Find what you need quickly.
• Include or skip srcset image variants.
• Copy an asset's URL or filename in one click.
• Download a single asset, or select all and pick individual assets, then zip and save in one click.

⭐ Library: Save assets directly to the cloud
• Connect Google Drive and save any extracted asset there without leaving the browser.
• Organize saved assets into projects you can rename or delete.
• Save colors from the eyedropper too, not just assets.
• Access your saved assets anytime from your library.

⭐ Site Stack: Discover the tech stack behind any website
• Uncover what's powering any site from frameworks and hosting to DNS and SSL, all in one place.
• Technologies - Detect frameworks, libraries, CMS platforms, analytics tools, and plugins with confidence scoring and version detection.
• Hosting - Identify the hosting provider, server IP, ASN, IP range, and ISP, plus the location down to the city, region, and local time.
• DNS - View DNS records, nameservers, and domain registrar information, with readable TTLs on every record.
• SSL - Verify the SSL certificate, issuing authority, validity period, TLS version, and key details.
• WordPress - Detect WordPress sites automatically and reveal the active theme with its author, version, and preview, plus installed plugins with icons, ratings, and premium badges.
• Export - Download the full tech stack as a JSON file or generate a professionally designed PDF report. Choose exactly which sections to include, perfect for client handoffs and site audits.

⭐ SEO: Optimize your site for search engines
• Run a complete SEO audit on any page, right from your browser.
• Insights - Get Core Web Vitals with real user data from Chrome UX Report and lab scores from Google's PageSpeed API. See Performance, Accessibility, Best Practices, and SEO scores, with separate mobile and desktop results.
• Meta Tags - Audit your title, description, Open Graph, and Twitter Card tags with character count validation and social preview checks. Also checks charset, canonical, robots, viewport, and language.
• Headers - Visualize your H1 through H6 hierarchy. Spot duplicate headings, missing H1s, and structural issues that hurt readability and rankings.
• Semantic Elements - Check whether the page uses header, nav, main, article, section, and the other HTML5 landmarks.
• Images - Find oversized images, compare original vs rendered dimensions, flag decorative images, and catch missing alt text that hurts accessibility and SEO.
• Links - Scan all internal and external links on a page. Filter by type including no-follow, detect broken URLs with one-click status checks, and audit anchor text.
• Schema - Detect existing structured data (JSON-LD, Microdata, RDFa) with validation, or generate new markup from 27 ready-to-use templates.
• Export - Generate a professionally designed PDF or HTML report, and copy meta tags, headings, or schema to your clipboard.

⭐ Capture: Take stunning screenshots of any website
• Showcase the full webpage or just any part of it with our screenshot tools. Save screenshots in JPEG, PNG, WEBP, or PDF format.
• Visible Part - Capture the visible part of the viewport of the page in high resolution.
• Full Page - Capture the full page and showcase the entire page in one image.
• Select Area - Click and drag to select any area of the page to capture.
• Select Element - Capture any component on the page by clicking on it.
• Screenshot Editor - A full editing suite for your screenshots. Add gradient backgrounds, annotations, branding (your logo and text), and crop with precision. Zoom, pan, paste images from clipboard, snap annotations into place, and export in any format. Turn raw screenshots into polished visuals ready for portfolios, docs, or social media.
• Canvas presets sized for various social media sites.
• Set the background to a solid color, a gradient, or your own image.
• Apply effects like blur, zoom, and noise, plus border and shadow controls for the screenshot.
• Annotate with rectangles, circles, arrows, labeled arrows, text, and images.
• Blur tool to hide sensitive info before you share.
• Export at 1x, 2x, or 3x, or copy straight to the clipboard.
• Reorder, duplicate, and nudge annotations with keyboard shortcuts.

⭐ Debug: Optimize and debug your site with ease
• Clear Browsing Data - Pick a time range from the last hour to all time, clear one site or every site, and choose exactly what goes: cache, cookies, local storage, history, and downloads. Refresh the page afterward if you want.
• Custom Code - Inject HTML, CSS, and JavaScript to tailor websites in real-time and make changes persistent. Target specific sites with wildcards, run several sites per script, toggle scripts on and off, and preview changes live as you edit in a syntax-highlighted editor.
• Optimize Images - Improve loading times by optimizing images on your landing page. Converts to WebP with a JPEG fallback, shows you how much each image saved before and after, and downloads everything as a zip.
• Accessibility Check - Run a full accessibility audit on any page, powered by the industry-standard axe engine. Test against WCAG 2.0 A or AA, WCAG 2.1 AA, WCAG 2.2 AA, or all rules, with optional best-practice checks.
• Browse violations by severity and jump straight to the affected element on the page.
• Find text that fails contrast requirements and get a suggested replacement color that passes while staying close to the original.
• Review the heading hierarchy, landmarks, focus order, forms, links, and alt-text issues. Overlay numbered badges on the page to see exactly how keyboard users move through it.
• Simulate color blindness (protanopia, deuteranopia, tritanopia, achromatopsia) and low vision to experience the page the way your visitors do.
• Export the audit as a professionally designed PDF report or a JSON file.

💡 Bug Report and Suggestions
To report a bug or for a feature request, you can send an e-mail to [email protected].