Browser Devtools Geheimnisse: Start, Netzwerk und Leistung

In den letzten zehn Jahren haben sich Browser Developer Tools (Devtools) von einer grundlegenden JavaScript -Konsole zu einer vollständig integrierten Entwicklungs- und Debugging -Umgebung entwickelt. Jeder Aspekt einer Webanwendung kann jetzt geändert und untersucht werden, aber nur wenige Personen werden sich mit ihren erweiterten Funktionen befassen. In diesem Artikel werden eine Reihe von Funktionen untersucht, die Sie möglicherweise noch nicht berücksichtigt haben oder nicht. Meistens werden wir Chromes Devtools abdecken, aber gegebenenfalls werden Firefox -Alternativen gezeigt.

Schlüsselpunkte

• Browser Developer Tools (DevTools) haben sich zu einer vollständig integrierten Entwicklungs- und Debugging -Umgebung entwickelt, mit der Benutzer einen beliebigen Aspekt einer Webanwendung ändern und untersuchen können. Tastaturverknüpfungen, Dockingoptionen, Einstellungen und automatische Funktionen können die Effizienz der Entwickler verbessern.
• devtools bietet viele nützliche Funktionen für die Webentwicklung, darunter Überprüfung der Farbkontraste, Bildschirmaufnahme, das Finden von nicht verwendeten CSS und JavaScript, Deaktivieren von Netzwerk -Caching, Limit -Netzwerkgeschwindigkeit, Filternetzwerkantworten, Blocknetzwerkanforderungen, neuere AJAX Überprüfen Sie den Speicher und mehr.
Die Devtools von
• Chrome bietet Leistungsmonitore und Prüfungspaneele für die Echtzeitanalyse der CPU-Verwendung, die Größe von JavaScript-Haufen, Dom-Knoten, Ereignishörer, Style-Neuberechnung und vieles mehr. Das Prüfungsgremium analysiert auch Leistung, Zugänglichkeit, Best Practices und SEO in Mobil- und Desktop -Ansichten.

Tastaturverknüpfungen

Verwenden Sie das Menü, um Devtools zu starten, wird wertvolle Zeit verschwenden! Bitte versuchen Sie eine der folgenden Optionen:

• f12
• Strg -Verschiebung i
• CMD -Option J
• oder klicken Sie mit der rechten Maustaste auf ein Element auf der Seite und wählen Sie die Elemente überprüfen oder überprüfen.

Chrome bietet eine nützliche Tastaturverknüpfungshilfe. Drücken Sie in Devtools F1 oder wählen Sie Einstellungen aus den drei Punktmenüs in der oberen rechten Ecke. Wählen Sie dann "Verknüpfungsschlüssel" im Menü:

Dolocation

Das Devtools -Feld kann links, rechts oder unten im Browserfenster angedockt werden. Wenn Sie mehr Platz benötigen, können Sie ihn in ein separates Fenster abspülen. Die Docking -Optionen sind im Drei -DOT -Menü in Chrom verfügbar:

Dooring -Optionen in Firefox:

Einstellungen

Die DevTool -Einstellungen können über dasselbe Menü oder durch Drücken von F1 zugegriffen werden. Auf diese Weise können Sie die Anzeigeoptionen für Tools, Themen, Registerkartengrößen, Farbeinheiten und mehr festlegen.

Starten Sie automatisch Devtools

Bei der Arbeit an Webanwendungen ist es möglicherweise praktischer, eine dedizierte Desktop -Verknüpfung zu erstellen, um den Browser zu starten, die URL zu öffnen und Devtools in einem Schritt zu starten. Verwenden Sie für Chrome die folgenden Chrome -Befehlszeilenoptionen, um ein Desktop -Symbol zu erstellen:

<code>chrome --auto-open-devtools-for-tabs https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

wobei https://www.php.cn/link/2674cea93e3214abce13E072A2DC2CA5 ist Ihre Entwicklungs -URL. Ähnliche Operationen für Firefox:

<code>firefox -devtools -url https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

(Der ausführbare Dateiname kann von System zu System variieren.)

Der unsichtbare Modus wird während der Entwicklung verwendet

Invisible/Private -Modus behält keine Daten wie Cookies und LocalStorage nach dem Schließen des Browsers bei. Dieser Modus ist ideal für das Testen von progressiven Webanwendungen (PWAs) und Anmeldesystemen. Sie können den Browser manuell starten und den Inkognito -Modus eingeben, oder Sie können dies tun, indem Sie -Incognito in die Befehlszeile von Chrome oder die Befehlszeile von Firefox, hinzufügen.

Befehlsfenster

Chrome Devtools bietet ein editorähnliches Befehlsfeld. Drücken Sie Strg Shift P:

Es bietet einen schnellen Zugriff auf die meisten Funktionen und Quelldateien (drücken Sie den Backspace, um>>).

Gehen Sie zur Konsole

Die Konsole ist sehr nützlich, egal welches Devtool -Panel Sie verwenden. Drücken Sie ESC, um das Konsolenfenster im unteren Feld anzuzeigen und auszublenden.

Finden Sie die Seitenfarbe

Wenn Sie auf ein CSS -Farbattribut klicken, zeigen die meisten Browser einen Farbauswahl an. Chrome zeigt auch die Farben an, die auf der Seite am unteren Rand des Feldes verwendet werden:

Dieses Panel kann geklickt werden, um weitere Farben anzuzeigen.

Farbkontrast -Assist -Funktion

Der Farbauswahl zeigt auch ein Kontrastverhältnis, das den visuellen Unterschied zwischen dem Vordergrundtext und der Hintergrundfarbe angibt. Klicken Sie auf das Verhältnis, um zu sehen, wie es mit AA- und AAA -Zugänglichkeitsstandards bewertet wird, die sicherstellen, dass die meisten Menschen den Text lesen können:

Jede Farbe in der Farbleiste, die sich unter dieser Zeile befindet, wird von AA -Kontrast empfohlen.

screenshot

erfassen

Geben Sie aus dem Befehlsfeld von Chrom (Strg Shift P) "Screenshot" ein und wählen Sie eine Option zum Erfassen des aktuellen Ansichtsfensters, der gesamten Seite oder des aktuell aktiven Elements. Die Datei wird im Download -Ordner gespeichert. (Chrome 74 ermöglicht auch die Erfassung von Flächen.) Firefox bietet ein Screenshot -System, das aus den meisten Menüs zugänglich ist. Zusätzlich können Sie mit der rechten Maustaste auf jedes Element in der DOM-Ansicht klicken und Screenshot-Knoten auswählen.

Finden Sie ungenutzte CSS und JavaScript

Mit

Chrome's neues Abdeckungspanel können Sie schnell unbenutzten Code finden. Wählen Sie "Abdeckung" aus den DevTools More Tools Submenu, klicken Sie dann auf die Schaltfläche "Daten" und durchsuchen Sie die Anwendung. Klicken Sie dann auf eine beliebige Datei, um den Quellcode zu öffnen:

unbenutzter Code wird rot in Zeilennummer -Steckplatz hervorgehoben. Beachten Sie, dass Chrome beim Navigieren zu einer neuen Seite nicht an den gebrauchten/nicht verwendeten Code erinnert zu sein scheint, aber ich gehe davon aus, dass dies in einer zukünftigen Veröffentlichung verfügbar ist.

Netzwerkcache

deaktivieren

Wählen Sie den Cache im Netzwerkbereich deaktivieren, um alle Dateien aus dem Netzwerk zu laden. Dies bietet eine bessere Bewertung des Ladens der ersten Seite.

Begrenzung der Netzwerkgeschwindigkeit

In ähnlicher Weise ist es wenig sinnvoll, ein 1Gbit / s verbundenes System zu testen, wenn die meisten Benutzer auf 3G darauf zugreifen. Das Netzwerkbereich bietet ein Online-Dropdown-Menü in Chrome und ein Limit-Dropdown-Menü in Firefox, mit dem Sie bestimmte Netzwerkgeschwindigkeiten simulieren können.

Chrome bietet auch eine Funktion, um Ihr eigenes Restriktionsprofil hinzuzufügen.

Netzwerkantworten

neu cstellen

standardmäßig zeigt das Netzwerkpanel Tabellen für Anforderungen und Antworten in der Reihenfolge des Downloads an. Sie können jedoch auf einen beliebigen Tabellentitel klicken, um sie nach Namen, Status, Typ, Größe, Antwortzeit usw. neu zu ordnen.

filtern unvollständige Anforderungen

Um unvollständige oder nicht reagierende HTTP -Anforderungen zu finden, besuchen Sie das Netzwerkbereich und geben Sie ein: Ausführen im Filterfeld.

Filter durch Antwortgröße

Geben Sie im Netzwerkbereich größere als: S in der Filterbox ein, wobei S in Bytes (1000000), Kilobytes (1000k) oder Megabyte (1 m) ist. Antworten größer als die ausgewählte Größe werden angezeigt. Um eine kleinere Antwort zu finden, verwenden Sie -larger -than: s.

Inhalt des Drittanbieters

filtern

Geben Sie im Netzwerkbereich die Domäne ein:*. Ihre Domain im Filterfeld, in dem Ihre Domain Ihre primäre URL ist, wie z. B. SitePoint.com. Die verbleibenden Antworten zeigen Anfragen von Drittanbietern nach CDNs, Trackern, Social-Media-Schaltflächen und vielem mehr. Die Anzahl der Anfragen und Nutzlastgrößen wird in der Statusleiste unterhalb der Tabelle angezeigt.

Block -Netzwerkanforderungen

Während der Tests können Tracker, Analysen, Social -Media -Widgets oder andere Anforderungen blockiert werden. Klicken Sie mit der rechten Maustaste auf eine HTTP-Anforderung in das Netzwerk von Chrome und wählen Sie die URL der Blockanforderung, um die URL zu blockieren, oder wählen Sie die Blockanforderungsdomäne aus, um die Anforderungen an die Domäne zu blockieren. Das Anforderungsblockierfeld öffnet, wo Sie zusätzliche URLs oder Domänen hinzufügen oder löschen können:

AJAX -Anforderung

neu erstellen

Die AJAX XMLHTTPREQUEST-Operation kann überprüft werden, indem Sie mit der rechten Maustaste auf einen Eintrag in der Netzwerktabelle klicken und eine Kopieroption wie Curl, Fetch oder PowerShell auswählen. Dadurch wird ein Befehl mit denselben Header, dem Benutzeragenten, Cookies und Empfehlungsquellen erstellt, der in den Editor oder Terminal eingefügt werden kann.

Offline -Dateiüberschreibung

aktivieren

Chrome ermöglicht das Speichern einer Datei in Ihrem System, sodass der Browser die Datei eher vom Gerät als vom Netzwerk abrufen kann. Wenn Sie beispielsweise Vermögenswerte laden oder bearbeiten möchten, auf die normalerweise von einem CDN zugegriffen wird, kann dies die Offline -Entwicklung ermöglichen. Öffnen Sie das Overlay -Bedienfeld in der Quelle, klicken Sie auf Overlay -Ordner auswählen und wählen Sie einen geeigneten Ordner aus.

Klicken Sie nun mit der rechten Maustaste auf jede Ressource im Netzwerkbereich und wählen Sie für das Überschreiben speichern. Jede nachfolgende Seite Reload greift auf die Datei aus dem lokalen System anstelle des Webs zu. Die gespeicherten Dateien können ebenfalls geändert werden.

Überprüfen Sie den Speicher

Mit dem Anwendungsfeld in Chrome und dem Speicher in Firefox können Sie Werte überprüfen, ändern und löschen, die in Cookies, Cache -Speicher, LocalStorage, SessionStorage, IndexedDB und Web SQL (falls unterstützt) gespeichert sind. Das Clear Storage Panel von Chrome löscht auch alle Werte der Domäne, was bei der Entwicklung progressiver Webanwendungen nützlich ist.

Leistungsmonitor

Der neue Leistungsmonitor von

Chrome ist über das Menü "More Tools" aus DevTools zugegriffen und bietet eine Analyse der CPU -Verwendung, JavaScript -Haufengröße, DOM -Knoten, Ereignishörer, Style Recalculation und mehr. Im Gegensatz zum Hauptleistungspanel werden die Diagramme in Echtzeit aktualisiert - nicht zuerst die Konfigurationsdatei aufzeichnen.

prüfung

Das Prüfungsgremium von

Chrome wurde ursprünglich zur Bewertung der Funktionen progressiver Webanwendungen entwickelt. Das Tool hat sich jedoch zu einem gemeinsamen Tool zur Analyse von Leistung, Zugänglichkeit, Best Practices und SEO in Mobil- und Desktop -Ansichten entwickelt.

Es wird nicht alle Probleme gefunden, Sie stimmen möglicherweise nicht mit einigen Punkten zu, aber es ist eine nützliche Möglichkeit, potenzielle Probleme schnell zu bewerten. Hoffentlich haben Sie etwas Neues entdeckt. Weitere Devtool -Geheimnisse kommen bald ...

(Der FAQ -Teil im Originaltext sollte hier enthalten sein. Aufgrund der Länge des Artikels wird er hier weggelassen. Der FAQ -Teil kann nach Bedarf regeneriert werden)

Das obige ist der detaillierte Inhalt vonBrowser Devtools Geheimnisse: Start, Netzwerk und Leistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!