Browser DevTools

ブラウザのDevToolsの概要、スクリーンショットとレスポンシブテストでの使い方、主な機能を解説します。

ブラウザのDevToolsは、Webブラウザに組み込まれた開発者向けのツールです。Chrome DevTools、Firefox Developer Tools、Safari Web Inspectorがこれに当たります。ページの構造とスタイルの表示、JavaScriptの出力のログ、ネットワークリクエストの記録、パフォーマンスのプロファイリングを行えます。

多くのDevToolsはデバイスのエミュレーションに対応しています。ビューポートの幅と高さ、デバイスピクセル比、ユーザーエージェント文字列を設定し、デスクトップのブラウザでもスマートフォンと同じようにページを表示させます。ただし、エミュレーションでは実機のブラウザエンジン、フォント、タッチ操作は再現されません。

Mac版のChromeでは、Option+Command+I でDevToolsを開きます。Safariでは、Web Inspectorを使う前に、設定で「開発」メニューを有効にする必要があります。

スクリーンショットでのDevToolsの機能

表示中のビューポート、スクロール可能なページ全体、選択した範囲、または単一の要素を撮影する。
撮影の前に、正確なビューポートサイズとデバイスピクセル比を設定する。
撮影の前に、クッキーバナーやチャットウィジェットなどの要素を非表示にしたり編集したりする。
ネットワークを低速に設定し、ページの読み込み中の表示を確認する。

レスポンシブモードとデバイスのエミュレーション

Chromeではデバイスツールバーと呼ばれるレスポンシブモードで、ページ領域を指定した幅と高さに変更できます。一般的なスマートフォンやタブレットのプリセットがあり、任意のサイズも指定できます。デバイスピクセル比の設定は、CSSピクセル1つがいくつの画像ピクセルになるかを決めます。たとえば、比率3で幅390ピクセルのビューポートは、幅1170ピクセルのスクリーンショットになります。

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

DevToolsを開きます。特定のサイズが必要な場合は、デバイスツールバーを有効にします。
Shift+Command+P でコマンドメニューを開きます。
「screenshot」と入力し、ビューポート、全体のサイズ、範囲、またはノードのコマンドを選択します。
ブラウザがPNGをダウンロードします。

よくある間違い

DevToolsをウィンドウ内にドッキングしたままにし、通常の撮影でビューポートが狭くなる。
エミュレーションをリセットし忘れ、以降の撮影がスマートフォンのサイズのままになる。
遅延読み込みの画像が表示される前に撮影する。
エミュレーションの結果を、実機でページが動作する証明と考える。

同じスクリーンショットを繰り返し撮りますか？

Temposhotの Website Capture は、URLのリストに対して Desktop 1920×1080、Tablet 768×1024、Mobile 390×844 で同じ撮影を繰り返します。詳しくは Webサイトのスクリーンショット自動化をご覧ください。

よくある質問

DevToolsでページ全体を1枚の画像として撮影できますか？

Chromeの「Capture full size screenshot」コマンドは、ページの全高を描画します。ただし、非常に長いページや遅延読み込みのページでは、結果が不完全になることがあります。

1ページだけを撮影する簡単な方法はありますか？

Chrome 116以降の Temposhot Full Page Screenshot 拡張機能は、表示中のページをスクロールし、1枚のPNGをダウンロードします。

出典

同じスクリーンショットを何度も撮っていますか？

Temposhot は、画面、ウィンドウ、または範囲をタイマーに従って連続で撮影し、その一式を PDF、画像、ZIP、または MP4 で書き出します。無料のブラウザツールは、1 枚の画像の処理に対応しています。

Mac版をダウンロード機能を見る