So öffnen Sie Google Chrome Developer Tools?

Google Chrome Developer Tools ist eine großartige Funktion von Google Chrome für Webentwickler. Es handelt sich um eine Reihe von Tools, die direkt in Google Chrome integriert sind, um den Entwicklern zu helfen. Es hilft Webentwicklern, Websites schneller aufzubauen und zu optimieren.

In diesem Artikel werde ich Ihnen zeigen, wie Sie Google Chrome Developer Tools in Google Chrome und einige der von ihm angebotenen Funktionen öffnen können.

Inhaltsverzeichnis:

1. Öffnen von Google Chrome Developer Tools
2. Docking von Google Chrome Developer Tools an verschiedenen Orten
3. Einige der Funktionen von Google Chrome Developer Tools
4. Schließen von Entwickler -Tools in Google Chrome
5. Abschluss
6. Verweise

Öffnen von Google Chrome Developer Tools

Eine Möglichkeit, die Google Chrome Developer Tools zu öffnen, sind die von Google Chrome.

Öffnen Sie zunächst Google Chrome und klicken Sie auf > Weitere Tools> Entwicklerwerkzeuge aus der oberen rechten Ecke von Google Chrome.

Google Chrome Developer Tools sollten angezeigt werden.

Sie können auch eine Website von Google Chrome besuchen und ein Element von der Website inspizieren, um die Entwicklertools zu öffnen.

Um ein Element von einer Webseite zu inspizieren, klicken Sie mit der rechten Maustaste (RMB) darauf und klicken Sie auf Prüfen.

Sie können auch drücken + + C Um ein Element von einer Webseite zu inspizieren und die Google Chrome Developer Tools zu öffnen.

Die Tools für Google Chrome -Entwickler sollten geöffnet werden.

Auf die gleiche Weise können Sie die Konsole der Google Chrome Developer Tools durch Drücken öffnen + + J.

Docking von Google Chrome Developer Tools an verschiedenen Orten

Wenn Sie keinen ausreichend ausreichend ausreichend ausreichenden Monitor haben, möchten Sie möglicherweise nicht, dass die Google Chrome -Entwickler -Tools auf der rechten Seite von Google Chrome angedockt werden.

Klicken Sie auf und wählen Sie eine Dockingposition aus dem aus Hafenseite Abschnitt zur Änderung der Dockingposition von Google Chrome.

Intock Google Chrome Developer Tools in ein separates Fenster.

Docken Sie Google Chrome Developer Tools links an.

Dock Google Chrome Developer Tools nach unten.

Dock Google Chrome Developer Tools nach rechts.

Einige der Funktionen von Google Chrome Developer Tools

Google Chrome Developer Tools verfügt über einige Registerkarten und Sie können bestimmte Dinge aus den Registerkarten ausführen.

Von dem Elemente Registerkarte, Sie können verschiedene Elemente von der Webseite inspizieren. Überprüfen Sie die CSS -Stile und die berechnete Größe der Elemente. Nehmen Sie sofortige Änderungen an HTML DOM und CSS der Webseite vor und sehen Sie die Ergebnisse. und viele mehr.

Von dem Konsole Registerkarte, Sie können Protokollnachrichten anzeigen und JavaScript -Codes ausführen.

Von dem Quellen Registerkarte, Sie können JavaScript -Codes debuggen, JavaScript -Code -Snippets speichern und ausführen.

Von dem Netzwerk Registerkarte, Sie können die Netzwerkaktivität, die von der Webseite angeforderten Dateien und die zum Laden benötigte Zeit überwachen und die Netzwerkaktivität der Webseite debuggen.

Von dem Leistung Registerkarte, Sie können die Seitenzeit- und Website -Leistung aufzeichnen. Sie können auch Wege finden, um sie zu verbessern.

Von dem Speicher Registerkarte, Sie können die Speicherverwendung Ihrer Website überwachen und ungewöhnliche Speicherprobleme beheben.

Von dem Anwendung Registerkarte, Sie können alle geladenen Ressourcen Ihrer Website untersuchen, z. B.:

• Indexeddb
• Web SQL -Datenbanken
• Lokaler Speicher
• Sitzungspeicher
• Kekse
• Anwendungscache
• Bilder
• Schriftarten
• Stylesheets

Von dem Sicherheit Registerkarte, Sie können Zertifizierungsprobleme, Probleme mit gemischten Inhalten und viele andere Sicherheitsprobleme der Website debuggen.

Von dem Leuchtturm Registerkarte, Sie können einen Leuchtturmbericht erstellen.

Von dem Recorder Registerkarte, Sie können die Leistung über den gesamten Benutzerfluss der Website messen.

Von dem Performance Insight Registerkarte, Sie können auf Ihrer Website umsetzbare Leistungserkenntnisse erhalten.

Sie können sehen, wie Ihre Website über Geräte verschiedener Bildschirmgrößen aussieht, die mit der Gerätemodus von Google Chrome Developer Tools.

Zu wechseln zu Gerätemodus, Klicken Sie auf die Schaltfläche Umschalten.

Ihre Website sollte in verschiedenen Bildschirmgrößen im Gerätemodus angezeigt werden. Sie können die Bildschirmgröße ändern und sehen, wie die Website mit dieser Bildschirmgröße Geräte aussieht.

Schließen von Entwickler -Tools in Google Chrome

Klicken Sie auf die Tools von Google Chrome Developer -Tools X.

Die Google Chrome Developer Tools sollten geschlossen werden.

Abschluss

Ich habe Ihnen gezeigt, wie Sie die Google Chrome Developer Tools öffnen und einige der Funktionen der Google Chrome Developer Tools besprochen haben. Weitere Informationen zu den Google Chrome Developer Tools und jeder seiner Funktionen finden Sie in den Links im Abschnitt Referenzen unten.

Verweise:

1. Übersicht - Chromentwickler
2. Nutzungsströme aufzeichnen, wiederholen und messen - Chrome -Entwickler
3. Performance -Erkenntnisse: Erhalten Sie umsetzbare Erkenntnisse in die Leistung Ihrer Website - Chrome -Entwickler