Chromeの検証ツール（DevTools）入門

記事を書いた経緯としては、フロントエンジニアやWeb開発している人かかわらず、利用する必要性が高いツールだと感じたことと、特に学ぶ機会が自分はなかったため、まとめてみました！

## はじめに

この記事では、Google Chromeの検証ツール（DevTools）について詳しく解説します。DevToolsは、Web開発者やデザイナーにとって非常に強力なツールであり、デバッグやパフォーマンス評価、コードの改善などに活用されます。本記事では、DevToolsの基本的な機能や使い方をわかりやすく解説します。

## 対象者
- エンジニア初学者
- フロントエンド技術の学習者

## 1. DevToolsの起動方法

DevToolsは簡単に起動できます。以下の方法でアクセスします。

1. Google Chromeを開く。
2. ページの任意の部分で右クリックして、「検証」を選択する。
3. キーボードショートカット（Windows: Ctrl + Shift + I, Mac: Cmd + Option + I）を使って起動する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/9cc3a436-af3a-6f04-a331-cae1137f3985.png" width="500"></img>

## 2. 主な機能
DevToolsには、さまざまな機能が用意されています。ここでは、主な機能をいくつか紹介します。

### 2.1 Elementsパネル

Elementsパネルは、HTMLとCSSを視覚的に表示する機能があります。要素の構造を確認したり、スタイルを直接変更したりすることができます。ページの特定の要素を選択すると、その要素に関連するHTMLとCSSのコードを見ることができます。また、要素の位置やサイズを調整する際にも役立ちます。
![スクリーンショット 2023-08-11 16.17.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/2ed3f7f1-c0e3-b8f8-8517-945bf8d3a99d.png)

### 2.2 Consoleパネル

Consoleパネルは、JavaScriptのエラーやデバッグ情報を表示する機能があります。開発者はコンソールを使ってJavaScriptのコードをテストしたり、ログを記録したりすることができます。また、コンソールにJavaScriptのコードを入力して実行することもできます。これは、特定の操作を自動化したり、実際のページでの挙動をシミュレートしたりする際に便利です。
![スクリーンショット 2023-08-11 16.18.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/29f891f4-2486-794d-904f-96c1504fdf31.png)


### 2.3 Networkパネル

Networkパネルは、ページのリクエストとレスポンスをモニタリングする機能があります。Webページが読み込まれる際に、ブラウザは複数のリクエストをサーバーに送信します。これにはHTML、CSS、JavaScriptファイル、画像、APIへのリクエストなどが含まれます。Networkパネルでは、これらのリクエストとレスポンスの詳細な情報を確認できます。これにより、ページの読み込み速度やパフォーマンスに関する問題を特定し、改善することができます。
![スクリーンショット 2023-08-11 16.20.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/05127f7c-b92c-7022-ecb8-87a58213b755.png)


### 2.4 Performanceパネル

Performanceパネルは、ページの読み込みや実行時のパフォーマンスを評価する機能があります。Webページのパフォーマンスを最適化することは重要であり、ユーザーエクスペリエンスやSEOにも影響を与えます。Performanceパネルでは、ページの読み込み時間やスクリプトの実行時間、レンダリングの遅延などを詳細に分析できます。また、JavaScriptやCSSのボトルネックを特定して最適化することも可能です。
![スクリーンショット 2023-08-11 16.22.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/e2e7fda0-9e59-4f9a-2c34-578fc0891d47.png)


## 3. Tipsとトリック

DevToolsのさまざまなTipsとトリックを紹介します。

### Tip 1: Consoleの使い方
Consoleパネルは、デバッグに非常に役立つツールです。コンソールには、エラーメッセージやログメッセージを表示するだけでなく、JavaScriptコードを実行することもできます。例えば、以下のようにJavaScriptのコードを入力してEnterキーを押すと、その結果を即座に確認することができます。
```javascript
console.log('Hello, DevTools!');
```
![スクリーンショット 2023-08-11 16.29.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/1b945ede-7564-b86c-2941-341af894a8d3.png)

### Tip 2: デバイスモードの利用
DevToolsには、モバイルデバイスのエミュレーションモードもあります。これにより、Webページがモバイルデバイス上でどのように表示されるかをシミュレートすることができます。画面サイズやタッチイベントの動作をテストしたり、レスポンシブデザインの確認に活用できます。

１. 左上にあるデバイスボタンを押下した。
![スクリーンショット 2023-08-11 16.39.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/b2484e37-a0e3-2b92-644b-2da24162e854.png)
2. レスポンシブ設定の画面が出てくるため、そちらでデバイスのシミュレーションできます。
![スクリーンショット 2023-08-11 16.41.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/5521b92c-5106-6db6-e223-cab523839ba9.png)


### Tip 3: Networkの履歴をリロードしても残す
Networkの履歴をリロードしても残せる方法があります。これにより、リロード前とリロード後を比較することができます。左上にある「Preserve log」のチェックを入れて、リロードをするとリロードする前の状態も残ったままになります。
![スクリーンショット 2023-08-11 16.46.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/89ece651-5883-7470-1185-ebb2545d99e3.png)


## 4. Lighthouseの活用
Lighthouseは、DevToolsの一部として提供されるツールであり、Webページのパフォーマンスと品質を評価するのに役立ちます。Lighthouseは、ページの読み込み速度、アクセシビリティ、SEO、ベストプラクティスなどの側面をテストし、スコアを表示します。

Lighthouseを使うには、DevToolsを開いた状態で、上部のメニューにある「Lighthouse」タブを選択します。その後、「Generate report」ボタンをクリックすると、Lighthouseがページを分析して結果を表示します。
![スクリーンショット 2023-08-11 16.49.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/c7aa2ddb-b2e9-4411-3378-3946f7f4ee77.png)
![スクリーンショット 2023-08-11 16.50.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/e39b3c56-0804-6c4c-e62a-ae7e284fccc1.png)


Lighthouseのスコアは、Webページのパフォーマンス改善に役立ちます。スコアを向上させるためには、以下のような点に注意すると良いでしょう。

- ページの読み込み速度を向上させるために、画像の最適化やキャッシュの活用を検討する。
- アクセシビリティを向上させるために、適切なHTML構造やalt属性の追加を行う。
- SEOを向上させるために、適切なmetaタグの設定やタイトルの最適化を行う。
- ベストプラクティスに準拠するために、セキュリティ対策やHTTPSの導入を行う。

以下詳細記事です
https://blog.microcms.io/what-is-lighthouse/

## 4. おわりに
本記事では、Chromeの検証ツール（DevTools）の基本的な使い方と主な機能について解説しました。Web開発において、DevToolsは欠かせない強力なツールですので、ぜひ活用して効率的な開発を行ってください。