Sources
topの配下にあるものは、全てjavascriptや画像イメージ等のファイルが置かれている。
どのような画像が含まれているかを確認することができる。
javascriptのデバックができるようだが、自分自身がWebエンジニアではないので、今回はスキップする。
Application
実行した結果などを、ローカルストレージというところで、どのように保存しているかをみれる。
- Cookie
- 有効期限があり、4Kほど。
- localstrage
- 10Mほどあり、有効期限はない。
- 結構早い。簡易的なデータベースである。
- sessionstorage
- localstrageとほぼ一緒だけど、ウィンドウ：タブが閉じるとデータは消滅する。
- 開いている間だけ保存する。
開発者ツールを開いたまま色々なページを移動すると、ここの内容が溜まっていくのがわかる
- indexDB
- DBという意味合いのDBである。これは、ログインした際の情報などがここに表示されたりする。
- javascriptで取り扱うのは難しいかも。
- WebSQL
- 現在はあまり使われていない機能らしい。sqlightに近い機能だった？
manifest
インストールして、PWAとすることができるらしい。これによりネイティブのアプリと同様に、Webサイトをホーム画面にアイコン表示して、制御することができる。
twitterとかもmanifest.jsonから情報がみれるはず。
Serviceworker
ここのStatusが緑色になってないと正常に稼働しない。
Storage
ここでは、indexdbなどのDBがどのようなデータを持っているかを確認することができる。
また、この画面のClear site dataから消す事ができる。
Network
ここの内容を分析してみる。ファイルや画像・動画など。。
まずは検証/Networkのタブを開く。最初は何もないが、一度リロードしてみる。
すると、いろいろ出てくる。
動画では、waterfall,という欄が出てくるらしいが自分の環境ではでてこない。
右クリックしてやると出してやる事ができた。
nameのところで、読み込まれたファイル名が出てくる。基本的に最初はhtmlが表示される。
- html
- css
- javascript
が先に読み込まれる。（上に表示される・。）
waterfallの中にある横の棒グラフは、何秒で読み込まれたかを映している。
基本的には画像や動画が下の方に溜まっているはず。
イカ画像の
- request sentは、準備ができて情報を取りにいくまでの時間
- waiting for server response が、データをリクエストして、サーバが返すまでの時間
- ここはサーバによる。他のサイトと比較してみること。
- Content downloadは、サーバが応答して、ダウンロードするまでの時間。
- ここが長いとデータ量が多いとかだと思う。
- 全体で35.33msかかっているとのこと。
また、選択範囲のところはドラッグで選択して時系列で指定する事が可能。
また、Statusの中の200は正常。304はキャッシュから見るという事を行っている。
type=xhrというのは、ajaxでもらっている。非同期で通信している。一部でデータをもらっているというような表現である。
- headerは、サーバ側でどのようにリクエストしているかをみれる。
- Preview・Responceでは、どのように返されているかを見る事ができる。Previewの方がみやすい。（responceで帰ってきたものをオブジェクトにしている。）
以下のように、copt property pathで、オブジェクトの内容をコピーすることが可能。
これを使って、APIに活用させて必要な情報だけ抽出させるというような事ができたりするとのこと。
セキュリティ関連
タブの中に、Securityというものがある。
- httpsで通信していると、基本的に緑色になる。http通信で通信している場合は赤色になる。
- たまにhttpsで通信しているのに、中で読み込んでいるソースがhttpになっている場合は、recourcesなどがhttpで読み込みに行っている場合は赤色になったりする。
余談
SEO対策に、Lighthouseが使える。今回は自分がWebサイトを作るわけではないのでスキップ。
https://www.youtube.com/watch?v=srayKfhg5Ho&t=0s