HTML Viewer

HTML Viewerは、Web開発者、学生、サイトオーナーがWebサイトのマークアップを探索し、デバイス上で変更を試すのに役立ちます。URLを入力してソースを表示したり、HTMLを編集したり、ページリソースを検査したり、一般的な構造上の問題を確認したりできます。本格的な開発環境を構築することなく、目的に合ったツールを選択できます。

閲覧、編集、プレビュー

HTMLエディタでページを開き、コードとレンダリングされた出力を比較できます。分割プレビューをオンにすると、作業中に変更を確認できます。構文ハイライト、タグの候補表示、検索と置換、行移動、元に戻す/やり直し機能により、長いドキュメントもスムーズに操作できます。マークアップを読みやすく整形したり、圧縮機能でコンパクトにしたりできます。

HTMLスターター、ランディングページ、アクセシブルフォーム、再利用可能なカードテンプレートを使って、実験を始めましょう。エディタは、タグの不一致、重複するID、画像のalt属性の欠落など、よくある問題も検出します。ローカルの.htmlファイルを開いたり、編集したドキュメントを保存したり、利用可能なデバイスアクションを使用してコードを共有したりできます。編集内容は作業中のコピーに反映され、元のWebサイトには反映されません。

ページ構造の確認

サイトレポートを実行して、タイトル、メタディスクリプション、正規URL、ドキュメント言語、ビューポートメタデータ、ソーシャルシェアメタデータをチェックします。見出しレベルと、リンク、画像、スクリプト、スタイル、フォームの数を調べます。レポートでは、ラベルの欠落、名前のないリンク、重複するID、安全でないリソース参照などが指摘されます。ページについて他の人と話し合う際は、レポートをコピーまたは共有してください。

リンクとリソースの確認

読み込まれたページのリンク、画像、外部スクリプト、スタイルシートをスキャンします。正常に動作するレスポンス、リダイレクトされたレスポンス、失敗したレスポンスを確認し、内部アドレスと外部アドレスを区別し、結果をフィルタリングして破損または安全でないリソースに絞り込みます。結果を検索したり、個々のURLをコピーしたり、テキストレポートをコピーして後で確認したりできます。リクエストの失敗は、サーバーの制限や接続状況を反映している場合もあります。

さまざまなビューポートを試す

スマートフォン、タブレット、デスクトップサイズに対応したレスポンシブプレビュープリセットを使用するか、カスタムサイズを入力します。ビューポートを回転させ、ズームを調整し、ライト、ダーク、またはシステムカラースキームを選択します。ウェブサイトが異なるサーバーレンダリングコンテンツを提供する場合は、別のユーザーエージェントでページを更新してください。現在のプレビューをスクリーンショットとして共有できます。シミュレートされたビューポートはレイアウトの比較に役立ちますが、すべての実機を再現するわけではありません。

プレビューの動作を確認する

コンソールビューアは、アプリの計測済みページプレビューからメッセージ、警告、エラーを収集します。ネットワークインスペクターは、キャプチャされたフェッチ、XMLHttpRequest、リソースアクティビティを、ステータスとタイミングの詳細とともに表示します。エントリをクリアし、プレビューを再読み込みし、フィルターを使用して特定の問題を調査できます。これらのツールは、他のアプリからのトラフィックではなく、プレビューを検査します。

便利な参照を保存する

抽出されたページ画像を参照し、ファイル名または形式で検索し、保存前に画像をプレビューできます。表示されているエクスポートビューポートのスクリーンショットを共有したり、読み込んだページのPDFを作成したりできます。PDFキャプチャは、ページ高さ16,000ピクセルに制限されています。お気に入りのURLを保存し、アドレス候補を使用し、最近の検査履歴を検索して、便利なサイトに戻ることができます。

ウェブサイトの読み込み、リソースチェック、リモートコンテンツにはインターネット接続が必要です。保護されたページ、ブロックされた画像、ブラウザのセキュリティルールによって、結果やエクスポートが制限される場合があります。ツールキットを使用して、アクセシブルなウェブコンテンツを調べたり、独自のアイデアをテストしたりできます。ライト、ダーク、システムアプリのテーマが用意されているので、快適に閲覧できます。