「Google Chrome デベロッパーツール」の使い方

Google Chrome デベロッパーツール とは

Google Chrome Developer Tools(以下、デベロッパーツール)とは、Webブラウザ「Google Chrome」に付属している開発ツールです。
デベロッパーツールは、今表示しているWebページがどのように作られているか、またどのようにネットワークの処理を行っているかなどの情報を確認または変更できます。

今回は、デベロッパーツールでHTML・CSSの確認と編集の使い方について紹介していきます。

起動方法

ブラウザウィンドウの右上にあるツールメニューから、[ツール]から[デベロッパーツール]をクリックすると起動します。

起動するとデベロッパーツールはウィンドウの下に表示され、Webページがどのように作られているかなどの情報を確認または変更することが出来ます。

上記の方法以外にデベロッパーツールを起動する方法があります。
こちらのほうがオススメなので紹介します。

ページ内の適当な箇所をマウスで右クリックをすると、コンテキストメニューの一番下に[要素を検証]という項目がありますのでクリックします。

クリックすると、デベロッパーツールが起動し、マウスの下にある要素の情報が表示されます。

パネルの説明

デベロッパーツール内にタブがあります。その機能について簡単にまとめておきます。

パネル名 機能
Elements HTML・CSSの確認と編集
Resources ネットワークの監視
Scripts JavaScriptのデバッグ
Profiles JavaScriptのパフォーマンスチェック
Storage Cookie, localStorageの確認・編集
Timeline レンダリングを含めたパフォーマンスチェック
Audits YSlowのようなパフォーマンスチェックツール
Console JavaScriptのコマンドラインツール

今回は、「Elementsパネル」の使い方について書いていきます。

HTMLの編集

デベロッパーツールを使ってHTMLの編集をしてみましょう。

まず、デベロッパーツールを起動してください。

次に、左下に「虫メガネ」アイコンをクリックして、調べたいWebページ上に表示されている要素をクリックするだけで、該当箇所に使用されているHTML、CSS、width、heightを確認することができます。

下記にHTMLツリーの色が青くなっているところが、先ほど「虫メガネ」で選択したところになります。

右クリックメニューから「Edit as HTML」を選択すると、その場で編集して、その場でその変更を確認することができます。
この編集はEnterキーなどで確定されるまで実際の画面には反映されないので気を付けましょう。

「北海道」という文字を「北海道テスト」に編集してみました。

なお、Webページを更新すれば元に戻すことが出来ます。

CSSの編集

今度は、CSSの編集をしてみましょう。やり方はHTMLの編集と同じです。

HTMLツリーの右側にある、HTMLツリービューで選択している要素についてCSSの指定や要素の位置関係などをチェックすることができます。

さらに、その要素が持っているstyle属性をマウスオーバーすると右側にチェックボックスが表示され、そのプロパティを一時的にオフにしたり、プロパティをダブルクリックすることでその場で値を編集することができます。

実際にやってみます。
都道府県リストの「padding: 5px 0px;」の値を変更したいと思います。

「padding: 20px 0px;」に変更してみました。

上記の画像と比べると都道府県リストの上下の隙間が広くなったことがわかります。そのほかに、フォントのサイズや色、背景色の色など自由にその場で変更することが可能です。

まとめ

今回はデベロッパーツールの「Elementsパネル」(HTML・CSSの確認と編集)について解説してみました。
まだ説明していない「Resourcesパネル」(ネットワークの監視)や「Scriptsパネル」(JavaScriptのデバッグ)など便利な使い方があります。
その解説はまた次回。お楽しみに!

カテゴリー: Webサイト, スマホアプリ, 技術開発 パーマリンク