ネットワークリクエストのデバッグ用のSafariのネットワークパネルを開くには、次の手順に従ってください。1。Safariを開く→設(shè)定→Advanced→「[開発]メニューをメニューバーに表示」を確認します。 2。ランディングページを開き、[開発]→[[開発]をクリックします。[JavaScriptコンソールを表示]トップメニューバーで（または、ショートカットキーオプション?Cを使用します）。 3.開発者ツールインターフェイスの[ネットワーク]タブをクリックして、ネットワークパネルに入ります。ページを更新した後、すべてのロードされたリソースの名前、ステータス、タイプ、サイズ、時間情報を表示し、クリックをサポートして詳細を表示、分類のフィルタリング、時間ごとにソート、パフォーマンス分析と最適化の判斷のためのネットワーク動作の記録をサポートできます。

Safariの開発者ツールを開いた後、Network Inspectorは、パフォーマンスの読み込みとリソースリクエストを表示するWebページをデバッグするための重要なツールです。ページ內(nèi)の各ファイルの読み込み時間、ステータスコード、リクエストヘッダー、応答コンテンツ、その他の情報を分析するのに役立ちます。

ネットワークパネルを開く方法

まず、Safariの「開発」メニューがオンになっていることを確認してください。

• Safariを開く→設(shè)定→Advanced→「メニューバーの「開発」メニューを確認する」を確認します

それから：

• デバッグするWebページを開きます
• 「開発」→「[開発]をクリックします[JavaScriptコンソール]をトップメニューバーに表示します（またはOption ? C ）
• 開発者ツールインターフェイスの[ネットワーク]タブをクリックし、ネットワークチェックパネルに入力します

ページにロードされたすべてのリソースを表示します

ネットワークパネルを入力した後、ページを更新すると、HTML、CSS、JS、寫真、フォントなど、ページの読み込みプロセス中に開始されたすべてのリクエストが表示されます。

注意すべきいくつかの重要な列があります。

• 名前：要求されたリソース名
• ステータス：HTTPステータスコード（たとえば、200は成功を意味し、404は見つかりません）
• タイプ：スクリプト、スタイルシート、畫像などのリソースタイプ。
• サイズ：伝送サイズは、このリソースがどのくらいのトラフィックを占めるかを教えてくれます
• 時間：リソースをロードするのにかかった時間

リクエストヘッダーの表示、応答ヘッダー、実際の返されたコンテンツ、畫像またはスクリプトコンテンツのプレビューなど、リソースをクリックして詳細を表示できます。

要求データをフィルタリングしてソートします

特定の種類のリソースまたは問題をより効率的に見つけるには、フィルタリング機能を使用できます。

• 左上隅に検索ボックスがあります。キーワードを入力して、リソースをすばやく見つけます。
• すべて、XHR、JS、CSS、畫像など、右側(cè)に分類ボタンがあります。それをクリックするだけで、特定の種類のリソースのみが表示されます。
• 「時間」列のタイトルをクリックして、時間を読み込んでページを遅くする「犯人」を見つけることでソートします

さらに、「保存ログ」をチェックすると、ページがジャンプまたはリフレッシュするときに履歴リクエストレコードを保持できます。これは、マルチページプロセスのデバッグに非常に役立ちます。

読み込みパフォーマンスと最適化の提案の分析

ネットワークパネルは、リクエストを表示するだけでなく、パフォーマンスの最適化判斷を下すのにも役立ちます。

• JSまたは畫像が特にゆっくりとロードされる場合、それはCDN構(gòu)成の問題または大きすぎるリソースである可能性があります
• 複數(shù)の304リクエストが表示され、ブラウザがキャッシュを確認していることを示していますが、これは正常ですが、さらに最適化できます。
• 多數(shù)の200のリクエストは、キャッシュが有効ではないことを意味する場合があり、キャッシュ制御設(shè)定をチェックする価値があります

また、左下隅の「?§」ボタンをクリックして、ユーザー操作をシミュレートし、プロセス全體のネットワーク動作の変化を観察することで、録音を開始することもできます。

基本的にそれだけです。ネットワークパネルを使用する習熟度は、フロントエンドのデバッグとパフォーマンスの最適化に非常に役立ちます。

以上がSafariの開発者ツールでネットワーク検査官を使用する方法は？の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。