読者です 読者をやめる 読者になる 読者になる

pixyzehn blog

iPhone App, Mac App, Programming, Web service, Tool, Evernote, etc

Chromeデベロッパーツールの目的に合わせた使い方

Chrome

今回はChromeにおいて右クリックで要素の検証を押すと表示されるデベロッパーの目的に合わせた使い方について紹介したいと思います。

 

f:id:inagex:20130904092624p:plain

 ※自分のデベロッパーツールは色をカスタマイズしています。

 

フロントサイドの実装をするときには必須のツールであるデベロッパーツールですが、ここでは使い方は説明しません。

 

使い方はドットインストールなどを見るととてもわかりやすいです。

 

Chrome Developer Tools入門 (全12回) - プログラミングならドットインストールChrome Developer Tools入門 (全12回) - プログラミングならドットインストールはてなブックマーク - Chrome Developer Tools入門 (全12回) - プログラミングならドットインストール

 

 

 

 

PCとスマホでの使い分け

ここではスマホとPCでの使い方についてとても使いやすい方法を見つけたので、紹介します。(普段からこのように使っている方もいると思いますが。。)

 

まずデフォルトの状態でデベロッパーツールはブラウザの画面内に入っているかと思います。

 

この状態は左下のボタンを長押しして切り替えることで別画面表示にすることができます。

 

f:id:inagex:20130904093353p:plain

この別画面表示は、おもにPCの開発環境に最適です。

 

なぜなら、別画面で表示されるのですべての要素を指定でき、画面固定などがされていてもすべての要素が見れるからです。

個人的には同じ画面表示だとかなり窮屈です。

 

PCのコーディングをするのであればこのような設定にするのが、いいでしょう。

 

そしてデフォルトの状態に戻します。

 

デフォルトの状態つまり画面内にデベロッパーツールを表示するにも2通りの方法があることがわかります。

 

この横画面表示ははスマホの実装をするときに最適です。

 

このようにスマホのサイズにぴったりで空いたスペースにデベロッパーツールという効率的な開発ができます。

 

スクリーンショット 2013-09-04 9.39.26

 

ぜひ参考にしてみてください。