Was sind Chrome Devtools?
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:
- Webbrowser führen aus JavaScript, CCS, Und Html, Dies sind die drei Sprachen, die Chrome Devtools verwenden sollen.
- Jeder kann den Website -Code mit Chrome Devtools manipulieren. Die angewandten Änderungen werden nur in Ihrem Browser angezeigt und verschwinden, wenn Sie diese Webseite bald aktualisieren. Diese Devtools unterstützen Sie bei der Ermittlung, welche Änderungen erforderlich sind. Sie müssen auf den Back-End-Code zugreifen, um diese Änderungen dauerhaft vorzunehmen.
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:
- Effizienz: Chrome Devtools sind in Ihren Webbrowser eingebettet und bieten Ihnen die Möglichkeit, Websites oder Inhalte zu bearbeiten, ohne Registerkarten zu wechseln.
- Panels: Mit Chrome Devtools können Sie mit verschiedenen Seitenelementen herumspielen und die Informationen extrahieren. Beachten Sie jedoch, dass alle von Ihnen vorgenommenen Änderungen verloren gehen, wenn Sie Ihren Registerkarte schließen, ohne sie zu speichern.
- Optimierung: Sie können auch Audits ausführen, über die Sie einen Bericht zur Leistung erhalten können. Im Webbrowser erhalten Sie Vorschläge zur Verbesserung der Ladegeschwindigkeit der Website.
- Debugug JavaScript: Der Benutzer kann die Fehler identifizieren, indem Sie Ihren laufenden Website -Code pausieren und den genauen Moment angeben, wenn das Skript nicht korrekt ausgeführt wird.
Wie man Chrom devtools öffnet
Chrome Developer Tools können mit Tastaturverknüpfungen zugegriffen werden:
- Drücken Sie "Strg+Verschiebung+J”Chrome Devtools an eröffnen Fenster, Chromebook, Und Linux.
- Für Mac OS, Schlagen Sie die "CMD+Shift+J" oder "CMD+Shif+C" Abkürzung.
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.