ブラウザ開発者ツール

ブラウザ開発者ツールは、Chrome、Firefox、Edge、Safariに標準搭載された機能です。拡張機能を追加せず、ページの検証、デバイスの再現、スクリーンショット撮影、レイアウトのデバッグができます。

Related workflow terms: ビューポートスクリーンショット.

スクリーンショットに使える機能

本来はデバッグ用のツールですが、スクリーンショット撮影や見た目のテストにも役立つ機能があります。

ブラウザ内のコマンドから、表示中の範囲、スクロールできるページ全体、特定のDOM要素を撮影できます。拡張機能や別のツールは不要です。現在のデバイスピクセル比でPNGを作るため、Retinaディスプレイでは2倍解像度の画像になります。

DOMインスペクターでは、撮影前にページの内容を一時的に変えられます。Cookieバナーやオーバーレイを隠す、文章を変える、スタイルを調整するといった操作で、不要な要素のない画像を撮れます。変更はローカルだけに適用され、再読み込みで消えるため、公開中のページには影響しません。

ネットワークの速度制限を使えば、低速回線を再現して読み込み中の状態、スケルトン画面、タイムアウト時の動作を撮影できます。通信状態が悪いときの表示を記録する場合に便利です。

レスポンシブモードとデバイスの再現

デバイスツールバーとも呼ばれるレスポンシブモードでは、実機を用意せずに表示幅や端末の特性を再現します。MacではCmd+Shift+M、WindowsではCtrl+Shift+Mで切り替えます。

iPhone、iPad、Pixel、Galaxyなどのプリセットを選ぶか、幅、高さ、デバイスピクセル比を入力できます。ブラウザが表示領域を変更し、ユーザーエージェント文字列も対象に合わせるため、レスポンシブのブレークポイントや端末向けCSSが適用されます。

複数の画面サイズでスクリーンショットを撮るときに便利です。実機を何台も用意せず、1回のブラウザセッションで表示幅を切り替えて撮影できます。マーケティング画像やドキュメントを複数のブレークポイントで作るときの確認を短時間で行えます。ただし、ピクセル単位の最終確認には実機も使うことをおすすめします。

DevToolsでスクリーンショットを撮る方法

Chrome DevToolsでは、Command Menuから複数の方法を選べます。

1. DevToolsを開きます：MacはCmd+Option+I、WindowsはCtrl+Shift+I
2. Command Menuを開きます：MacはCmd+Shift+P、WindowsはCtrl+Shift+P
3. 次のいずれかを入力します：
   • 「Capture screenshot」 — 表示中の範囲を撮影
   • 「Capture full size screenshot」 — スクロールできるページ全体を撮影
   • 「Capture node screenshot」 — 選択中のDOM要素を撮影
   • 「Capture area screenshot」 — ドラッグして選んだ範囲を撮影

Firefoxでは、ページメニューのスクリーンショット機能や、ブラウザコンソールで:screenshotと入力する方法があります。SafariのWeb Inspectorでは、Elementsタブのコンテキストメニューから撮影できます。

繰り返し撮影するなら、DevTools Protocolやヘッドレスブラウザで処理を自動化できます。1回だけすばやく撮る場合は、Command Menuから画像ファイルへ保存するのが簡単です。

実際の撮影作業では、撮影設定を自動化する前に、DevToolsで構図、ブレークポイント、個別の修正を確認できます。表示幅を確かめ、不要な要素を隠し、繰り返し撮影する価値があるページかを判断する場所として使えます。

よくある失敗

• デバイスピクセル比を設定しない。 レスポンシブモードの初期値は1x DPRです。Retina相当の画質が必要なら、デバイスツールバーでDPRを2または3にします。指定しなければ、実際のディスプレイにかかわらず標準密度になります。
• 実機確認の代わりとして使う。 DevToolsは表示幅とDPRを再現しますが、実機の描画エンジン、フォント、タッチ操作を完全には再現しません。簡単な確認や下書きに使い、最終判断は実機で行います。
• DevToolsパネルを開いたまま撮る。 インスペクターが画面を占有すると、実際の表示幅が変わります。正しい寸法で撮るには、DevToolsを別ウインドウへ分離するか、撮影前にパネルを閉じます。
• スクロール位置を確認しない。 「Capture screenshot」は見えている範囲だけを撮影します。折り返し位置より下が必要なら先にスクロールするか、「Capture full size screenshot」でページ全体を撮ります。