Befolgen Sie die folgenden Schritte, um das Debuggen von Safari's Network Panel für das Debuggen von Netzwerkanforderungen zu ?ffnen: 1. ?ffnen Sie Safari → Einstellungen → Erweitert → Menü "Entwicklung" in der Menüleiste ". 2. ?ffnen Sie die Zielseite, klicken Sie in der oberen Menüleiste auf "Entwicklung" → "JavaScript -Konsole anzeigen" (oder verwenden Sie die Option "Kurzschlussschlüssel ? c). 3. Klicken Sie in der Registerkarte "Netzwerk" in der Developer Tool -Schnittstelle, um das Netzwerkbereich einzugeben. Nachdem Sie die Seite aktualisiert haben, k?nnen Sie den Namen, der Status, die Typ, die Gr??e und die Zeitinformationen aller geladenen Ressourcen anzeigen und das Klicken unterstützen, um Details anzuzeigen, die Klassifizierung zu filtern, nach Zeit zu sortieren und das Netzwerkverhalten für Leistungsanalysen und Optimierungsbeurteilung aufzuzeichnen.

Nach dem ?ffnen der Entwicklertools von Safari ist Network Inspector ein wichtiges Tool für Sie, um die Webseite zu debuggen, um Leistung zu laden und Ressourcenanfragen anzusehen. Es kann Ihnen helfen, die Ladezeit, den Statuscode, den Anforderungsheader, die Antwortinhalte und andere Informationen jeder Datei auf der Seite zu analysieren.

So ?ffnen Sie das Netzwerkpanel

Stellen Sie zun?chst sicher, dass das Menü "Entwicklungs" in Safari eingeschaltet ist:

• ?ffnen Sie die Safari → Einstellungen → Erweitert → Menü "Entwicklung" entwickeln "in der Menüleiste" anzeigen "

Dann:

• ?ffnen Sie die Webseite, die Sie debuggen m?chten
• Klicken Sie in der oberen Menüleiste auf "Entwicklung" → "JavaScript -Konsole anzeigen" (oder drücken Sie Option ? C direkt).
• Klicken Sie in der Registerkarte "Netzwerk" in der Entwickler -Tool -Schnittstelle und geben Sie das Netzwerk -Check -Panel ein

Zeigen Sie alle auf der Seite geladenen Ressourcen an

Nach dem Eintritt in das Netzwerkbereich sehen Sie die Seite aktualisiert, alle Anfragen, die w?hrend des Ladevorgangs der Seite initiiert wurden, einschlie?lich HTML, CSS, JS, Bilder, Schriftarten usw.

Hier sind einige wichtige Spalten, die zu beachten sind:

• Name : Der angeforderte Ressourcenname
• Status : HTTP -Statuscode (zum Beispiel 200 bedeutet Erfolg, 404 ist nicht gefunden)
• Typ : Ressourcentypen wie Skript, Stylesheet, Bild usw.
• Gr??e : Die übertragungsgr??e gibt an, wie viel Verkehr diese Ressource belegt
• Zeit : Die Zeit, die zum Laden der Ressource dauerte

Sie k?nnen auf eine Ressource klicken, um Details anzuzeigen, z. B. Anforderungen an die Anforderungen, die Header mit Antwort, die tats?chlichen zurückgegebenen Inhalte und sogar die Vorschau des Bild- oder Skriptinhalts.

Filtern und Sortieren Sie Anforderungsdaten

Um bestimmte Arten von Ressourcen oder Problemen effizienter zu finden, k?nnen Sie die Filterfunktion verwenden:

• In der oberen linken Ecke befindet sich ein Suchbox. Geben Sie Schlüsselw?rter ein, um schnell eine Ressource zu finden.
• Auf der rechten Seite gibt es Klassifizierungsschaltfl?chen, wie alle, xhr, js, css, Bilder. Klicken Sie einfach darauf, um nur eine bestimmte Art von Ressource anzuzeigen.
• Klicken Sie auf den Spaltentitel "Zeit", um die Zeit zu sortieren, indem Sie die Zeit laden, um den "T?ter" zu finden, der die Seite verlangsamt

Darüber hinaus kann das überprüfen von "Log" -Protokoll "historische Anforderungsdatens?tze beibehalten, wenn die Seite springt oder aktualisiert. Dies ist sehr hilfreich für das Debuggen von mehrseitigen Prozessen.

Analyse der Ladeleistungs- und Optimierungsvorschl?ge

Das Netzwerkgremium kann nicht nur Anfragen anzeigen, sondern Ihnen auch helfen, die Beurteilung der Leistungsoptimierung zu f?llen:

• Wenn ein JS oder ein Bild besonders langsam l?dt, kann es ein CDN -Konfigurationsproblem oder eine zu gro?e Ressource sein
• Es werden mehrere 304 -Anfragen angezeigt, was darauf hinweist, dass der Browser den Cache überprüft, was normal ist, aber weiter optimiert werden kann.
• Eine gro?e Anzahl von 200 Anfragen kann bedeuten, dass der Cache nicht wirksam ist. Es lohnt sich, die Einstellungen zur Cache-Kontrolle zu überprüfen

Sie k?nnen auch mit der Aufzeichnung beginnen, indem Sie in der unteren linken Ecke auf die Schaltfl?che "? ?" klicken, Benutzeroperationen simulieren und ?nderungen des Netzwerkverhaltens w?hrend des gesamten Prozesses beobachten.

Grunds?tzlich ist das. Die Kenntnisse bei der Verwendung von Netzwerkpanels sind sehr hilfreich für das Front-End-Debugging und die Leistungsoptimierung.

Das obige ist der detaillierte Inhalt vonWie benutze ich den Netzwerkinspektor in den Entwicklertools von Safari?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!