Responsive Tester - モバイル表示・ブレークポイントチェッカー・CSSエディター

複数の画面で同時にページをプレビュー。モバイル表示、あらゆる画面サイズとブレークポイントを確認し、CSSをライブ編集。

Responsive Tester は、ページがあらゆる画面サイズでどう動作するかを一度にまとめて確認できる、最速の方法です。同期された複数のビューポートを横一列に並べて任意のウェブサイトを開き、スマートフォン、タブレット、デスクトップを並べて表示できます。1 つの画面でクリック、スクロール、入力すると、ほかのすべての画面が追従します。要素を選んで CSS をライブ編集すれば、変更がすべてのブレークポイントに即座に反映されます。 使い方 - アイコンをクリックする、右クリックのコンテキストメニューから選択する、またはショートカット Alt/Option + Shift + V を使って拡張機能を切り替えます。 - 内蔵のデバイスプリセットからビューポートを追加するか、カスタムの寸法を入力します。 - サイト独自のブレークポイントを検出し、それに合ったビューポートをワンクリックで作成します。 - 任意のビューポートをスクロール、回転、リサイズ、ズームでき、任意のフレームのきれいなスクリーンショットを撮影できます。 - インタラクション同期をオンにすると、クリック、ホバー、入力、ナビゲーションをすべての画面にミラーリングします (Pro)。 - エディタを開いて要素を選び、すべてのブレークポイントにわたって CSS をライブ編集します (Pro)。 機能 - スクロールする横一列、またはグリッドに折り返した状態で、任意のページを複数の同期ビューポートでプレビュー。 - スクロール同期により、ページ内のスクロール領域も含めてすべてのビューポートが揃った状態を保ちます。 - 人気のスマートフォン、タブレット、デスクトップ向けの内蔵デバイスプリセット。 - カスタムビューポートの寸法。 - サイトのブレークポイント検出は、ページ独自のメディアルールを読み取り、それに合ったビューポートを作成します。 - 任意のビューポートを縦向きと横向きの間で回転。 - ドラッグでビューポートをリサイズし、その中間の幅もテスト。 - より多くを画面に収めるための連続ズーム。 - 任意のビューポートのワンクリックスクリーンショット。 - システムに追従する、またはどちらかに固定できるライトテーマとダークテーマ。 - 通常はフレーム内での読み込みを拒否するサイトを含め、あらゆるウェブページで動作。 - ツールバーのアイコン、右クリックのコンテキストメニュー、またはキーボードショートカットからアクセス。 - chrome://extensions/shortcuts にアクセスして、キーボードショートカットをカスタマイズ。 Responsive Tester PRO PRO ティアでは、プレビューを制作へと変える 2 つの機能が解放されます。 - インタラクション同期: クリック、ホバー、フォーム入力、キー押下、ページナビゲーションがすべてのビューポートにリアルタイムでミラーリングされるため、1 つの画面を操作しながらマトリクス全体が反応する様子を見られます。要素のマッチングはインタラクションごとに検証されるため、同期されたアクションが誤った要素に届くことはありません。 - ライブ CSS エディタ: 任意の要素を選び、@media クエリを完全にサポートするサイドエディタでそのルールを編集できるため、各変更が自動的に正しいブレークポイントに反映されます。:hover や :focus といった疑似状態を強制し、すべての変更を元に戻したりやり直したりでき、編集がすべてのビューポートに一度に即座に適用される様子を確認できます。 PRO は買い切りの支払いで生涯利用でき、3 回のアクティベーションに対応します。すべてのインストールにカード不要の 7-day 無料トライアルが含まれ、さらに 30-day の返金保証が付いています。 対象ユーザー - 開発者: レイアウトのずれやブレークポイントのバグを、リリース前に見つけられます。スマートフォン、タブレット、デスクトップを並べ、1 つのウィンドウを何度もリサイズする代わりに、すべてを一度に操作できます。 - デザイナー: 最小のスマートフォンから最も幅広いデスクトップまで、あらゆるサイズで制作物が崩れないこと、そしてレスポンシブな挙動が意図どおりであることを確認できます。 インストール - Google Chrome 116+ での安定性を特に重視して設計されています。 - あらゆる Chromium ブラウザにインストール可能です。ただし、最適な体験のために、お使いのブラウザが必要なすべての API (Offscreen など) をサポートしていることを確認してください。インストールに問題がある場合は、ブラウザを最新バージョンに更新してから、もう一度お試しください。