プログラミング初心者必見！Chromeデベロッパーツール便利機能まとめ

デバロッパーツールとは

デベロッパーツールとはGoogle Chromeに標準でついている機能で、開発者向けに以下のような様々な機能が搭載されています。

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

今回は、その中でも基本的な機能であるHTMLとCSSの確認と編集について説明していきたいと思います。webデザイナーやブログ制作をお仕事にしている方も、覚えると効率的に作業できるようになりますので、是非覚えておきましょう。

デベロッパーツール起動方法

まずデバロッパーツールの起動方法ですが、修正したいサイトブラウザ上で右クリックをして「要素の検証」を選択します。そうすると、下記のようにデベロッパーツールが起動され、そのページのソースコードが表示されます。

上の画像の右側がHTMLソース、左側がスタイルシートです。Chromeのデベロッパーツールは、英語表記のため、最初はとっつきにくく感じるかもしれません。しかし、HTMLとCSSの修正のほとんどは、一番右にある「Element」パネルで行えますので、今回は「Element」パネルを中心にご紹介していきます。それではさっそくデベロッパーツールでどんなことができるのかを見ていきましょう！

HTMLソースが実際のサイト上でどうなっているかが一目でわかる！

上の画像のようにHTML要素にカーソルを合わせるとブラウザ上の対応してる部分がハイライトされます。このようにデベロッパーツールを使えば、HTMLソースの要素が実際のサイト上でどのように働いているかが一目瞭然なので調整をする際に非常に楽になります。特にmarginやpaddingなどの範囲が色付きで表示されるので、ボックスの大きさや位置を変更するためにどこをいじればいいのかも簡単に判断できます。

ブラウザからソースコード上の要素を探す！

デベロッパーツール右上の虫眼鏡マークをクリックした状態でブラウザにカーソルを持っていくと、カーソルの部分のボックスが色付きで表示され、そこからソース上の要素を参照することができます。このようにデベロッパーツールを使うことで、一発で修正すべき箇所を見つけることができるのです！

ブラウザ上で変化を見ながらCSSを修正できる！

デベロッパーツールを使えば、HTML要素を参照できるだけでなく、ブラウザ上でスタイルシートをカスタマイズできます。つまり、リアルタイムに変化を見ながらデザインを修正することができるのです。また、これらの変更は、保存されることはないので、安心して編集することができます。そのため、実際に変更を適用したい際は、編集した内容をテキストエディタにコピペするのを忘れないように注意してください。それではスタイルシートの修正方法を見てみましょう。

スタイルの削除

まずはスタイルの削除方法を説明します。スタイルを削除したい場合は、CSSプロパティの左側にあるチェックマークを外すことで、そのプロパティを無効にすることができます。このように背景色を設定していたスタイルシートが削除されたことで、ブラウザ上でもその変化を確かめることができます。

値の変更

CSSプロパティか数字をクリックして編集することで、値を変更することができます。変更した結果をリアルタイムで見れるので、フォントサイズや余白などの微妙な調整が必要な箇所を修正する際に非常に便利です。

スタイルシートの追加

新しいスタイルシートは、CSSプロパティの左側の余白をクリックすると追加できます。文字を入力すると、予測変換が発動するようになっています。

まとめ

いかがでしたでしょうか。デベロッパーツールをうまく使えば、これまでの作業を格段に効率化することができると思いますので、是非この記事を参考にして理解を深めていただければと思います。