Detaillierte Erl?uterung von Firefox Developer Tools (Devtools): Ein leistungsstarkes Tool zur Verbesserung der Website -Leistung

In diesem Artikel werden eingehende Firefox Developer Tools (Devtools) eingehalten, eine Reihe von Tools, mit denen Entwickler die Leistung von Websites und Webanwendungen überprüfen, debuggen, analysieren und optimieren k?nnen. Wir werden uns auf leistungsbezogene Tools konzentrieren und die Einführung in die Verwendung von Devtools und einigen praktischen Einstellungen vorstellen.

wie man auf Devtools zugreift:

• Klicken Sie rechts neben der Navigationssymbolleiste auf das Hamburger-Menü, w?hlen Sie "Webentwickler" und w?hlen Sie die von Ihnen gebrauchte Untertoolleiste.
• Verwenden Sie Tastaturverknüpfungen wie Verschiebung F5 (Windows und MacOS), Strg Shift e (Windows) oder CMD -Option E (macOS) ?ffnen Sie das Netzwerk Werkzeug.
• klicken Sie mit der rechten Maustaste auf die Seite und w?hlen Sie Elemente überprüfen.

Schlüsselpunkte

• Firefox Web Developer Tools (DevTools) bietet eine Reihe von Tools, mit denen Entwickler die Leistung ihrer Websites und Webanwendungen überprüfen, debuggen, analysieren und optimieren k?nnen.
• Das Netzwerkmonitor -Tool in DevTools kann verwendet werden, um die Zeit zu ermitteln, die ein Browser ben?tigt, um verschiedene Ressourcen einer Webseite herunterzuladen und die Anforderungen zu ermitteln, die dazu führen, dass die Webseite langsam geladen oder blockiert wird.
Die Leistungstools von
• Devtools helfen Entwicklern dabei, Engp?sse und Leistungsprobleme zu identifizieren, indem sie Einblicke in die Reaktionsf?higkeit von Web -UI und die Leistung von JavaScript -Code geben.
• Farbcode wird in Devtools -Diagrammen und -Abschnitten verwendet, um Entwicklern dabei zu helfen, schnell die Arten von Operationen zu ermitteln, die Probleme verursachen und die Arten von Operationen beim Wechsel zwischen verschiedenen Perspektiven verfolgen.
Die Devtools von
• Firefox unterstützt die Auswahl oder Verengung des Zeitrahmens von Konfigurationsdateien, sodass Entwickler sich auf bestimmte Aktivit?tszyklen konzentrieren k?nnen, um eine detailliertere Analyse zu erzielen.

devtools Einstellungen

Firefox Devtools hat viele Optionen, um Entwicklern dabei zu helfen, ihre Erfahrungen anzupassen, z.

So greifen Sie auf das Bereich der DevTools -Einstellungen zu:

Zuerst devtools ?ffnen, dann:

• Klicken Sie in der Symbolleiste auf die Schaltfl?che "Einstellungen".
• Drücken Sie F1, um das Einstellungsfeld oben in jedem aktuellen Tool anzuzeigen.
• drücken Sie Strg -Verschiebung von (Windows und Linux) oder CMD -Verschiebung von (macOS), um das Einstellungsfeld anzuzeigen.

Hier k?nnen Sie das Standardwerkzeug, die Schaltfl?chen in der Toolbox, das Thema (Dark-Light-Firebug) und andere erweiterte Einstellungen ausw?hlen.

leistungsorientierte Tools

Bei der Analyse der Leistung einer Webanwendung ist es erforderlich, zwischen Ladezeitleistung und Laufzeitleistung zu unterscheiden.

Ladezeitleistung beantwortet Fragen wie "Welche Ressourcen laden zu lang?" Beim Umgang mit Laufzeitleistung müssen wir uns auf JavaScript und CSS (insbesondere CSS -Animationen) konzentrieren, um zu sehen, wo der Code die meiste Zeit verbringt und was den Engpass verursacht.

Werfen wir einen Blick auf Netzwerkmonitore und Leistungstools.

Netzwerkmonitor

Netzwerkmonitor zeigt alle von Firefox erstellten Netzwerkanforderungen in tabellarer Form an (z. B. Laden einer Seite oder Senden von XMLHTTPrequests, API -Anforderungen usw.).

kann auch HTTP -Header, HTTP -Antworten und Cookies im Zusammenhang mit der Anfrage angezeigt und Sie erm?glichen, nach ihnen zu suchen. Sie k?nnen es auch verwenden, um die Leistungsanalyse für die aktuelle Seitenlast auszuführen, anzeigen und zu speichern.

Kurz gesagt, dieses Tool kann verwendet werden, um die Zeit zu bestimmen, die ein Browser ben?tigt, um verschiedene Ressourcen einer Webseite herunterzuladen.

Sie k?nnen dieses Tool auch verwenden, um Anforderungen zu überwachen und zu finden, die langsame oder blockierte Webseiten laden. Das Netzwerkpanel zeigt an, wann das Hauptereignis (DomcontentLode und Load) ausgel?st wird.

Anfrage Timeline

Jede Anforderung in der Netzwerkliste enth?lt eine Timeline -Spalte, in der Zeitinformationen angezeigt werden, die sich auf die Anforderung beziehen, z. B. die Gesamtzeit, in der die Ressource geladen wird.

devtools markiert wichtige Lebenszyklusereignisse in Berichten, wie z. B. Domcontentled und das Laden von Seite. Blau zeigt die Zeit an, in der das Domcontent -Ereignis ausgel?st wurde.

domcontent geladen und laden Ereignisse

Domcontent -Ereignisfeuer Wenn HTML -Dokumente vollst?ndig geladen und analysiert werden, ohne CSS -Stylesheets, Bilder und Frameworks.

Ereignisladen Feuer, wenn das HTML -Dokument und alle zugeh?rigen Stylesheets, Bilder und Frames vollst?ndig geladen sind.

Anforderungsdetails Panel

Nachdem Sie auf die Anforderungsliste geklickt haben, k?nnen Sie einen Bereich mit rechts doppelten Details mit vielen verschiedenen Registerkarten wie Headern, Parametern, Antworten, Timing und Sicherheit sehen.

Für die Leistung werden wir den Zeitinformationen besondere Aufmerksamkeit schenken.

Netzwerk Timing

In diesem Bereich gibt es viele Zeitmetriken mit jeder Anfrage:

blockiert ist die Zeit, die darauf gewartet wird, dass eine Netzwerkverbindung in der Warteschlange steht.

Senden ist die Zeit, die ben?tigt wird, um eine Anfrage an den Server zu senden.

Empfangen ist die Zeit, die ben?tigt wird, um eine Antwort vom Server zu erhalten, oder (falls abgeschnitten), um sie vom Cache auszulesen.

Warten ist die Gesamtzeit, die der Kunde wartet, bevor er das erste Byte erh?lt. In anderen Tools für Leistungsanalyse wie webpagetest.org oder Chrome's Devtools wird dies als TTFB oder die erste Bytezeit bezeichnet.

Es gibt auch eine DNS -Aufl?sung, die die Zeit ben?tigt, um den Server -Hostnamen zu beheben, und eine Verbindung, die die Zeit ben?tigt, um eine TCP -Verbindung zu ?ffnen.

So analysieren Sie die Ladezeitleistung

Netzwerkmonitor integriert ein Leistungsanalyse -Tool, mit dem die Ladezeitleistung von Webseiten analysiert werden kann.

Um mit der Analyse der Ladezeitleistung zu beginnen, k?nnen Sie:

• Klicken Sie in der Statusleiste unten auf das Symbol "Analyse".
• laden Sie die Seite neu oder geben Sie eine Netzwerkanforderung aus, wenn der Netzwerkmonitor eingeschaltet ist (tats?chlich werden die Tabelleninformationen zur Anforderung ohne Ladezeitleistunganalyse angezeigt).

Der Abschlussbericht zeigt Kreisdiagramme und entsprechende Tabellen für Ressourcen, die nach Typ empfangen wurden: JavaScript, CSS, Bilder und Schriftarten usw. sowie eine Zusammenfassung mit den folgenden Details:

• Anzahl der zwischengespeicherten Antworten
• Gesamtzahl der Anforderungen
• Gr??e
• übertragungsgr??e
• Ladezeit

Webseiten werden mit leeren Caches und gefüllten Caches getestet.

Erste Ladeleistung

Firefoxs Devtools erm?glicht es Ihnen, die Leistung Ihrer Webanwendung in zwei verschiedenen Situationen zu analysieren:

• Kein Cache, simuliert die Situation, in der das Verm?gen nicht zwischengespeichert wurde, wenn der erste Zugriff der erste Zugriff ist.
• Es gibt einen Cache, simuliert den zweiten Zugriff. Der Browser hat das Verm?gen der App zwischengespeichert und viele Roundreisen zum und vom Server beseitigt.

Sie k?nnen auch die Einstellung Deaktivieren Cache verwenden, um das erste Laden einer Webseite zu simulieren, wenn DevTools auf einer beliebigen Registerkarte ge?ffnet wird.

JavaScript -Leistung und Reaktionsf?higkeit

JavaScript ist ein einzelner Threaded, was bedeutet, dass der Browser Code synchron ausführt, aber dank HTML5-Webarbeiter (die Standard-API für Multi-Thread-JavaScript) k?nnen Sie auch Code in anderen Threads ausführen.

Dieser einzelne Thread ist dafür verantwortlich, die gesamte Arbeit auszuführen, die der Browser erledigt, z. B. Layout -Rendering, Berechnung von Stilen und Müllsammlung.

Zus?tzlich werden Ereignisse wie SetTimeout, Click and Load sowie Ressourcenerwerb von einem einzelnen Thread ausgeführt. (In der Tat werden diese Aufgaben asynchron ausgeführt, aber die Asynchronit?t in JavaScript ist unterschiedlich: Sie wird durch Verwendung von ereignisgesteuerten Methoden, Ereignisschleifen und Warteschlangen simuliert.)

Gute Leistung und Reaktionsf?higkeit werden auf das asynchrone Modell von JavaScript zurückgeführt, aber langlebige Funktionen k?nnen zu einer schlechten Leistung und einer schlechten UI-Reaktionsf?higkeit führen.

Performance Tools

Mit

Leistungstools k?nnen Sie Engp?sse und Leistungsprobleme auf Webseiten ermitteln, indem Sie Einblicke in die Reaktionsf?higkeit von Webseiten (Reaktion auf Benutzerinteraktionen) und JavaScript -Code -Leistung geben.

Verwenden des Performance -Tools k?nnen Sie die Start- und Aufzeichnungsschaltfl?chen steuern, um die Leistungsanalyse der aktuell ge?ffneten Webseite für einen bestimmten Zeitraum durchzuführen, den Sie steuern k?nnen. Das Tool zeigt dann eine Zusammenfassung und eine Tabelle und eine grafische Ansicht der Aktionen an, die der Browser ausführt, um die Seite zu rendern.

Sie k?nnen Leistungstools verwenden, um langlebige Code-Snippets zu finden und zu erkennen, die einzelne Threads blockieren.

So verwenden Sie Leistungswerkzeuge

Die Schritte zur Verwendung von Leistungstools sind sehr einfach:

• ?ffnen Sie Ihre Webseite, ?ffnen Sie das Performance -Panel und starten Sie die Aufzeichnung der Leistung.
• Warten Sie einige Sekunden und stellen Sie sicher, dass Sie w?hrend der Analyse mit Ihrer Seite interagieren und dann die Aufzeichnung einstellen.
• Finden Sie eine langj?hrige Funktion oder Ereignis und Fokus (Vergr??erung) der niedrigen FPS-Periode.
• Wenn Sie eine Aktivit?t finden, die für die weitere Optimierung abzielt, k?nnen Sie andere Untertools verwenden, um detaillierte Informationen darüber zu erhalten, wo Sie Ma?nahmen ergreifen sollen.

Befolgen Sie unbedingt einige Szenarien der Benutzerinteraktion und interagieren Sie w?hrend der Analyse mit verschiedenen Teilen der Anwendungs ??-Benutzeroberfl?che, insbesondere den Teilen, die Sie optimieren m?chten. Vermeiden Sie auch unn?tige zus?tzliche Operationen: Interagieren Sie beispielsweise nicht mit Teilen, die Sie nicht analysieren m?chten, da sie den gemeldeten Ergebnissen nur mehr Rauschen hinzufügen.

W?hlen Sie den Zeitbereich

Firefoxs DevTools unterstützt die Auswahl oder Verengung des Zeitrahmens von Konfigurationsdateien. Sie k?nnen auf den Abschnitt Timeline oder FPS -Diagramm klicken und die Maus ziehen, um einen Zeitraum auszuw?hlen. Nachdem Devtools das Ziehen gestoppt hat, aktualisieren sie andere Ansichten und Diagramme, um nur die Ereignisinformationen anzuzeigen, die w?hrend dieses Zeitraums aufgetreten sind.

FPS -Diagramm

Bildrate -Diagramm zeigt die Anzahl der Frames pro Sekunde w?hrend der Aufzeichnung an. Bei der Aufnahme von L?ufen fungiert dieses Diagramm als FPS-Messger?t mit Echtzeitwerten.

FPS -Diagramm zeigt die maximalen, minimalen und durchschnittlichen FPS -Werte für die Analysezeit maximal, minimal und durchschnittlich an. Alle diese Werte k?nnen Ihnen schnell sagen, ob es Leistungs Engp?sse gibt.

Wenn Sie Animationen ausführen, sollten die FPS 60 fps sein. Sehen Sie sich dieses Video an, um zu sehen, warum dieser Wert so wichtig ist:

Sie k?nnen dieses Diagramm verwenden, um schnell visuelle Lücken (Absturz) und Inkonsistenzen zu ermitteln, die auf schwerwiegende Bildrateabf?lle hinweisen (was auf einen Leistungssgumett im Browser hinweist).

Sie k?nnen das FPS -Diagramm mit Abstürzen aus diesem Screenshot sehen:

Wasserfall Bild

Wikipedia interpretiert das Wasserfalldiagramm als:

Eine Form der Datenvisualisierung hilft dabei, die kumulativen Effekte positiver oder negativer Werte zu verstehen, die in der Sequenz eingeführt wurden. Aufgrund der offensichtlichen Aufh?ngung des Balken -Diagramms (Steine) in der Luft wird das Wasserfall -Diagramm auch als fliegendes Ziegeldiagramm oder eine Mario -Tabelle bezeichnet.

Bildquelle

Im Fall von Leistungsinstrumenten zeigt das Wasserfalldiagramm eine Aufschlüsselung der Aktivit?ten, die der Browser und Browser-spezifische Ereignisse wie:

durchführt und browserspezifisch ist

• Layout -Rendering oder Layoutelement (auch als Neuordnung bezeichnet)
• Stil
• Animationsrahmenanforderung
• Repaint oder Pixel Drawing
• Müllsammlung usw.

Layoutoperationen oder Umlagerungen und Stilberechnungen sind teuer, sodass dies potenzielle Optimierungsbereiche sein kann. Weitere Informationen finden Sie in diesem Google -Artikel.

Folgendes ist ein Screenshot des Wasserfalldiagramms der Probenanwendung:

Baumansicht

aufrufen

Aufruf der Baumansicht zeigt JavaScript -Funktionen, für die der Browser die meiste Zeit verbringt, sowie wichtige Metriken wie die Gesamtzeit der Aktivit?t, seine eigene Zeit und ihr Prozentsatz im Vergleich zur Gesamtanalysezeit.

Besitzer Zeit bezieht sich auf die Zeit, die nur der Operation aufgewendet wird, unabh?ngig von der Funktion, die es aufruft.

Die Gesamtzeit bezieht sich auf die Zeit, die für den Betrieb und die Funktionen, die sie anrufen, aufgewendet.

Der Anrufbaum sagt Ihnen statistisch, welche Funktionen (Aggregation) der Browser die meiste Zeit w?hrend der Aufzeichnung verbringt.

js Flame Map

Flame Graph zeigt den Flammengraphen des JavaScript -Anrufstacks w?hrend der Analyse an. Flame Diagramm ist ein von Brendan Gregg erstellter Leistungsvisualisierungstyp.

Flammenkarten erm?glichen eine schnelle und genaue Identifizierung der meisten Hotspot -Codepfade.

gestapelte Balkendiagramme bedeuten, dass die obere Operation, die direkt in der CPU vorliegt, den unteren Betrieb aufruft.

Sie k?nnen hier mehr über das Flammendiagramm lesen.

Sie k?nnen die Bildrate und JavaScript -Flammengraphen, Wasserfalldiagramme und Baumansichten aufrufen, um die Leistungsprobleme herauszufinden und die spezifischen Funktionen zu finden, die optimiert werden müssen.

Die Flammengrafik zeigt den Status des Anrufstacks für eine bestimmte Funktion zu einem bestimmten Zeitpunkt.

Das Flammengraphen enth?lt viele Daten. Um eine aussagekr?ftige Lektüre zu erhalten, müssen Sie also zoomen, bis Sie ein paar Millisekunden ausw?hlen.

Farbcode

Verschiedene Diagramme und Abschnitte verwenden dieselben Farben, um den gleichen Operations- und Verm?gensart zu f?rben - JavaScript, CSS, Rendering, Zeichnen usw.

Sie k?nnen Farben verwenden, um Operationen in verschiedenen Ansichten zu unterscheiden, schnell die Arten von Operationen zu ermitteln, die Probleme verursachen, und die Operationsarten beim Wechsel zwischen verschiedenen Ansichtswinkeln zu verfolgen.

Sie k?nnen die individuellen Aktivit?ten herausfiltern, die Sie in Diagrammen und Ansichten in diesem Menü sehen m?chten, in dem Sie auch verschiedene Farben sehen k?nnen, die mit unterschiedlichen Aktionen verbunden sind.

Wenn Sie beispielsweise CSS -Animationen verwenden, müssen Sie sich auf Aktivit?ten wie Neuberechnung von Stilen, Anwenden von Stil?nderungen, Layouts und Zeichnen konzentrieren. Sie k?nnen andere Aktivit?ten herausfiltern, um den L?rm zu reduzieren.

Für JavaScript müssen Sie sich auf Funktionsaufrufe konzentrieren, HTML analysieren und XML analysieren.

Schlussfolgerung

In diesem Artikel haben wir gelernt, wie man mit Firefox-Devtools beginnt und wie man unterschiedliche leistungsbezogene Untertools verwendet. Die Devtools von Firefox ist sehr umfassend und mit den jüngsten Leistungsverbesserungen von Firefox in der Lage, die realen Problembereiche w?hrend der Website -Renderung besser zu identifizieren. Wir ermutigen Sie, selbst weiter zu erkunden, nachdem Sie sich mit der Terminologie vertraut gemacht haben und worauf Sie suchen sollten.

FAQs (FAQ)

Was ist der Zweck der Leistungsprüfung in Firefox -Entwickler -Tools?

Performance Audits in Firefox Developer Tools sollen Entwicklern helfen, die Leistung ihrer Webanwendungen in Echtzeit zu verstehen. Es bietet Einblicke in verschiedene Leistungsmetriken wie Ladezeit, Rendern von Geschwindigkeit und JavaScript -Ausführung. Durch die Analyse dieser Metriken k?nnen Entwickler Engp?sse identifizieren, den Code optimieren und die allgemeine Benutzererfahrung verbessern.

Wie kann ich in der Firefox Developer Edition auf Leistungswerkzeuge zugreifen?

Um auf Leistungstools in der Firefox Developer Edition zuzugreifen, müssen Sie das Entwickler -Tools -Panel ?ffnen. Sie k?nnen dies tun, indem Sie mit der rechten Maustaste überall auf der Webseite klicken und Checkelemente ausw?hlen. Klicken Sie dann auf die Registerkarte Performance. Hier k?nnen Sie eine neue Aufzeichnung starten, um die Leistung Ihrer Webanwendung zu analysieren.

Was ist der Unterschied zwischen der Firefox Developer Edition und den regul?ren Firefox -Browsern?

Firefox Developer Edition ist eine Firefox -Version, die speziell für Webentwickler entwickelt wurde. Es enth?lt eine Reihe von Werkzeugen und Funktionen, die nicht in einem regul?ren Firefox -Browser zu finden sind, wie z. Diese Tools k?nnen Entwicklern helfen, ihre Webanwendungen effizienter zu erstellen, zu testen und zu debuggen.

Wie verwendet ich Firefox 'PageSpeed ??Insights Add-On?

Das Add-On von Firefox PageSpeed ??Insights bietet eine einfache M?glichkeit, die Leistung der Webseiten zu analysieren. Nach der Installation des Add-On k?nnen Sie über die Firefox-Symbolleiste zugreifen. Geben Sie einfach die URL der Seite ein, die Sie analysieren m?chten, und das Add-On enth?lt einen detaillierten Bericht über die Leistung, einschlie?lich Verbesserungsvorschl?ge.

Was ist das Archi-FPS-Meter-Add-On für Firefox?

Das Archi-FPS-Meter-Add-On von

Firefox ist ein Tool, mit dem Sie die Bildrate von Webanwendungen messen k?nnen. Dies ist sehr nützlich, um Leistungsprobleme zu identifizieren, insbesondere in webbasierten Spielen oder Animationen. Das Add-On zeigt die aktuelle Bildrate in der Firefox-Symbolleiste an, sodass Sie die Leistung in Echtzeit überwachen k?nnen.

Wie verwendet ich Firefoxs All-in-One PageSpeed-Test-Add-On?

Firefoxs All-in-One PageSpeed-Test-Add-On bietet eine umfassende Analyse der Webseitenleistung. Nach der Installation des Add-On k?nnen Sie über die Firefox-Symbolleiste zugreifen. Geben Sie die URL der Seite ein, die Sie analysieren m?chten, und das Add-On enth?lt detaillierte Berichte, einschlie?lich Ladezeit, PageSpeed-Scores und Verbesserungsvorschl?ge.

So verwenden Sie Firefox Developer Tools, um die Leistung Ihrer Webanwendung zu verbessern?

Firefox Developer Tools bieten mehrere M?glichkeiten zur Verbesserung der Leistung Ihrer Webanwendung. Sie k?nnen die Registerkarte Performance verwenden, um Engp?sse in Ihrem Code, die Registerkarte Netzwerk zu identifizieren, um die Ladezeiten zu analysieren, und den JavaScript -Debugger, um Skripte zu optimieren. Darüber hinaus kann das Add-On von PageSpeed ??Insights spezifische Verbesserungsvorschl?ge liefern.

Kann ich Firefox Developer Tools verwenden, um die Leistung meiner mobilen Webanwendung zu analysieren?

Ja, Firefox -Entwickler -Tools enthalten reaktionsschnelle Designmuster, mit denen Sie verschiedene Bildschirmgr??en und -aufl?sungen simulieren k?nnen. Dies ist sehr nützlich, um die Leistung mobiler Webanwendungen zu analysieren und sicherzustellen, dass sie eine gute Benutzererfahrung auf allen Ger?ten bieten.

Welche h?ufigen Leistungsprobleme k?nnen mit Firefox -Entwickler -Tools identifiziert werden?

gemeinsame Leistungsprobleme, die mit Firefox -Entwickler -Tools identifiziert werden k?nnen, umfassen langsame Ladezeit, geringes Rendering -Effizienz und überm??ige JavaScript -Ausführung. Diese Probleme k?nnen zu einer schlechten Benutzererfahrung führen. Daher ist es wichtig, diese Probleme frühzeitig im Entwicklungsprozess zu identifizieren und zu beheben.

Wie erfahren Sie mehr über die Verwendung von Firefox -Entwickler -Tools für Performance -Audits?

Es gibt viele Ressourcen, mit denen Sie mehr über die Verwendung von Firefox -Entwickler -Tools für Performance -Audits erfahren k?nnen. Das Mozilla Developer Network bietet umfassende Dokumentation zu allen Aspekten des Tools, einschlie?lich detaillierter Anleitungen und Tutorials. Darüber hinaus gibt es viele Online -Communities und Foren, in denen Sie Fragen stellen und Ihre Erfahrungen mit anderen Entwicklern teilen k?nnen.

Das obige ist der detaillierte Inhalt vonPerformance Auditing: Ein Firefox Developer Tools Deep Dive Tauch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!