Network

クロム開発者ツール?
開発を支援するさまざまなツールをユーザーに提供

「ホームネットワーク」パネルの機能は何ですか?

「ネットワーク」パネルは、ウェブページが開始された瞬間から、ウェブページの画像やリソースなどをネットワークを介してウェブページにインポートします.
ページとサーバ間のデータ・ストリームを分析し、問題が発生したときに、リソースをどのくらいの時間、どの順序で取得するか、どのリクエストと応答を含むソリューションを見つけることができます.

[デジタルネットワーク]パネルの各種タブの種類と機能

Filmstrip:時間軸として表示されます.
Name:リソースの名前とURL
Status:使用可能な数値は、動作するかどうかを示します.
ex.200:正常動作/404 Not Found:サーバに要求されたリソースが見つかりません./400 Bad Request:構文エラーによりサーバが要求等を理解できない
タイプ:htmlやjsなどのファイルフォーマットがわかります.

타입 형식 중 XHR = API이며,
API 란 프로그램들이 서로 상호작용하는 것을
도와주는 매개체이자 접근성을 허용할지 말지 확인하는 것이다.

イニシエータ:開始点を示します.クリックすると、リクエストを励起リクエストのソースコードに移動します.例)Other=>root、デフォルトではroot(/)がindexに変換されます.
Size:ファイルのサイズがわかります.
≪時間｜Time｜ldap≫:Webリクエストからサーバー応答までの時間
Waterfal:タイムラインの詳細を知ります.
\f 92市場分類情報をインポートしたAPIを参照

Network->fetch/xhr->Categoriesをクリック

見出しに詳細が表示されます.

「プレビュー」では、カテゴリに格納されているデータを表示できます.

ヘッダーのurlでデータを表示することもできますが、プレビューを見ると表示しやすくなります.
Teslaのホームページから楽しい自動車のビデオurlを取得します

ネットワーククリック->ビデオを検索するには、mediaclick->mp 4ビデオ->ヘッダにurlを見つけることができます.

urlをコピーして新しいラベルページに表示できますが、上のmp 4ビデオをダブルクリックすると表示しやすくなります.
ソースと説明:https://velog.io/@ysh1394/TIL-No.8-Chrome%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC-Network-%ED%8C%A8%EB%84%90%EC%9D%98-%EA%B8%B0%EB%8A%A5