NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

Chromeの開発者向け機能を自分好みにカスタマイズする(その2)

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1240日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

 昨日の続きです。

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

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

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

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

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

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

便利な使い方

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

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

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

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

dev-tools_ss2

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

dev-tools_ss3

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

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

それでは。

TAGS