ブラウザとシステム情報を確認する方法
Bug報告や互換検証に、User-Agent、画面、ビューポート、OS、機能フラグを取得—エクステンション不要。
なぜ重要か
「スマホで日付ピッカーが開かない」とユーザー報告。どのブラウザ？「Chrome」と返るだけだとChrome 121デスクトップで2日再現試行、その後気づく—相手はChrome iOSで実態はWebKit。ワンクリックでブラウザダンプが取れるページがあればこの回り道は消えます。互換確認・サポート・レンダ環境把握にも同様です。
実際の3つのシーン
顧客にリンク送信→「レポートをコピー」→チケット貼り付け。
エンジニアが再現を早める
画面・DPR・ビューポート・向きが1カ所。
デバイスピクセル比のミスマッチが分かる
WebGL、WebRTC、WebAssemblyなどのフラグ行列を確認。
未対応テストを省略
手順
ブラウザ情報ツールを開きます。
検査したいブラウザで開く
任意URLで問題ありません。そのブラウザ＝検査対象です。
User-Agent分解を読む
ブラウザ名・バージョン、レイアウトエンジン、OS系・バージョン、デバイス種別。
画面とビューポート
ピクセル解像度・デバイスピクセル比・ビューポート幅／高・色ガムート。
機能フラグ確認
WebGL、WebGPU、Service Worker、Push、Notifications、Storage、Permissions API。
構造化レポートをコピー
MarkdownまたはJSON。エンジニアへの再質問を減らします。
検出
(Open the page on the device)抜粋
Browser : Chrome 121
Engine : Blink
OS : Android 14
Device : Pixel 7
Screen : 1080 × 2400 @ 2.625 dpr
Viewport : 412 × 915
WebGL : ✔ (ANGLE)
Service Worker : ✔
Touch : ✔
実践テクノ
- サポートテンプレにURLを組み込み。 「バグ報告」のリンクへ常備。
- 退化が1デバイスだけのときはレポートdiff—多くがOSアップデートかDPR差を指します。
- UA偽装には注意。 DevToolsがUAだけ変え実能力は変わりません。機能行列の方がUAより改ざんしにくいです。
- iOS上のChrome/Edge/FirefoxはすべてWebKit「ブラウザ版」という表現はミスリード—実エンジンはiOS WebViewです。
よくある落とし穴
よくある誤り
UA文字列が短くなっている
プライバシー強化ブラウザがUA縮約（UA Reduction）。**正確なブランド・バージョンは利用可能時navigator.userAgentData（Client Hints）。**ツールは利用可能時CHを優先します。
よくある誤り
DevToolsを開いてビューポート変化
パネルサイズ変更でビューポート表示が変わります。実ユーザ環境ならツール無し状態でスナップ。
よくある誤り
タッチ検出≠タッチ操作
ノートPCのタッチでも「タッチ対応」と出ます。入力モードはランタイムpointerTypeで、Touch supportedフラグのみで判断しない。
向いていない用途
- ネットワーク診断（遅延、DNS、スループット）— SpeedtestなどRUM向きです。
- 規模ある実機検証— BrowserStack／Sauceのリモート実OS＋ブラウザ環境へ。
- 個人ユーザー追跡—このツールはオンデマンドでフィンガープリントをユーザーが提示する側であり、トラッカーとして運用しない。
FAQ
データは送信される？
いいえ。navigator、screen、window APIからブラウザ内だけ収集。ページ外には出ません。
Linuxで「OS」がザックリ？
UAからディストロ特定できないことが多く、**ブラウザが晒す限度で「Linux x86_64」**などのみです。
Hardware Concurrency / RAMは？
hardwareConcurrency、deviceMemory（GiBほぼ整数）、およびWebGLレンダラーからのベンダ情報が対応環境で表示されます。
次のステップ
- チケットに出てくるIP／ホストはIPルックアップツール。
- 影響URLはURLパーサー。
- レポート記載HTTPコードはHTTPステータスリファレンス。