Google Chrome ist mittlerweile der beliebteste Webbrowser, der von Webentwicklern verwendet wird. Mit einem sechswöchigen Veröffentlichungszyklus und ständig wachsenden leistungsstarken Entwicklungsfunktionen ist Chrome zu einem unverzichtbaren Tool geworden. Die meisten Frontend-Entwickler sind wahrscheinlich mit vielen Funktionen von Chrome vertraut, beispielsweise mit der Verwendung der Konsole und des Debuggers zum Online-Bearbeiten von CSS. In diesem Artikel verraten wir Ihnen 15 coole Tipps, mit denen Sie Ihren Arbeitsablauf verbessern können. Nachdem Sie diese Techniken gelesen haben, werden Sie überrascht und begeistert sein, wie sehr sie Sublime Text ähneln.
In diesem Artikel werden Untersuchungen und Analysen zu allgemeinen Funktionen von Chrome DevTools durchgeführt. Beschreibt die Funktionen, Anwendungsszenarien und detaillierten Vorgänge, die jeder Funktionspunkt implementieren kann.
Überprüfen und aktualisieren Sie das HTML und CSS
Inspizieren und live bearbeiten Sie jedes Element im DOM-Baum im Bedienfeld Elemente.
Sehen Sie sich die CSS-Regeln an, die auf jedes ausgewählte Element im Bereich Stile angewendet werden, und ändern Sie sie.
Sehen Sie sich das Boxmodell des ausgewählten Elements im Bereich Berechnet an und ändern Sie es.
BearbeitenDOM-Knoten während der Entwicklung
DebuggingStil von DOM-Knoten
BearbeitenDOM-Knoten
Steuerpult öffnen, Wählen Sie den DOM-Knoten aus, der geändert werden muss, doppelklicken Sie auf das ausgewählte Element und ändern Sie es dann.
Öffnen Sie die Konsole und wählen Sie „Für“. Wenn Sie den DOM-Knoten auswählen, der geändert werden muss, bearbeiten Sie den Stilattributnamen und den -Wert in Echtzeit im Bereich „Stile“. Alle Stile außer den grauen können geändert werden (identisch mit dem Stylesheet User Agent).
Um einen Namen oder Wert zu bearbeiten, klicken Sie darauf, nehmen Sie Ihre Änderungen vor und drücken Sie Tab oder Eingabetaste, um die Änderungen zu speichern. Standardmäßig sind Ihre CSS-Änderungen nicht dauerhaft und gehen verloren, wenn die Seite neu geladen wird.
Verwenden Sie den Bereich Berechnet, um die Box von zu überprüfen und zu bearbeiten die aktuellen Parameter des Elementmodells. Alle Werte im Boxmodell können durch einfaches Anklicken geändert werden.
Ausgabecode-Ausführungszeit, muss mit console.timeEnd() abgeglichen werden Verwenden Sie
Solange Chrome DevTools aktiviert ist, zeichnen DevTools standardmäßig alle Netzwerkanfragen auf und die Aufzeichnungen werden im Netzwerkfenster angezeigt.
Klicken Sie auf Netzwerkaufzeichnung beenden Rotes Symbol protokollieren. Wenn es grau wird, bedeutet dies, dass DevTools keine Anfragen protokolliert.
Tastenkombination: Unter dem Bedienfeld „Netzwerk“ Befehl+E (Mac) oder Strg +E(Windows,Linux)
Standardmäßig, wenn die Seite neu geladen wird oder die Seite auf „Weiter“ springt , wird auch die Netzwerkanforderungsdatensatztabelle im Bereich Netzwerk aktualisiert. Wenn Sie die Netzwerkanforderungsdaten der vorherigen Seite beibehalten möchten, können Sie Protokoll beibehalten aktivieren.
Ein häufiges Anwendungsszenario: Beim Anmelden/Registrieren wird die Anmelde-/Registrierungs-API aufgerufen. Der Entwickler möchte die von dieser Schnittstelle zurückgegebene Situation überprüfen. aber die Anmeldung/Registrierung ist erfolgreich. Danach wird normalerweise auf eine neue Seite gesprungen, wodurch der Anforderungsdatensatz des Netzwerkfensters aktualisiert wird und die Rückkehr zur Anmelde-/Registrierungsschnittstelle nicht angezeigt wird. Wenn zu diesem Zeitpunkt „Protokoll beibehalten“ aktiviert ist, können Sie unabhängig von der Seite, zu der Sie wechseln, den von der vorherigen Schnittstelle zurückgegebenen Status in der Tabelle „Netzwerkanforderungsdatensatz“ anzeigen.
Klicken Sie auf das Symbol „Screenshots aufnehmen“, um die Aufnahmefunktion zu aktivieren. Wenn das Symbol blau wird, bedeutet dies, dass die Seite erneut aktiviert ist, um Screenshots anzuzeigen verschiedene Zeiten.
Nachdem Sie den Screenshot aufgenommen haben, können Sie Folgendes tun:
Klicken Sie auf ein Bild, um alle Anfragen herauszufiltern, die nach der Aufnahme des Bildes aufgetreten sind
4.3.6 Browser-Cache deaktivieren
4.3.7 Simulierte Netzwerkgeschwindigkeitsbedingungen
Zusätzlich zur Auswahl bestehender Netzwerkoptionen können Sie auch netzwerkgeschwindigkeitsbezogene Bedingungen anpassen: Öffnen Sie das Menü
Eine andere Simulationssituation ist spezieller, das heißt, es gibt kein Netzwerk. Mithilfe von
Servicemitarbeitern können PWA (Progressive Web Apps) weiterhin ohne Netzwerk genutzt werden. Um eine solche netzwerkfreie Umgebung zu simulieren, aktivieren Sie einfach „Offline“.Tipp: Entwickler sehen ein Warnsymbol auf der linken Seite von Netzwerk. Dieses Symbol erinnert Entwickler daran, dass sie sich derzeit unter simulierten Netzwerkbedingungen befinden.
Rechtsklick in die Netzwerkanforderungsdatensatztabelle und auswählen Browser-Cache löschen oder Browser-Cookies löschen.
Klicken Sie auf das Trichtersymbol, um seine Farbe in Blau zu ändern, und dann können Sie die Elemente im filtern Netzwerkanforderungstabelle Die Daten werden weiter gefiltert.
Sie können einige Zeichenfolgen, Felder, Größen, Statuscodes, Medientypen usw. in das Eingabefeld eingeben.
Hier sind Mehrfachauswahlen möglich: Halten Sie die Befehlstaste (Mac) oder die Strg-Taste (Windows, Linux) gedrückt und klicken Sie dann auf verschiedene Typen. Klicken Sie beispielsweise auf JS und Img, um js-Dateien und Bilder herauszufiltern. Offensichtlich kann „Alle“ nicht mit anderen Typen koexistieren. Wenn Sie „Alle“ auswählen, können Sie keinen bestimmten Typ auswählen.
Name: der Name der Datei oder die Kennung davon die Ressource
Status: HTTP-Statuscode
Typ: MIME-Typ der angeforderten Ressource
Initiator: Folgendes: Ein Objekt oder Handle kann eine Anfrage initiieren
Parsen: Chromes HTML-Parser
Umleitung: HTTP-Umleitung
Skript: js-Funktion
Sonstiges: Einige andere Verarbeitungen oder Vorgänge, z. B. das Navigieren zu einer Seite über einen Link oder das Eingeben einer Adresse in die Adressleiste des Browsers und dann Enter
Größe: Größe des Antwortheaders + Größe des Antworttextes
Zeit: Gesamtdauer, von der Initiierung der Anfrage bis zum Abschluss des Ressourcen-Downloads
Wasserfall: Visuelle Anzeige der verschiedenen Phasen jeder Anforderungsaktivität
befinden sich unter der Spalte Name. Klicken Sie auf die URL einer Anfrage, um die Details der Anfrage und Antwort anzuzeigen.
Standardmäßig werden Anforderungs- und Antwortheader in alphabetischer Reihenfolge angezeigt. Der Name des HTTP-Headers. Wenn Sie ihn in der tatsächlich empfangenen Reihenfolge anzeigen möchten, klicken Sie auf Klicken Sie auf „Quelle im Bild anzeigen“, andernfalls klicken Sie auf „Parsed im Bild oben anzeigen“.
Sie können die angeforderten Parameter auch auf der Registerkarte Kopfzeilen anzeigen, wie im orangefarbenen Feld in der Abbildung unten dargestellt. Es gibt auch Ansichtsquelle und Ansichtsanalyse sowie Parameterkodierungsformat (Ansichts-URL kodiert) und Dekodierungsformat (Ansicht dekodiert).
Vorschau: Vorschau des Antworttextes anzeigen
Antwort: Antworttext anzeigen
Cookies: Cookies anzeigen
Warteschlange: Der Browser stellt die Anfrage in die Warteschlange die folgenden Umstände:
Es gibt Anfragen mit höherer Priorität
Unter dieser Domain gibt es bereits 6 TCP-Verbindungen erreichen die Höchstgrenze von Chrome. Diese Regel gilt nur für HTTP/1.0 und HTTP/1.1
Angehalten: Jedes Auftreten eines Faktors in der Warteschlange führt zu einer Verzögerung der Anfrage
Proxy-Aushandlung: Die Zeit, die der Browser für die Aushandlung mit dem Proxy-Server benötigt
DNS-Suche: Die Zeit, die der Browser für die Durchführung einer DNS-Suche benötigt auf der angeforderten IP-Adresse. Zeit
Erste Verbindung: Die Zeit, die für die Initiierung der Verbindung aufgewendet wurde
Anfrage gesendet: Die Zeit, die für das Senden der Anfrage aufgewendet wurde
Waiting (TTFB): Die Zeit, die der Browser auf eine Antwort wartet, TTFB steht für Time To First Byte
Content Download: Die Zeit, die es dauert um Ressourcen herunterzuladen
Halten Sie die Umschalttaste gedrückt und bewegen Sie dann die Maus über eine Anfrage. Das initiierende Objekt der Anfrage wird grün markiert und das abhängige Objekt der Anfrage wird rot markiert.
DevTools zeigt die entsprechende Zeit an, wenn DOMContentLoaded- und Ladeereignisse an mehreren Stellen auftreten. Das DOMContentLoaded-Ereignis entspricht der violetten Linie und das Ladeereignis entspricht der roten Linie
Die Daten hier stellendie Daten dar, die den nach dem Öffnen von DevTools aufgezeichneten Anfragen entsprechen. Wenn einige Anfragen vor dem Öffnen von DevTools aufgetreten sind, werden die Daten dieser Anfragen hier nicht gezählt.
Seitenressourcensuche
Realisierung der Synchronisierung der Codebearbeitung mit lokalen Funktionen
DebuggenJavascript
Hier finden Sie die Liste der von der Seite angeforderten Ressourcen
Entwicklung Oder während des Debuggens können Sie Codeänderungen im Browser automatisch mit lokalen Dateien synchronisieren
Während der Entwicklung können Sie console.log() verwenden, um Or zu finden Korrigieren Sie Fehler im Code, aber die Verwendung von „Haltepunkten“ kann die Geschwindigkeit erheblich verbessern und ist effektiver.
Echtzeit-Bearbeitungscodefunktion
Diese Funktion kann geändert und in einer lokalen Datei gespeichert werden. Klicken Sie in der Arbeitsgruppe „Quellen“ mit der rechten Maustaste auf „Ordner zum Arbeitsbereich hinzufügen“, um den lokalen Ordner zur Arbeitsgruppe hinzuzufügen, und öffnen Sie den gewünschten Ordner im hinzugefügten Ordner . Die Datei, die Sie bearbeiten möchten, oder klicken Sie mit der rechten Maustaste auf die Datei „Zur Dateisystemressource zuordnen ...“ oder „Strg+O“, um das Suchfeld zu öffnen, und öffnen Sie dann die Datei. Drücken Sie nach der Bearbeitung zum Speichern Strg + s. Die Änderungen werden auch in der lokalen Datei vorgenommen.
DebuggingJavascript (Haltepunkt)
Haltepunkte ermöglichen es Ihnen, die Ausführung von Code anzuhalten und die Werte aller Variablen im Moment der Pause zu untersuchen.
Markieren und klicken Sie auf Event Listener Breakpoints, um diesen Abschnitt zu erweitern. Wenn das Kontrollkästchen „Klick“ aktiviert ist, wird für alle Klickereignisse ein ereignisbasierter Haltepunkt festgelegt. Wenn auf einen beliebigen DOM-Knoten geklickt wird und dieser Knoten über einen Klick-Handler verfügt, hält Devtools automatisch in der ersten Zeile des Klick-Handlers dieses Knotens an.
Hinweis: Dies ist nur einer der vielen Haltepunkttypen, die von DevTools bereitgestellt werden. Der Typ des Haltepunkts, den Sie verwenden sollten, hängt von der Art des Problems ab, das Sie debuggen möchten.
Sie können den Code Schritt für Schritt debuggen, indem Sie auf 
Zeichnen Sie alle von der geladenen Ressourceninformationen auf Website, einschließlich gespeicherter Daten (Lokaler Speicher, Sitzungsspeicher, IndexedDB, Web SQL, Cookies), zwischengespeicherter Daten, Schriftarten, Bilder, Skripte, Stylesheets usw.
Zeigen Sie den lokalen Speicher der Seite an.
Sehen Sie sich den Sitzungsspeicher der Seite an
Sehen Sie sich die Cookies der Seite an und löschen Sie sie
Doppelklicken Sie auf einen Schlüssel oder Wert, um den entsprechenden Wert zu ändern.
Doppelklicken Sie auf eine leere Zelle, um einen neuen Eintrag hinzuzufügen.
Klicken Sie auf den entsprechenden Eintrag und drücken Sie dann die Schaltfläche Löschen, um den Eintrag zu löschen. Löschen Sie alle lokalen Speicherdaten mit nur einem Klick aus dem Bereich „Speicher löschen“.
Wenn Sie mit der Seite auf eine Weise interagieren, die es Ihnen ermöglicht, Einträge zu erstellen, zu löschen oder zu ändern, werden diese Änderungen nicht in Echtzeit aktualisiert. Klicken Sie auf die Schaltfläche Aktualisieren, um Ihre Änderungen anzuzeigen.
Der Bereich „Sitzungsspeicher“ funktioniert genauso wie der Bereich „Lokaler Speicher“. Siehe den Abschnitt „Lokaler Speicher“ oben
Sehen Sie sich die Cookies im Zusammenhang mit Details wie Name, Wert, Domain, Größe usw.
Löschen Sie ein einzelnes Cookie, Cookies für ausgewählte Domänen oder alle Cookies für alle Domänen.
Verwenden Sie den Bereich Cookies, um Cookies anzuzeigen und zu löschen. Sie können die Cookie-Werte nicht ändern. 
Für jedes Cookie sind folgende Felder vorgesehen:
Sie können -Cookies auf viele Arten löschen:
Wählen Sie das -Cookie aus und klicken Sie auf die Schaltfläche „Löschen“, um das zu löschen entsprechendes Cookie.
Drücken Sie die Schaltfläche Löschen, um alle Cookies in der angegebenen Gruppe zu löschen.
Verwenden Sie den Frames-Bereich des Anwendungsfensters, um die zu organisieren Seite für Frame-Ressource.
Manchmal müssen Sie einfach alle Daten aus einer bestimmten Quelle löschen. Im Bereich „Speicher löschen“ im Bereich „Anwendung“ können Sie Servicemitarbeiter, Speicher und Caches selektiv abmelden. Um Daten zu löschen, aktivieren Sie einfach das Kontrollkästchen neben der Komponente, die Sie löschen möchten, und klicken Sie auf Standortdaten löschen. Durch diesen Vorgang werden alle Daten aus den Quellen gelöscht, die unter dem Tag „Speicher löschen“ aufgeführt sind.
Debugging Bei Problemen mit der Seitensicherheit stellen Sie sicher, dass HTTPS
Verwendung Sicherheitsübersicht Ihnen dies sofort ermöglicht Überprüfen Sie, ob die aktuelle Seite sicher ist.
Die sichere Seite leitet die Nachricht weiter Diese Seite ist sicher (gültiges HTTPS).
Klicken Sie auf Zertifikat anzeigen, um den Server anzuzeigen Zertifikat der Hauptquelle.
Nicht sichere Seiten geben die Nachricht weiter Diese Seite ist nicht sicher.
Das Sicherheitsfenster kann zwischen zwei Arten von unterscheiden Nicht sichere Seiten. Wenn die angeforderte Seite über HTTP bereitgestellt wird, wird der primäre Ursprung als unsicher markiert. Wie unten gezeigt
Wenn die angeforderte Seite über HTTPS abgerufen wird, die Seite jedoch weiterhin HTTP verwendet, um Inhalte aus anderen Quellen abzurufen, wird die Seite weiterhin als unsicher markiert. Dies wird als Seite mit gemischtem Inhalt bezeichnet. Seiten mit gemischten Inhalten sind nur teilweise geschützt, da HTTP-Inhalte von Sniffern erfasst werden können und anfällig für Man-in-the-Middle-Angriffe sind. Wie unten gezeigt
Verwenden Sie das linke Feld, um jede sichere oder nicht sichere Quelle zu überprüfen.
Klicken Sie auf eine sichere Quelle, um die Verbindungs- und Zertifikatsdetails für diese Quelle anzuzeigen.
Wenn Sie auf eine nicht sichere Quelle klicken, bietet das Sicherheitsfenster einen Link zur gefilterten Ansicht des Netzwerkfensters.
Diagnostizieren Sie die Netzwerkauslastung und die Webseitenleistung der aktuellen Webseite und geben Sie einige Optimierungsvorschläge. Listen Sie beispielsweise alle nicht verwendeten CSS-Dateien usw. auf.
Optimieren Sie die Webseite gemäß den Diagnosevorschlägen
Wählen Sie Netzwerkauslastung, Webseitenleistung, klicken Sie auf die Schaltfläche „Ausführen“. Die Netzwerkauslastung und Seitenleistungsoptimierung der aktuellen Seite werden diagnostiziert und entsprechende Optimierungsvorschläge werden gegeben.
Das obige ist der detaillierte Inhalt vonBeispiel-Tutorials für allgemeine Funktionen von Chrome DevTools. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was bedeutet Chrom?
Was tun, wenn Chrome keine Plugins laden kann?
Was ist der Kern eines Datenbanksystems?
Der Unterschied zwischen MySQL und SQL_Server
So optimieren Sie die Tomcat-Leistung
Binäre Darstellung negativer Zahlen
Zusammenfassung häufig verwendeter Computer-Tastenkombinationen
Mobile Festplattenpartitionssoftware
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
