【僕の学習ノート】デベロッパーツールとは？分かりやすく解説
こんにちは、なおやです。
今日は、Courseraというプラットフォームで、Metaの社員さんたちから授業を受けました。
そこで得た学びが、下記のツイートです。
【#今日学んだ】デベロッパーツールについて
1. Webサイトの仕組みなどを調べたりすることが出来る
2. Macの場合「command + option + I」で開ける
3. 主な種類→Elementsタブ、Consoleタブ、Sourcesタブ、Networkタブ、Performanceタブ、Memoryタブ— Naoya (@kaigaiblog63) October 6, 2022
今回は、これを掘り下げて解説していきます。
この記事の信憑性
この記事は、Courseの授業を受けて、学び、理解したことを基に、僕なりの言葉と解釈で分かりやすく解説しています。まあ簡単にいうと、僕が学んだことのアウトプットノートです。※ 注意：僕はまだ日々学習している段階です。解説していることに間違いがある可能性も否定できません。何か間違いを見つけて下さった方は、このWebサイトの向上のと僕の学習の為に、教えてください🙏
» Courseraという素晴らしいプラットフォームはこちら (授業は全て英語です)
【僕の学習ノート】デベロッパーツールとは？分かりやすく解説
今回は、デベロッパーツールについて解説しました。
この記事の目次
デベロッパーツール (Developer Tool) とは？
デベロッパーツールとは、ほとんどのWebブラウザに備わっており、WebページのHTML、CSS、Javascriptなどのコードを確認することなどが出来ます。
またこれを使うことで、Webサイト上で何か問題が起こったときの原因などをより早く見つけられるようになり、結果としてWebサイトのパフォーマンスを向上させることが出来ます。
Chromeを使ったデベロッパーツールの表示方法
Windows版の起動方法
- Google Chromeの右上の3点リーダーアイコン（⋮）から、[その他のツール] > [デベロッパーツール]をクリック
- キーボード上の「Ctrl + Shift + i」をクリック
- Webページ上で右クリックを行い、[検証 (Inspect)]をクリック
Mac版の起動方法
- Google Chromeの右上の3点リーダーアイコン（⋮）から、[その他のツール] > [デベロッパーツール]をクリック
- キーボード上の「command + option + i」をクリックする
- Webページ上で右クリックを行い、[検証 (Inspect)]をクリック
タブ (パネル) の種類
デベロッパーツールの上部には、様々な機能を提供してくれるタブが沢山あります。
そこで今回は、その中でもよく使われるタブをご紹介します。
この章の目次
- 1. Elementsタブ (Elements Tab)
- 2. Consoleタブ (Console Tab)
- 3. Sourcesタブ (Sources Tab)
- 4. Networkタブ (Network Tab)
- 5. Performanceタブ (Performance tab)
- 6. Memoryタブ (Memory Tab)
Elementsタブ (Elements Tab) とは？
Elementsタブでは、HTMLやCSSのコードを確認したり、変更したりすることが出来ます。ここで行うコードの変更は、リアルタイムでWebページに反映されますが、これはWebサーバーに保管しているコードを変更している訳ではなく、Webページを開いている間のみローカルで変更されているだけなので、Webページを閉じたりすると消えてしまいます。
Consoleタブ (Console Tab) とは？
Consoleタブでは、「console.log」の出力結果、JavaScriptのエラーや警告などが表示されます。
Sourcesタブ (Sources Tab) とは？
Sourcesタブでは、サイトで使用しているファイルの確認やJSファイルにブレークポイントを設定したり出来ます。
Networkタブ (Network Tab) とは？
Networkタブでは、Webページを開くためのHTTPリクエスト・レスポンスの詳細やタイムラインなどを調査することが出来ます。つまり、開いている画面上で行われた通信の情報を見ることが出来ます。
Performanceタブ (Performance tab) とは？
Performanceタブでは、Webブラウザの動作記録を確認することが出来ます。またWebアプリケーションの動作が遅い時に、その動作を遅くしている原因の追跡に役立ちます。
Memoryタブ (Memory Tab) とは？
Memoryタブでは、どのコードが最も多くのリソースを消費しているかを表示します。
以上！