- レスポンシブデザイン、アクセシビリティ、パフォーマンステストなど、Webサイトの開発・デバッグ・テスト向け機能を統合したデスクトップブラウザー（Chromiumベース）
- すべての作業がリアルタイムで同期され、さまざまなサイズのビューポートを同時に確認・操作可能
- クリック、入力、スクロール、hover など、あらゆる操作がすべてのビューポートに即座に反映される
- Mac、Windows、Linuxで利用可能で、14日間の無料トライアルあり
主な機能の概要
-
レスポンシブデザイン
- モバイルから5Kモニターまで、あらゆるビューポートをひと目で確認可能
- ブラウザーサイズを手動で調整しなくても CSS ブレークポイントをテスト可能
-
リアルタイム分析と同期
- スクロール、クリック、入力、hover まで、すべての操作が全ビューポートでリアルタイムに同期される
- コンソールや要素インスペクターも統合されており、繰り返し作業を減らせる
-
アクセシビリティとパフォーマンス検査
- 構造、メタデータ、アクセシビリティ（A11y）をリアルタイムでチェックし、改善点を提示
- 40種類以上のデバッグツールを搭載し、多様な方法でテスト可能
-
ダークモードと各種メディアテスト
- OS設定を変更せずにダーク／ライトモードを同時にテスト可能
- モーション削減、データ節約モード、印刷スタイルなど、さまざまなメディア条件をシミュレーション
-
ソーシャルメディアカードのプレビュー
- Twitter(X)、Facebook、Slack、LinkedIn、Discord など主要プラットフォームのメタカードプレビューに対応
- ライト／ダークモードや localhost 状態でもピクセル単位で正確なプレビューを提供
-
開発者ツール拡張のサポート
- React、Vue、Angular、Svelte、Redux など各種 DevTools 拡張機能を利用可能
- Chromiumベースのブラウザーのため、親しみやすい開発環境を提供
Polypaneならではの強み
- 単一のブラウザーで多様なデバイスと環境をテスト可能
- 開発・デザインのワークフロー速度を最大5倍向上
- 多機能デバッグツール、アクセシビリティ検査、ビューポート同期、スクリーンショット、リアルタイムリロードなどを備えたオールインワン構成
- ユーザーフィードバックをもとに進化しており、100%ユーザー中心の自己資金プロジェクト
その他の主な機能一覧
- 無制限のビューポート作成
- キーボード、hover、スクロールの同期
- グリッドオーバーレイ
- JSONビューアーと多様なデバイスプリセット
- 水平オーバーフロー検出
- ビジュアルデザイン比較（diff）
- 色覚異常シミュレーション
- メタデータ概要
- Web Vitals チェッカー
- タッチエミュレーション
- 壊れたリンクの検出
- カスタムヘッダー設定
- ワークスペースの保存・共有機能
開発者からひと言
- 開発者 Kilian Valkhof が、数多くのWebサイト制作で感じた不便さを解消するために始めたプロジェクト
- Chromeだけを使っていたときより作業速度が約60%向上し、ユーザーも2〜5倍の生産性向上を実感
- 投資なしでユーザーのフィードバックと購読によって運営されるプロジェクトであり、開発者中心のツール開発に注力
ユーザーレビュー要約
- Vivian Guillen: 「とても速く、スクロール同期が素晴らしい」
- Scott Tolinski: 「ブレークポイント間の余白の問題を簡単に発見できる」
- Sara Soueidan: 「デバッグツールが本当に素晴らしくて感心した」
- Kevin Powell: 「アクセシビリティ検査とデバッグ機能が卓越している」
- Segun Adebayo (Chakra UI 開発者): 「モダンなアプリやサイト開発に欠かせないツール」
4件のコメント
https://responsiveviewer.org/
Chrome拡張として配布されているものもあります。一部の機能をあきらめるなら、拡張なしですぐに使うこともできます。
微妙に見つけにくいのですが、GitHub Student アカウントを連携すると無料で利用できます。おかげで以前の個人プロジェクトでとても役立ちました。
機能はやや不足していますが、似たようなブラウザーがあります。
https://responsively.app/
Polypane が有料なので迷っている方は、一度使ってみることをおすすめします。
Hacker Newsの意見