Chrome開発者ツールの活用方法その2

# Sources

topの配下にあるものは、全てjavascriptや画像イメージ等のファイルが置かれている。
どのような画像が含まれているかを確認することができる。
![スクリーンショット 2024-07-16 19.18.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/60b92ff8-1296-f279-5a27-584c4ebaac8e.png)

javascriptのデバックができるようだが、自分自身がWebエンジニアではないので、今回はスキップする。

# Application

![スクリーンショット 2024-07-16 19.25.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/52a47010-702c-2385-331a-a76a42ded633.png)

実行した結果などを、ローカルストレージというところで、どのように保存しているかをみれる。

- Cookie
    - 有効期限があり、4Kほど。
- localstrage
    - 10Mほどあり、有効期限はない。
    - 結構早い。簡易的なデータベースである。
- sessionstorage
    - localstrageとほぼ一緒だけど、ウィンドウ：タブが閉じるとデータは消滅する。
    - 開いている間だけ保存する。

開発者ツールを開いたまま色々なページを移動すると、ここの内容が溜まっていくのがわかる

![スクリーンショット 2024-07-16 19.32.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/1dca9aca-92be-901f-28f8-692d504aa638.png)

- indexDB
    - DBという意味合いのDBである。これは、ログインした際の情報などがここに表示されたりする。
    - javascriptで取り扱うのは難しいかも。
- WebSQL
    - 現在はあまり使われていない機能らしい。sqlightに近い機能だった？


## manifest
インストールして、PWAとすることができるらしい。これによりネイティブのアプリと同様に、Webサイトをホーム画面にアイコン表示して、制御することができる。

![スクリーンショット 2024-07-16 19.37.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/f1827fe6-824e-67f8-3a19-f341107a3375.png)

![スクリーンショット 2024-07-16 19.38.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/f4bbfca6-1c14-2a58-baf1-1b130f1964bc.png)

twitterとかもmanifest.jsonから情報がみれるはず。

## Serviceworker

ここのStatusが緑色になってないと正常に稼働しない。

![スクリーンショット 2024-07-16 19.41.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/0c316399-e5e2-e370-7111-f63b3b9fc3d6.png)

## Storage
ここでは、indexdbなどのDBがどのようなデータを持っているかを確認することができる。
また、この画面の`Clear site data`から消す事ができる。

![スクリーンショット 2024-07-16 19.42.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/ab03b884-e5be-a325-b7bc-12c2114ce899.png)

# Network

ここの内容を分析してみる。ファイルや画像・動画など。。

https://www.jma.go.jp/bosai/forecast/

まずは検証/Networkのタブを開く。最初は何もないが、一度リロードしてみる。
![スクリーンショット 2024-07-16 23.23.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/6a202784-30d0-3d39-2430-a8cabcabfad8.png)

すると、いろいろ出てくる。
![スクリーンショット 2024-07-16 23.24.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/2fc0d459-dc30-c016-87c9-eba35845a031.png)

動画では、waterfall,という欄が出てくるらしいが自分の環境ではでてこない。
右クリックしてやると出してやる事ができた。

![スクリーンショット 2024-07-16 23.28.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/d8361de0-f130-7bea-23f2-95b5fe0a3e71.png)

nameのところで、読み込まれたファイル名が出てくる。基本的に最初はhtmlが表示される。
1. html
2. css
3. javascript
が先に読み込まれる。（上に表示される・。）
waterfallの中にある横の棒グラフは、何秒で読み込まれたかを映している。

![スクリーンショット 2024-07-16 23.29.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/832adcde-2bfc-5c14-3435-31076668122a.png)

基本的には画像や動画が下の方に溜まっているはず。

イカ画像の
1. request sentは、準備ができて情報を取りにいくまでの時間
1. waiting for server response　が、**データをリクエストして、サーバが返すまでの時間**
    1. ここはサーバによる。他のサイトと比較してみること。
1. Content downloadは、サーバが応答して、ダウンロードするまでの時間。
    1. ここが長いとデータ量が多いとかだと思う。
1. 全体で35.33msかかっているとのこと。

![スクリーンショット 2024-07-16 23.33.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/15898958-956a-a8d4-b2cf-f6ca8547fa2e.png)

また、選択範囲のところはドラッグで選択して時系列で指定する事が可能。

また、Statusの中の200は正常。304はキャッシュから見るという事を行っている。
`type=xhr`というのは、ajaxでもらっている。非同期で通信している。一部でデータをもらっているというような表現である。

- headerは、サーバ側でどのようにリクエストしているかをみれる。
![スクリーンショット 2024-07-16 23.47.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/b04a45cc-2e75-4115-c846-77a0b34b3f02.png)
- Preview・Responceでは、どのように返されているかを見る事ができる。Previewの方がみやすい。（responceで帰ってきたものをオブジェクトにしている。）
![スクリーンショット 2024-07-16 23.48.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/30883bde-dcc2-c326-7b31-f0314290bc97.png)

以下のように、`copt property path`で、オブジェクトの内容をコピーすることが可能。

![スクリーンショット 2024-07-16 23.50.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/9a048ee5-f646-7a58-7d6d-fe7fd0f4b3aa.png)

これを使って、APIに活用させて必要な情報だけ抽出させるというような事ができたりするとのこと。

# セキュリティ関連

タブの中に、Securityというものがある。
![スクリーンショット 2024-07-16 23.56.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/a0dfd5b4-2f7a-289a-a5f6-38e7a122e14a.png)

1. httpsで通信していると、基本的に緑色になる。http通信で通信している場合は赤色になる。
1. たまにhttpsで通信しているのに、中で読み込んでいるソースがhttpになっている場合は、recourcesなどがhttpで読み込みに行っている場合は赤色になったりする。

![スクリーンショット 2024-07-16 23.58.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/2fabd02a-fea2-5a70-a0f0-186e1ef806d2.png)


# 余談

SEO対策に、Lighthouseが使える。今回は自分がWebサイトを作るわけではないのでスキップ。
https://www.youtube.com/watch?v=srayKfhg5Ho&t=0s