超便利!Google Chrome「Developer Tools」 の使い方

今回はGoogle ChromeのDeveloper Toolsの使い方や機能の説明をします。

HTMLやCSSのコーディング、JavaScriptの実装にも欠かせないツールです。

WebデザイナーやWeb系のエンジニアを目指している人は、必ず使い方を覚えておきましょう。

Developer Toolsの使い方

まずは立ち上げ方です。

起動の仕方

ショートカットで立ち上げるなら、

  • Windows・・・F12、もしくは Ctrl + Shift + I
  • Mac・・・Opt + Cmd + I (Mac)

右クリックで立ち上げるなら、右クリック→「検証」です。

見た目はこんな感じ。

右側にあるメニューをクリックして、「Dock side」から表示させる位置を変えることができます。

私は別ウィンドウで表示させています。

立ち上げた時は、Elementsというタブを開いています。

ここでは、WebサイトのHTMLを見ることができます。

HTMLを見るには「ページのソースを表示」という方法がありますが、Developer ToolsならJavaScriptで書き換えられた後のHTMLやiframeの中身なども表示されます。

ですので、JavaScriptの挙動を見るにはDeveloper Toolsが必須になります。

特定の場所のHTML・CSSを確認

Webサイトを見ていると、そのサイトがどんなHTMLやCSSで組まれているのか知りたい時があります。

そんな時は、以下の手順でHTML・CSSを確認できます。

クリックしたら、調べたい要素にカーソルを持って行ってください。

そこでクリックすると、該当のHTMLとCSSが表示されます。

実はこうやらないでも、調べたい要素上で右クリック→「検証」でも大丈夫です。私はいつもそれでやっています。

HTML・CSSをいじってみよう

Developer ToolsのHTMLやCSSコードは書き換えることができます。

書き換えることで、リアルタイムで表示の確認ができます。

たとえば、px数を微調整したり、テキストの長さを変えてみたりと、細かい挙動を見たい時に重宝します。

試しにいじってみましょう。変更したい箇所を、先ほどの手順で選択します。

選択したら、右側に該当する箇所のCSSが表示されます。

ここの値は、直接変更して表示を確認することができます。

試しに変更すると、以下のように実際の表示もリアルタイムに変化します。

お次はHTMLを書き換えてみます。

該当箇所で右クリック→「Edit as HTML」を選択します。

そうすると、HTMLを編集することができます。

タイトルを書き換えてみました。

これは疑似的に変更しているだけなので、ページを再読み込みすると元に戻ります。

指定されているプロパティを一気に確認

Computedタブを開くと、その要素に適用されているCSSが一覧で表示されます。

emとか%で指定されていると、実際のpx数が分かりませんが、ここから見るとpx数で表示されます。px数で確認できるのは便利です。

Console

JavaScriptを使っている人は、Consoleを頻繁に使っていると思います。

console.log('Hello World');

色々出力できます。

<div id="js-elem"></div>
var elem = document.getElementById('js-elem');
console.log(elem);

取得した要素を表示させたり、

var elem = document.getElementById('js-elem');
elem.addEventListener('click', function(e){
  console.log(e);
});

中身がよく分からないオブジェクトを表示させたりできます。

Consoleはとても便利です。

まとめ

Developer Toolsを使いこなすと、めちゃくちゃ便利です。私は、これなしでWeb制作をするのは考えられません。

是非使い方を覚えて、Web制作に役立てて下さい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です