• このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

こんにちは。
今回はWeb制作でのデバッグやチューニングに役立つ、Google Chromeのデベロッパーツールを紹介します。デベロッパーツールは非常に多機能なツールですが、今回は基本的な機能に絞って紹介します。

デベロッパーツールでできること

  • HTMLの要素の情報やCSSでのスタイリングの状態の確認
  • スマホやタブレット等の他デバイスでの表示確認
  • ページ内に存在するエラーや警告の確認
  • ページのリクエストをしてからの通信内容を一覧で確認

・・・等々。

中でも最もよく使われるのがHTMLやCSSの状態の確認だと思います。
ページで表示崩れが発生した時などに、特定箇所のHTMLやCSSがどのように反映されているかリアルタイムで確認できるので、問題箇所をスピーディーに特定できます。また他社サイトのコードも確認できるので、「この部分どうやって書いているんだろう?」と思った箇所を効率よく調べることができて便利です。

起動方法

はじめにディベロッパーツールの起動方法についてご紹介します。まずはGoogle Chromeで適当なページを開いてみてください。

livedoor

この状態で【右クリック > 検証】で起動できます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-06_11_24_41

また毎回右クリックをせずに、キーボードショートカットで起動することも出来ます。Windowsであれば【F12】を、Macであれば【Command+Option+I】でも開くことが可能です。起動すると以下のような画面に赤枠箇所が表示されます。

livedoor_%e3%81%a8_wunderlist

今回は下図の「Elements」パネルの基本的な使い方を見ていきたいと思います。

livedoor-2

HTMLの操作

まずはHTMLを操作してみましょう。下図のアイコンをクリックしてみましょう。

livedoor-3

そして、ページ上の「主要」と書かれている部分をクリックしてみましょう。クリックした要素に対応するHTMLの箇所がハイライトします。

livedoor_%e3%81%a8_wunderlist-2

エリア内の「主要」という部分をダブルクリックしてテキストを「あいうえお」と書き換えてみましょう。ページも「あいうえお」とリアルタイムで反映されてます。

livedoor-4

CSSの操作

次はCSSを操作してみましょう。下図の赤枠箇所で操作ができます。この箇所ではHTMLの該当箇所に影響を与えている全てのCSSが確認できるので便利です。「想定していたCSSが適用されない!」といった場合に楽に原因を調べることができます。

livedoor_%e3%81%a8_wunderlist-3

例えば下図のように背景色を変えてみましょう。

livedoor_%e3%81%a8_wunderlist-4

すると下図のようにリアルタイムでサイトに反映されます。

livedoor-5

上図のようなプロパティの編集の他、プロパティの追加や削除や無効化、新しいCSSの追加等も行えます。

当たり前ですが、ディベロッパーツールで加えた編集はブラウザ上のみで適用されるものですので、サイトの読み込みをしてしまうと元に戻ってしまうので注意してください。

終わりに

いかがでしたでしょうか。今回はデベロッパーツールのごく一部の機能の紹介でしたが、ここに挙げた機能の他にも様々な機能があります。またChrome以外でも、SafariやFirefox、InternetExplorer等、他のブラウザでも同様の機能があります。いろいろ触ってぜひ使いこなしていきましよう。