Was sind Chrome Devtools?
Chrome Devtools ist eine Reihe von Tools, die Ihnen in der Front-End-Entwicklung helfen sollen. Sie können Ihre Website verbessern, indem Sie Stylingfehler und Änderungen in Echtzeit bewerten. Erfahren Sie, wie Sie Chrome Devtools verwenden, um dieses Tool als Sandkasten für das Experimentieren mit den Website -Stilen und Code zu verwenden. Sie müssen keine weitere Konfiguration durchführen, da Chrome Devtools in Ihren Webbrowser eingebettet sind. Diese Entwickler-Tools werden dringend empfohlen, da sie Ihnen bei der Bearbeitung des Stils Ihrer Website, bei der Ausführung von DOM-bezogenen Vorgängen, Debuggen von JavaScript und Verbesserung der Website-Geschwindigkeit unterstützen.
Lassen Sie uns nun nur wenige Dinge verstehen, bevor wir uns auf die Verwendung von Chrome Devtools bewegen:
Warum sollten Sie Chrome Devtools verwenden
Google Chrome Devtools erspart es Benutzern, Websites direkt im Webbrowser zu bearbeiten, und wir können diese Tatsache nicht leugnen. Um die Erklärung zu rechtfertigen, lesen Sie die folgende Liste der Chrome Devtools-Aspekte, mit denen Sie Ihre Webentwicklung verbessern können:
Wie man Chrom devtools öffnet
Chrome Developer Tools können mit Tastaturverknüpfungen zugegriffen werden:
Verwenden Sie das Menü von Chrom:
Erkunden "Mehr Werkzeuge”>“Entwicklerwerkzeuge”Im Chrommenü. Es wird Sie zum Chrom Devtools -Fenster führen:
Das Fenster für Entwickler -Tools verfügt über drei Registerkarten oben sowie weitere sechs, die Sie möglicherweise sehen, indem Sie auf das >> Zeichen daneben klicken:
Hier sind die Namen der Registerkarte, die in unserem Panel angezeigt werden: Elemente, Konsole, Quellen, Netzwerk, Leistung, Speicher, Anwendung, Sicherheit, Leuchtturm, Cookie -Editor und Adblock:
Registerkarte Elemente in Chrome Devtools
Chrome Devtools Panel öffnet sich mit dem “ElementeRegisterkarte "Registerkarte" standardmäßig. Es zeigt das HTML- und Inline -CSS an, das für die Entwicklung der Webseite verwendet wird, die Sie anzeigen:
Registerkarte Konsole in Chrome Devtools
Auf der Registerkarte "Konsole" werden JavaScript behandelt. Es enthält Details zu den auf einer Webseite vorhandenen Elementen. Sie können Konsole zum Schreiben von JavaScript -Code für die Webseiteninteraktion und das Senden von Nachrichten an sich selbst verwenden. Diese Nachrichten werden im Konsolenfenster angezeigt, wenn das JavaScript ausgeführt wird:
Registerkarte Quellen in Chrome Devtools
Auf der Registerkarte "Quellen" werden Sie alle Dateien angezeigt, mit denen die Website erstellt wird:
Registerkarte Netzwerk in Chrome Devtools
Auf der Registerkarte "Netzwerk" werden alle Ladungen für die aktuelle URL angezeigt, die Sie anzeigen. Sie erhalten detaillierte Informationen zu Ladeobjekten, einschließlich der Dauer der DNS -Suche, der ersten Verbindung, SSL usw. Schauen Sie sich das untergegebene Bild an, um über geladene Objektattribute zu erfahren:
Anwendungsregisterkarte in Chrome Devtools
Auf der Registerkarte "Anwendung" wird der Inhalt Ihres Browserspeichers angezeigt, einschließlich In-Browser-Datenbanken wie lokaler Speicher, Web SQL usw. Es ermöglicht Ihnen auch, eine feinkörnige Kontrolle über Ihre Kekse zu haben:
Sicherheitsregisterkarte in Chrome Devtools
Die Registerkarte Sicherheit enthält grundlegende Sicherheitsinformationen wie den TLS -Status einer Website und ihr HTTPS -Zertifikat:
Lighthouse Tab in Chrom Devtools
Lighthouse hilft dem Chrome Devtools -Benutzer, Berichte über die Website der Website und die Funktionalität zu erstellen, die den Entwicklern dabei unterstützen, die Leistung zu verbessern:
So verwenden Sie Chrome Devtools zum Inspektieren von Seiten -Tags
H1- und H2-Tags sind einige der wichtigsten Teile von On-Page-SEO. Sobald Sie die Seiten mit einem nicht optimierten Bild als H2 oder Seiten mit vier H2 -Tags herausgefunden haben, werden Sie die Komplexität dieser Angelegenheit verstehen.
Sie können die Chrome Devtools verwenden, um die Seiten -Tags zu inspizieren. Um dies zu tun, drücken Sie “Strg-f" oder "CMD+f”Um auf der Registerkarte Elemente zu suchen und einzugeben“H2”Um Ihre Seiten -Tags zu sehen:
So verwenden Sie Chrome Devtools zum Bearbeiten von CSS
Chrome Devtools ermöglicht es Ihnen, das CSS einer Seite direkt in Ihrem Browser zu bearbeiten. Sie können mit Schriftarten, Farbschemata und allem anderen experimentieren, was durch CSS definiert wird:
Sie können auch neue Stile auf den Webseiten mit Devtools:
Abschluss
Chrome Devtools ist ein komplettes Entwickler-Toolkit, das mit dem Chrome-Browser vorinstalliert ist. Mit diesen Tools können Benutzer Webseiten ändern, Probleme identifizieren und bessere Websites in Echtzeit erstellen. Sie können von Chrome Devtools profitieren, auch wenn Sie kein Webentwickler sind. In diesem Artikel wurden Chrome Devtools, seine Registerkarten und die Verwendung dieser Devtools in Ihrem Webbrowser besprochen. Fühlen Sie sich nun frei, Chrome Devtools zu erkunden.