Device Info

Introduction

Device Info is a browser-based inspector that shows what your current session looks like to websites and web apps: which browser and OS you run, how large the screen and viewport are, which languages and timezone apply, and—when your browser allows—network quality, accessibility preferences, Client Hints, and storage quota.

Unlike tools that only parse a user-agent string, Device Info combines parsed UA data with live APIs (screen, window, navigator, matchMedia, and others). That makes it practical for responsive design checks, support tickets, and reproducing “works on my machine” issues without sharing screenshots of about: pages or developer tools.

All processing happens locally. Open the tool on the device under test, read the grouped cards, and press Refresh after you rotate the phone or resize the desktop window.

What is Device Info?

Device Info answers: “What environment is this tab running in?” It does not fingerprint you across sites or store history; it only displays values your browser already exposes to JavaScript on the page you are viewing.

Output is organized into sections. Empty sections are omitted so you see only fields with a value. The list below matches what the tool displays today.

Information shown by the tool

Browser

Parsed from your navigator.userAgent using the same family of logic as dedicated UA tools:

• Name — e.g. Chrome, Safari, Firefox, Edge.
• Version — full browser version string when detectable.
• Major — major version number, useful for quick compatibility checks (“needs Chrome 120+”).

Use this when logs only show a raw UA string and you want a readable label without pasting into another tool.

Operating system

Also derived from the user-agent parse:

• Name — Windows, macOS, iOS, Android, Linux, etc.
• Version — OS version when the UA provides enough detail.

Helpful for confirming whether a tester is on iOS 17 vs 18 or Windows 10 vs 11. Note that UA-based OS detection can be wrong if the UA is frozen or reduced for privacy.

Device

Classifies the hardware profile implied by the UA:

• Type — mobile, tablet, console, smarttv, or desktop (default when no mobile token is found).
• Vendor — manufacturer when present (e.g. Apple, Samsung).
• Model — device model when present.

Pair Type with Max touch points (Navigator) and Pointer (Preferences) to reason about touch vs mouse-first layouts.

Navigator

Core browser identity and capability flags from the Navigator object:

Field	Meaning
User agent	Full UA string sent with HTTP requests from this browser profile.
Platform	Legacy platform string (e.g. MacIntel, Win32).
Vendor	Browser engine vendor string.
Language	Primary content language (BCP 47 tag).
Languages	Ordered list of accepted languages.
Cookie enabled	Whether first-party cookies are allowed.
Do not track	DNT preference when exposed (null if unset).
Online	Whether the browser reports an active network connection.
Max touch points	Number of simultaneous touch contacts (0 on typical desktop).
Hardware concurrency	Approximate CPU logical core count exposed to the page.
Device memory (GB)	Rough device RAM tier when supported (Chrome/Android; often absent elsewhere).
PDF viewer enabled	Built-in PDF plugin availability flag.
Webdriver	true when the browser is under automation control.

These fields are what many analytics scripts and feature detectors read indirectly.

Screen

Physical display metrics from window.screen:

• Width / Height — total screen resolution in CSS pixels.
• Available width / height — usable area excluding OS chrome (taskbar, notch area where reported).
• Color depth / Pixel depth — bits per color component for the screen.
• Device pixel ratio — ratio of physical pixels to CSS pixels (window.devicePixelRatio). Critical for Retina/HiDPI layout and image srcset decisions.
• Orientation type — e.g. portrait-primary, landscape-primary when screen.orientation exists.
• Orientation angle — rotation in degrees when supported.

Compare Screen width with Window inner width to see how much space the browser UI consumes.

Window

The visible page viewport and window position:

• Inner width / height — layout viewport inside the browser chrome (what CSS media queries for width often follow).
• Outer width / height — full browser window including toolbars.
• Screen X / Y — window offset on the multi-monitor desktop (may be 0 on mobile).

Essential for debugging “breakpoint says 768 but layout breaks” reports: always cite inner dimensions, not screen size alone.

Locale & time

Time context for the session:

• Timezone — IANA name from Intl (e.g. Asia/Ho_Chi_Minh).
• UTC offset (minutes) — difference from UTC for the current local time (note: sign follows JavaScript getTimezoneOffset() convention).
• Local time — human-readable timestamp at collection time.

Useful for scheduling bugs, cron displays, and “wrong date in UI” tickets.

Network

Populated when navigator.connection (Network Information API) is available—most reliably in Chromium:

• Effective type — coarse class: 4g, 3g, slow-2g, etc.
• Downlink — estimated bandwidth in Mbps.
• RTT — estimated round-trip time in ms.
• Save data — whether the user enabled data-saver mode.
• Type — connection type when exposed (wifi, cellular, …).

Absent on Safari/Firefox desktop; do not assume every user will have this block.

Preferences

Derived from CSS media queries the page can already use:

• Color scheme — dark, light, or no-preference from prefers-color-scheme.
• Reduced motion — reduce vs no-preference from prefers-reduced-motion.
• Pointer — coarse (touch), fine, coarse + fine, or unknown from pointer media features.

Helps verify that theme toggles and animation policies match system settings without opening DevTools.

Client hints

When User-Agent Client Hints are supported (navigator.userAgentData.getHighEntropyValues), the tool may show:

• architecture — CPU architecture hint.
• bitness — 32 vs 64-bit.
• model — device model on supported platforms.
• platform / platformVersion — OS platform and version via hints API.
• uaFullVersion — full browser version via hints.
• fullVersionList — structured version list for Chromium brands.

Modern Chromium reduces raw UA detail; this section complements parsed Browser/OS rows. It may stay empty in Safari or locked-down enterprise profiles.

Storage

When navigator.storage.estimate() is available:

• Quota — approximate storage the origin may use (shown in MB).
• Usage — approximate storage already used by this origin (shown in MB).

Relevant for PWA, offline cache, and IndexedDB issues on the same site—not total disk space on the device.

Key features

• Live session snapshot — not a static UA paste; includes screen, viewport, locale, and preferences.
• Grouped, readable cards — each API family in its own section with plain-language labels.
• Privacy-first — no upload; safe to use on internal or customer machines for support.
• Refresh on demand — re-sample after rotation, zoom, or network change.
• Smart hiding — unsupported APIs do not clutter the UI with empty rows.

Common use cases

• Responsive QA — confirm inner width, DPR, and orientation on real phones and tablets.
• Bug reports — attach a consistent list of environment fields instead of asking users to open DevTools.
• Support triage — verify language, timezone, cookies, and online status when reproducing login or checkout issues.
• Automation checks — spot Webdriver: Yes when debugging flaky E2E tests.
• Performance context — note Save-Data or effective connection type when investigating slow loads (Chromium).
• PWA / storage debugging — read quota and usage when cache or offline data misbehaves.

Best practices

• Run Device Info in the same browser profile where the bug happens (normal vs incognito, extensions on/off).
• After rotating a phone or snapping a desktop window, click Refresh before copying values into a ticket.
• Treat UA-derived OS/device names as hints; cross-check with Client hints or manual device knowledge when precision matters.
• Prefer Window inner dimensions over Screen size when discussing CSS breakpoints.
• Combine with the User Agent Parser tool if you also need to analyze UA strings from server logs or other users’ browsers.

Related tools

• User Agent Parser — paste any UA string from logs; no live screen or viewport data.
• Device Info — live environment for this tab only.