Web DevTools+

- Elements: シンタックスハイライト対応の強力なDOMインスペクター＆エディターで、ページ上のあらゆる要素を編集できます。 - CSSクイックツール: CSSの無効化、背景画像の無効化、アウトライン、オーバーフロー、z-indexの問題の確認など - CSS概要: ページで使用されているCSS、スタイルシート、カラー、フォント、メディアクエリを詳しく確認できます。 - レンダリングテスト: 色覚特性やぼやけた視界など、さまざまな視覚特性をエミュレートできます。画像を非表示にして、ページ構造やフォールバックUXを評価することもできます。AVIFやJPEG XLなどの最新の画像フォーマットを無効化し、古いブラウザなどでのフォールバックUXをテストできます。 - メディアクエリテスト: 印刷用スタイルや、prefers-color-scheme、prefers-contrastメディアクエリによるページの表示をエミュレートできます。 - ネットワーク: ページで読み込まれているすべてのアセットを確認できます。アセットをタップすると、MIMEタイプ、ファイルサイズ、転送時間などの詳細を確認できます。「ソース」では、テキストベースのアセットのコードをシンタックスハイライト付きで表示でき、クリップボードへのコピーやコードのフォーマットも可能です。 - SEO & メタ: title、description、アイコン、Open Graphタグなどのメタタグを確認できます。Open Graph画像のプレビューも表示できます。 - ストレージ: Cookie、localStorage、sessionStorageの確認・削除ができるほか、Web Manifestを詳しく確認できるビューアーも搭載しています。 - 詳細なデバイス情報: User Agent、ディスプレイ、画面解像度、ネットワーク速度、接続タイプ、ISPなど、デバイスに関する詳細な情報を確認できます。 - アクセシビリティ: アクセシビリティ監査、情報確認、デバッグツールを搭載。ARIAインスペクターや画像のalt属性チェックなどが利用できます。 - ツール: Lighthouse、HTTP Observatory、SSL Labs、WAVE Web Accessibility Evaluation Toolなど、8つの人気の無料サービスによるクイック監査をワンタップで実行できます。ログインや登録は不要で、監査結果をすぐに新しいタブで確認できます。