Browser User-Agent and Web Feature Detection Inspector

Overview

A comprehensive, client-side diagnostic dashboard designed for web developers, quality assurance engineers, and privacy-conscious users to inspect their browser's identity and capabilities. The application provides an instant report on hardware, software, and API support without requiring external server-side logging.

UI/UX Design

• Visual Language: High-contrast dark mode interface (Slate, charcoal, and electric blue accents) to emphasize data readability.
• Layout: A responsive modular grid. The top section displays the primary User-Agent string with a "Copy to Clipboard" button. Below this, a categorized dashboard layout:
  • User-Agent Analysis: Cards displaying parsed data (OS, Browser Engine, Version, Device Type).
  • Screen & Hardware: Real-time viewport dimensions, pixel density, and available memory (if API allows).
  • Feature Detection: A list with toggleable status icons (checkmarks for support, X for unsupported) for modern APIs like WebGL, WebAssembly, Service Workers, and WebAuthn.
  • Storage & Security: Status of LocalStorage, SessionStorage, IndexedDB, and HTTPS/TLS connection status.
• Animations: Subtle, smooth fade-in animations for data cards as they are populated. Loading skeleton states for feature detection tests that require async execution.

Core Feature Set

1. User-Agent Parser: A smart decoder that breaks down the raw navigator string into human-readable segments (Platform, Engine, Browser).
2. Feature Detection Matrix: A dynamically generated list of feature checks including:
   • Modern CSS (Grid, Flexbox, Container Queries).
   • Modern JavaScript APIs (Fetch, Intersection Observer, Web Crypto).
   • Media Capabilities (Camera, Microphone, WebRTC support).
3. Network & Connection Status: Report on connection effective type (4g, 3g), saved data mode, and online/offline status.
4. Storage Inspector: A real-time verification of storage limits and availability (cookies enabled, local storage capacity).
5. Export Capabilities: A "Download Report as JSON" button to allow developers to share their environment configuration for bug reporting.
6. Live Debug Console: An optional panel that logs non-blocking errors related to browser capability checks.

Technical Requirements

• Architecture: 100% Client-side JavaScript. No backend necessary.
• Frameworks: Lightweight reactive framework for UI state management.
• Storage: No persistent data storage. All functions rely on window.navigator, window.screen, and feature testing scripts.
• Responsiveness: Fully mobile-optimized layout allowing users to inspect browser capabilities on tablets and smartphones as well as desktop.
• Security: Strict Content Security Policy (CSP) implementation to ensure no external scripts interfere with the environment testing.