ChromeのDeveloperTool、横に表示させられるんだってよ

2013年06月14日

今RSSから見てかなり驚いたのでメモ。

@KazumaNishihataさんの記事「Google Chromeでスマホサイト制作 – to-R」で紹介されてたスマートフォンサイト制作時のChromeの使い方がすごかった。

通常の使い方

Developertool01

多分通常はこうやって使うんじゃないでしょうか。僕も大体これです。

DeveloperToolを独立させる

ただ、モニターって横には長くても縦は案外短いですよね。

だから出来れば横に表示させたいなぁって思って、左下のボタンを押せば独立したウィンドウになることを知ったわけです。

Developertool01 5

すると、別ウィンドウとしてDeveloperToolが立ち上がるので、割と快適になりました。最近はモニターも結構大きなモニターが安く売ってるので、「横が無駄にデカイ」と思う事もあるかと思いますが、これで無駄なく有効活用出来るようになりますね。

Developertool02

こんな感じ。見やすくなりました。

だだし、使いやすくはない

この状態で使ってみれば分かると思いますが、ブラウズしているウィンドウを操作している状態でCmd+Tabでアプリ切り替えをやる場合は問題ないですが、ブラウザの裏に見えてるエディタをタップしてアプリを切り替えるような場合は面倒な感じになります。

またブラウズしているウィンドウをタップしても、DeveloperToolのウィンドウは後ろに隠れたママなんですね、まじめんどくさい。

今回それを解消する技を@KazumaNishihataさんに教わりました。ありがとう、ありがとう。

どうやら、さっきのボタンを長押しするだけでいいみたいです。

それだけでほら、こんなにステキ!!

Developertool03

レスポンシブの確認もやりやすい

@KazumaNishihataさんはスマートフォンサイト制作の場合なのでDeveloperToolのSettingで横幅を切り替えてましたが、僕はどっちかというとレスポンシブで作るケースの方が多いので、ウィンドウをうぃにょーんって縮めたりしたいわけです。そう、自由に。

でも、Chromeって320pxまでウィンドウを小さくできなくね?

これって僕だけなの?400pxまでしか縮められません。

Developertool02 5

これが結構面倒だなぁっておもってたんですが、それも解消できます。

Developertool04

うにょーんって。

Developertool05

ほら!うにょーんって!!

これすげー便利!!

これでもうDeveloperToolを開いたり閉じたりしなくてよくなりました。もう出しっぱなしですよ。あけっぴろげ。フルオープン。最高じゃないですか!

以上、現場よりお伝えしました。

他にこんな事も書いてます

FBでコメント