Chromeブラウザでスマホ表示を確認する際にデベロッパーツールをよく利用するのですが、その中にあるデバイスツールバーのオプションが便利なことに気づいたのでご紹介いたします
Chromeブラウザのデバイスツールバーを利用する
まず、右上にあるアイコンから「デベロッパーツール」を選択します。
![chromeデバイスツールバー 「デベロッパーツール」を選択](https://www.pc-weblog.com/wp-content/uploads/2017/12/chrome-device-tool0001.png)
下記のようにスマホ表示になることを確認します。
![chromeデバイスツールバー スマホ表示を確認](https://www.pc-weblog.com/wp-content/uploads/2017/12/chrome-device-tool0003.png)
次にデバイスツールバーにあるアイコンをクリックすると、利用できるオプションが表示されます。
![chromeデバイスツールバー 利用できるオプションが表示される](https://www.pc-weblog.com/wp-content/uploads/2017/12/chrome-device-tool0002.png)
「Show device frame」はデバイスツールバーで選択している端末のフレームが表示されます。
![chromeデバイスツールバー 端末のフレームが表示](https://www.pc-weblog.com/wp-content/uploads/2017/12/chrome-device-tool0004.png)
「Show media queries」はデバイスツールバーで「Responsive」を選択している場合、端末で表示されるウィンドウ幅を変更して確認することができます。
![chromeデバイスツールバー ウィンドウ幅を変更して確認](https://www.pc-weblog.com/wp-content/uploads/2017/12/responsive.gif)
「Show rulers」はピクセル定規を表示させることができます。
![chromeデバイスツールバー ピクセル定規を表示](https://www.pc-weblog.com/wp-content/uploads/2017/12/chrome-device-tool0009.png)
「Add device pixel ratio」はデバイスツールバーで「Responsive」を選択している場合、デバイスのピクセル比率を選択することができます。
![chromeデバイスツールバー ピクセル比率を表示](https://www.pc-weblog.com/wp-content/uploads/2017/12/chrome-device-tool1002.png)
「Add device type」は「Responsive」を選択している場合、デバイスの種類を選択することができます。
![chromeデバイスツールバー デバイスの種類を選択](https://www.pc-weblog.com/wp-content/uploads/2017/12/chrome-device-tool0011.png)
「Caputure screenshot」は表示されている部分のスクリーンショット行います。
![chromeデバイスツールバー 表示されている部分のスクリーンショット](https://www.pc-weblog.com/wp-content/uploads/2017/12/chrome-device-tool0007-577x1024.png)
「Caputure full size screenshot」は表示されていない部分を含めたすべてのスクリーンショット行います。
![chromeデバイスツールバー 表示されていない部分を含めたすべてのスクリーンショット](https://www.pc-weblog.com/wp-content/uploads/2017/12/chrome-device-tool0008-106x1024.png)
まとめ
- 「デベロッパーツール」を選択。
- デバイスツールバーでオプションを利用する。
デバイスツールバーのオプションはスマホ表示を確認する時に便利な機能なのでおすすめです。気になった方は一度お試しください。
コメント