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

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

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

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

chromeデバイスツールバー 「デベロッパーツール」を選択
「デベロッパーツール」を選択

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

chromeデバイスツールバー スマホ表示を確認
スマホ表示を確認

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

chromeデバイスツールバー 利用できるオプションが表示される
利用できるオプションが表示される

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

chromeデバイスツールバー 端末のフレームが表示
端末のフレームが表示

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

chromeデバイスツールバー ウィンドウ幅を変更して確認
ウィンドウ幅を変更して確認

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

chromeデバイスツールバー ピクセル定規を表示
ピクセル定規を表示

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

chromeデバイスツールバー ピクセル比率を表示
ピクセル比率を表示

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

chromeデバイスツールバー デバイスの種類を選択
デバイスの種類を選択

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

chromeデバイスツールバー 表示されている部分のスクリーンショット
表示されている部分のスクリーンショット

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

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

まとめ

  • 「デベロッパーツール」を選択。
  • デバイスツールバーでオプションを利用する。

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

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!