Web制作者ならChromeデベロッパーツールを使いこなそう

前回に引き続き、Chromeについての記事です。今回はChromeデベロッパーツールをご紹介します。

Chromeで目的のページを開き、⌘+⌥+Iで開きます(WindowsであればF12)。

Screen Shot 2014-10-03 at 12.52.55

右クリックからも開けます。

CSSをリアルタイム編集

Elementsパネルをつかって、CSSやHTMLの要素を検証します。

Screen Shot 2014-10-03 at 12.53.14

ちなみにHTMLの特定の場所にカーソルをもっていくと、ブラウザ上でどこを選択しているのか確認することができます。

Screen Shot 2014-10-03 at 12.54.01

ここではマージンやパディングなども確認できるため、なんだか要素が揃わないな〜というときにも簡単に確認する方法として使えます。

要素を変えてみる

HTMLはリアルタイムで編集することができます。文字数の調整や、単語の改行設定など、うまく行ってるかリアルタイムで確認してみましょう。

Screen Shot 2014-10-03 at 12.54.43

CSSを変えてみる

目的部分をクリック(Developer Tool内)すると、右側にCSSのスタイル内容がでてきます。CSSで設定しているものに関しては、すべてリアルタイムで変えられます。

Screen Shot 2014-10-03 at 12.55.47

もちろん、カーソルを置いた時の動作やフォーカスがあたっときの動作などもこのように確認できます。

Screen Shot 2014-10-03 at 12.56.58

おまけ

コンソールからJavaScriptを打つこともできます。

Screen Shot 2014-10-03 at 12.58.45


という感じです。
Coda2など、リアルタイムで確認できるエディタもあるのですが、WordPressが動いている動的なサイトなどは毎度保存、更新をかけたりとリアルタイム性にかけてしまいます。

クライアントに見せながら反映させたりできるのも便利ですね。

注意点としては、ブラウザ上で変更するだけなので、更新をかけると変更はなかったこと(本来のファイルは変更されない)になります。その辺も同期してくれるサービスなどもあるので、いつかご紹介したいと思います!

フォローして続編をチェック

@universionsをフォロー