Right On Page Devtools vs Web DevTools+

Debug Mobile Safari Without a Mac. It works for both iPhone and iPad Right On Page DevTools brings essential web debugging directly onto the page you are viewing in Safari. See what is happening on the page in real time: • View console logs, warnings, errors, and exceptions • Inspect Fetch/XHR API requests and responses • Search logs, URLs, headers, payloads, and response bodies • Copy JSON values from nested responses • Inspect page elements and edit CSS on device • Snip HTML and CSS from any element • Catch API errors and JavaScript exceptions faster Unlike desktop-style devtools squeezed into a tiny panel, Right On Page is designed for quick mobile debugging. Open Safari, enable the extension for the site, and inspect what is happening right on the page. Useful for frontend developers, indie hackers, QA testers, and anyone debugging responsive websites on iPhone or iPad. Privacy first: Right On Page is off by default for each site and asks for permission per domain. The extension does not collect your browsing data.

- Elements: A powerful syntax-highlighted DOM inspector and editor allows you to edit any page. - CSS Quick tools: Disabled CSS, background images, outline overflow issues, z-index and more - CSS Overview: Get a detailed look into the CSS on the page, stylesheets, colors, fonts and media queries - Rendering Tests: Emulate vision deficiencies such as color blindness, blurred version. Hide images to evaluate structure and fallback UX. Disabled modern image file formats such as AVIF and JPEG XL to test fallback UX for other/older browsers - Media query tests: Emulate how the page looks with print styles, prefers color-scheme, and prefers-contrast media queries. - Network - View all the assets on a page, tap on one to see info such as MIME-type, file-size, transfer times, Source allows you to see code for text-based assets with syntax highlighting, copy to clipboard and format options - SEO & meta: See meta tags such as title, descriptions, icons, Open Graph tags including previews of the images - Storage: with options to view or delete cookies, localStorage and Session storage and a detailed Web Manifest viewer. - Detailed Device Info panel with UserAgent, display and screen resolution, network speeds, connection type, ISP and more. - Accessibility audits, info and debug tools (ARIA inspect and img alt inspect). - Tools: one-tap quick audits from 8 popular, free services (Lighthouse, HTTP Observatory, SSL Labs, Wave Web Accessibility etc). No need to login or register, it'll open a new tab with your audit right there!