昨日の続きです。

今回はデベロッパーツールの表示周りについてです。

デベロッパーツールを画面横に表示

デベロッパーツールは実は画面下だけじゃなくて、画面の右側にも表示できます。

やり方は簡単で、デベロッパーツールが表示されている時に、左下にある、表示モード切り替えボタンを長押しすると出てくる、横表示ボタンをクリックするだけです。

切り替えたモード（横表示か別画面か）は保存され、次回からは長押ししないでも切り替えボタンをクリックするだけで前回使ったモードに切り替わります。

また、このボタンは横分割で下側に表示するデフォルトモードと切り替えた別モードのトグルになっているようで、押すたびにデフォルト表示と、自分が設定した別モードを行き来します。よって、横画面から別ウィンドウにしたいときなどは、また長押しする必要があります。

便利な使い方

PCの画面が大きくなったことにより、横画面配置でも見やすくなりましたが、それでもPCサイトはPC画面に合わせて横幅が広くなる傾向にあります。そうなるとあまりこの機能の恩恵を受けられないかも？とおもいますが、このモードが一番便利だろうなと思う状況が1つあります。

それは、スマホサイトのコーディングです。

デベロッパーツールはのオプション（右下の歯車アイコン）をクリックし、Overridesのなかにある、Device metricsを使うと、Chromeのレンダリング領域をスマホなどの画面サイズに合わせることができます。

しかし、通常これを使うと、当然ながら右側が余ってしまうのですよね。

ですが、この機能を使えばこの通り！

無駄なスペースが最小限になり、画面を効率的に使って開発が行えるようになりました。

これはスマホサイトの制作時には非常に役に立ちますのでスマホサイト作成している方はよかったら是非お試し下さい。

それでは。