初級フロントエンドエンジニアが知っておきたい基礎の基礎【Chrome DevTools編】

CODE
のり
のり

こんにちは!駆け出しフロントエンジニアのnoriです!HTML/CSS/JSの勉強をしていると、Chrome DevToolの話がちょいちょい出てくるので、アウトプットとして基礎の基礎をまとめたいと思います。

Chrome DevToolsとは?

Chrome DevTool(デベロッパーツール)とは

Google Chrome に組み込まれたウェブ作成およびデバッグツールのセットです。 DevTools を使用してサイトの反復処理、デバッグ、プロファイリングを行います。

Google developers 公式サイトより

のことです。

まずは、起動してみましょう!

起動方法

  1. Chromeのメニューから「表示」→「開発/管理」→「デベロッパーツール」
  2. 右クリック→「検証」
  3. Command + Option + i

パネル

デベロッパーツールには、9種類の機能(パネル)があります。以下は、Yahoo!のサイトをデベロッパーツールで見た時の画像です。

  • Elements
  • Console
  • Sources
  • Network
  • Performance
  • Memory
  • Application
  • Security
  • Audits

今回は、HTML/CSS/Javascript/jQueryなどでよく使う、「Elements」パネル、「Console」パネル、「Sources」パネルを中心にまとめます。

Elementsパネル

Elementsパネルでは、DOMとCSSを自由に操作してサイトのレイアウトやデザインを確認、編集することができます。

引き続き、Yahoo!のサイトを事例に見ていきましょう。Elementsパネルを押したら、左側がHTMLのDOMツリー、右側がスタイル(CSS)になっています。

ここで、Elementsタブの左にある□と矢印のアイコンを選択し、左のYahoo!のサイトをマウスオーバーしてみます。すると、HTMLの該当の要素がハイライトされているのがわかります。

Webサイトの気になる部分がどんな要素で、どのようなCSSで出来ているのか表示されるので、Webデザインの参考にもなります。また、要素の表示だけではなく、編集することも可能です。

続いて、CSSを編集してみましょう。html要素の中に<div id="navi">という要素があります。この要素を選択すると、右側に#naviのCSSが確認出来ると思います。

このスタイルのfloatプロパティの値をダブルクリックすると編集することができます。

ここでは、左側(left)にあったnaviを右側(right)に変更してみましょう。すると、先程左側にあったnaviが右側に移動していることが確認出来ると思います。

これは、ブラウザの中での変更なので、Yahoo!の直接のサイトを変更したわけではありません。更新をすると元に戻ります。また、CSSではプロパティの左側にあるチェックボックスを外すことで、プロパティの適用を外すことも簡単にできます。

このように、CSSを変更して見栄えを簡単に確認できることができます。

また、HTMLの編集も同様におこなうことができるので、是非試してみてください。

Console

Consoleパネルでは、JavaScript の実行環境として利用することができます。試しにJavascriptを書いてみましょう。Enterを押すと実行されてしまうため、改行するときはShiftを押してEnterを押します。

このようなJavascriptの文を書いて、Enterを押すと。。。。

実行されました。

他にも、記述や実行で発生したエラーの表示や、console関数によって出力されるログなどが表示されます。ちなみに、最後にundefinedと書かれているのは、戻り値などの結果を返さない場合に表示されます。

Sources

Sourcesパネルは、読み込んでいるファイルの中身を確認することができます。また、ブレークポイントを設定でき、Javascriptのコードを一度止めて、変数の値などを確認しながら一行一行ステップ実行できます。

その他のパネル

その他のパネルについて、何ができるかを簡単にまとめます。

Network
どのファイルが、どのタイミングで、どのくらいの時間をかけて読み込まれたか確認することができます。

Performance
ブラウザの描画のパフォーマンスやメモリの利用状況を確認することができます。

Memory
メモリのアロケーションなどを確認することができます。

Application
ローカル ストレージやセッション ストレージ、Cookieなど読み込まれたすべてのリソースを調査することができます。

Security
証明書の問題などセキュリティに関する問題をデバッグすることができます。

Audits
Lighthouseというツールを使って、パフォーマンスに関する提案をしてくれます。

まとめ

いかがでしたか?

他にもデベロッパーツールで出来ることはたくさんありますので、公式サイトなどを確認して活用していきましょう!

コメント

タイトルとURLをコピーしました