Chromeブラウザでスマホ表示を確認する時に便利なデバイスツールバーのオプション

Chromeブラウザでスマホ表示を確認する際にデベロッパーツールをよく利用するのですが、その中にあるデバイスツールバーのオプションが便利なことに気づいたのでご紹介いたします

Chromeブラウザのデバイスツールバーを利用する

まず、右上にあるアイコンから「デベロッパーツール」を選択します。

「デベロッパーツール」を選択

下記のようにスマホ表示になることを確認します。

スマホ表示を確認

次にデバイスツールバーにあるアイコンをクリックすると、利用できるオプションが表示されます。

利用できるオプションが表示される

「Show device frame」はデバイスツールバーで選択している端末のフレームが表示されます。

端末のフレームが表示

「Show media queries」はデバイスツールバーで「Responsive」を選択している場合、端末で表示されるウィンドウ幅を変更して確認することができます。

ウィンドウ幅を変更して確認

「Show rulers」はピクセル定規を表示させることができます。

ピクセル定規を表示

「Add device pixel ratio」はデバイスツールバーで「Responsive」を選択している場合、デバイスのピクセル比率を選択することができます。

ピクセル比率を表示

「Add device type」は「Responsive」を選択している場合、デバイスの種類を選択することができます。

デバイスの種類を選択

「Caputure screenshot」は表示されている部分のスクリーンショット行います。

表示されている部分のスクリーンショット

「Caputure full size screenshot」は表示されていない部分を含めたすべてのスクリーンショット行います。

表示されていない部分を含めたすべてのスクリーンショット

まとめ

デバイスツールバーのオプションはスマホ表示を確認する時に便利な機能なのでおすすめです。気になった方は一度お試しください。

スポンサーリンク