PCやスマホ、タブレットの画像

GoogleChromeのデベロッパーツール(開発者ツール)の便利機能

こんにちは、渋木です。

先日、とうとう東京でも雪が降りましたね。私の家の周りでも昼間は少しだけ積もっていましたが、夜になるまでに全部溶けてました。諸行無常を感じますね。

さて今日は、フロントエンドエンジニアならほぼ全員がお世話になっているはずの、GoogleChrome「デベロッパーツール(開発者ツール)」についてお話しようと思います。

かなり有名なツールなので、今更勉強することなんてないよ!という方もいるとは思いますが、私も最近まで知らなかった便利機能があったりしたので、これを機にまとめておこうと思った次第です。どうぞお付き合いください。

デベロッパーツールとは「WEBサイトの検証(デバッグ)機能」として、GoogleChromeやFirefoxといった各ブラウザに標準で備わっている、その名の通り、主にWEBエンジニア向けに用意されているツールです。

実際にホームページやWEBアプリを閲覧しつつ、HTMLやCSS、JavaScriptといったプログラミングコードをリアルタイムで検証することが出来ます。

正直、デベロッパーツールが無くなると、もはやWEBエンジニアの仕事はまともに成り立たなくなるのでは・・?と言えるくらい、私も毎日お世話になっている機能です。有難い。。

起動方法はとても簡単で、GoogleChromeのデベロッパーツールはショートカットキーが用意されています。

・Windows
⇒「F12」キー
・Mac
⇒「option」+「command」+「 i 」

エンジニアではない皆さんも、お使いのPCでGoogleChromeを開き、実際に試してみてください。

お待ちかね、デベロッパーツールの主な便利機能をご紹介したいと思います。

GoogleChromeデベロッパーツールの最も代表的な機能がこちらになります。画像の通り、デベロッパーツール上で表示中のWEBサイトのHTML、そのDOM構造がエディターツールのように可視化されています。

デベロッパーツールでHTMLを編集その一。
デベロッパーツールでHTMLを編集その二。
デベロッパーツールでHTMLを編集その三。

ここを操作することで、DOM構造を書き換えてみたり、あるdiv要素の中にpタグやspanタグを追加してみたり、逆に減らしてみたりと、自由に弄くりまわすことが出来ます。もちろんCSSも同様に編集が可能です。

デベロッパーツールでCSSを編集。
ここでは記事一覧のリストを一つ分、丸々コピーして、同じリストを2つに増やしています。

ちなみにこれらの機能は、あくまでブラウザ上で一時的に編集しているだけなので、実際のHTMLやCSSファイルには何の影響もありません。つまり、デバッグはしたいけどファイル内容は変更したくない!という、エンジニアにはうってつけの機能なのです。

border、margin、padding、width、heightといった値をリアルタイムで確認。

上記の機能と関連していますが、CSS部分の右側にいくつかの四角い箱が重なっているような図が表示されています。

これは選択中のHTML要素がもつ、border、margin、padding、width、heightといった値をリアルタイムで確認するためのものです。

たとえば、AとBの二つのdiv要素間に余白50pxがあったとして、どちらのdivが持つ余白なのか、この余白がmarginなのかpaddingなのか、何pxなのか、div要素そのもののwidthやheightは何pxなのか、といった情報を一目で判断することが出来るのです。便利ですね。

この機能、実はつい最近まで知りませんでした。。最初に働いたWEB制作の会社では、FireMobileシミュレーターというGoogleChromeの拡張機能を利用していたので、デベロッパーツールのディスプレイ切り替え機能は特に必要なかったんですよね。。(何故か言い訳がましい)

下記画像のように、スマホとPCのディスプレイに切り替えられるボタンがあります。これをクリックし、ページを更新すると見事にスマホサイズのディスプレイに早変わりします。ちなみにもう一度クリックしてページを更新すると、きちんとPCサイズの元のディスプレイに戻ります。

スマホ用ディスプレイモードに切り替える様子その一。

何が凄いって、iPhoneやGalaxyといった実際の端末機器のサイズが最初から用意されているので、レスポンシブ対応サイトを作る時にいちいちスマホサイズを調べたりする必要がなくなります!至れり尽くせりですね。

スマホ用ディスプレイモードに切り替える様子その二。

いかがでしたか?WEBエンジニアにとって、デベロッパーツールがいかに欠かすことのできないツールであるか、ご理解いただけた事と思います。

それでは要点のおさらいです。

  • デベロッパーツールはWEBエンジニア向けのデバッグツールで、各ブラウザに標準装備されている
  • ショートカットキーは、Windowsは「F12」、Macは「option」+「command」+「 i 」
  • HTMLやCSSをブラウザ上で編集できる
  • 要素の持つborder、margin、padding、width、heightといった値をリアルタイムで確認できる
  • スマホ用ディスプレイモードに切り替えられる

デベロッパーツールには他にも色々な機能があります(私が知らない機能もきっとたくさんあると思います)。
皆さんもネットサーフィンの合間なんかに、色々と弄ってみて、遊びながら各機能に慣れてみると良いと思います!