Was sind Chrome-Dev-Tools? Einfach erklärt!

Was sind Chrome-Dev-Tools? Einfach erklärt!

Die meisten Webbrowser wie z. B. Google Chrome sind mit Developer—Tools (Dev-Tools) ausgestattet. Diese stellen eine Vielzahl an Funktionen bereit, die zum Testen, Korrigieren, Analysieren und Gestalten von Web-Applikationen und/oder Internetseiten verwendet werden können. DEV-Tools bieten auch die Möglichkeit, inhaltliche und visuelle Anpassungen direkt an der Webseite/dem Onlineshop durchzuführen und die Auswirkungen live zu verfolgen.  

Wie kann man die Entwicklertools unter Chrome öffnen? 

Unter Google Chrome kannst du die DEV-Tools auf verschiedenen Wegen öffnen: 

• (Mac) I + Option + Cmd 
• (Windows) I + Shift + STRG 

Wissenswert: Sobald du im Google Chrome auf „Anzeigen“ – „Entwickler“ und „Entwicklertools“ klickst, erscheinen die Dev-Tools ebenfalls.  

Wie sind die Chrome Developer Tools aufgebaut?  

Das Entwicklertool erscheint im rechten Bereich des Browsers. Konfigurationen werden im oberen Bereich unter dem Tab „Elemente“ und/oder „Style“ durchgeführt. Unter „Elemente“ können HTML-Codes und unter „Style“ CSS-Codes verändert werden.  

Wissenswert: Über ESC kannst du einen dritten Bereich öffnen, den Consolen-Tab.  

Wie lassen sich die einzelnen Bereiche des Entwicklertools positionieren?  

Sobald du die Google-DEV-Tools geöffnet hast, kannst du rechts oben drei Punkte sehen. Klickst du diese an, hast du die Möglichkeit, weitere Einstellungen durchzuführen, wie z. B. die Ansicht der Entwicklertools an deine Bedürfnisse anzupassen. 

Wissenswert: Das „Dock“ (Code-Ansicht) lässt sich links unten oder in einem eigenen Fenster anzeigen. Sobald du das DEV-Tool unten anzeigen lässt, wird der CSS-Code auf der rechten und der HTML-Code auf der linken Seite angezeigt.  

Achtung: Mithilfe des DEV-Tools bekommst du nicht den Quellcode der Webseite zu sehen, sondern den durch den Webbrowser interpretierten Quellcode. Genau das ist auch der Grund, warum dir die DEV-Tools mal mehr oder weniger Code anzeigen.  

Wird dir im CSS-Code-Bereich durchgestrichener Code angezeigt, heißt das nicht, dass Fehler in der Codierung vorhanden sind. Durchgestrichener Code bedeutet nur, dass dieser vom Webbrowser ignoriert wird.  

Was kann man mit dem Chrome-Dev-Tools tun?  

Mithilfe der Chrome-Dev-Tools kannst du verschiedene Dinge tun. Nachfolgend verraten wir dir, welche das sind.  

Untersuchen des Webseiten-Quellcodes 

Die Chrome-Dev-Tools ermöglichen dir, den Quellcode einer Webseite näher anzusehen. Klicke mit der rechten Maustaste auf das Element, das dich interessiert und wähle aus dem Kontextmenü „Untersuchen“ aus.  

• Mithilfe dieser Methode kannst du dir in “Null-Komma-nichts” die wichtigsten Infos aus dem Webseitenquellcode ziehen, wie z. B. die Tracking-IDs, die Alt-Tags usw.  

Umfassender Test der Meta Description 

Im Online Marketing ist das Testen, Bearbeiten und Optimieren der Meta Daten eine der wichtigsten Aufgaben, schließlich sind diese Informationen das Erste, was User von einer Webseite in den SERPS zu sehen bekommen.  

• Um zu überprüfen, wie die veränderte Meta Description in der organischen Suche optisch aussieht, rufst du über Chrome einfach die organische Suche auf. Klicke deinen Title Tag oder die Meta Description mit der rechten Maustaste an und wähle „untersuchen“ aus. Jetzt kannst du deinen HTML-Code bearbeiten. Sobald die Veränderungen abgeschlossen sind, kannst du diese live in den SERPS ansehen. 

Das Erstellen von Mock-ups 

Nach demselben Prinzip, wie das Testen von Meta Description funktioniert, lassen sich auch Mock-ups erstellen. Das ist von Vorteil, da du so Änderungen schnell durchführen und diese beispielsweise deinem Chef und/oder deinen Kunden zeigen kannst.  

• Klicke den H1-Tag im Browser mit der rechten Maustaste an und wähle aus dem Kontextmenü „Untersuchen“ aus. Passe in der Stylesheet das Design an und bestätige deine Eingaben mit „Enter“. Jetzt kannst du deine Änderungen direkt live im Browser verfolgen.  

Emulation von Mobile Devices (Testen von Responsive Design) 

Mithilfe der Google Chrome-Dev-Tools kannst du auch das Responsive Design deiner Internetseite überprüfen. Um das Tool zu nutzen, klickst du die Tastenkombination: M + Shift + Strg. 

Alternativ kannst du diese Funktion auch aufrufen, in dem du auf der Toggle Device Toolbar “überprüfen” klickst. Danach führt der Webbrowser eine automatische Emulierung durch.  

Wissenswert:  

• Mithilfe des Google-Chrome-Webbrowsers kannst du sogar testen, wie deine Webseite auf bestimmten Geräten aussieht, wie z. B. dem Samsung Galaxy 7 oder einem Apple Gerät.  
• Des Weiteren hast du mithilfe des Tools die Möglichkeit, Breakpoints, Displayauflösung, Bedienkonzepte und Displaygrößen zu testen.  
• Das Responsive Design Testing Tool kann links oben über das entsprechende Icon aufgerufen werden.  

Über Optionen kannst du weitere Funktionen innerhalb des Responsive Testing Tools anzeigen lassen. Zur Auswahl stehen:   Gerätetyp Simulation  Media Queries  Simulation der Internetgeschwindigkeit  Überprüfen der Displayqualität  Simulation der Viewport-Größe  Zoomfaktor

Seitenladengeschwindigkeit überprüfen 

Gerade in der heutigen Zeit ist eine schnelle Ladezeit unverzichtbar. Auch hier sind die Chrome Developer Tools ein hilfreiches Werkzeug. Öffne “Audits” und „Reload Page Audit on Load“ oder „Audit Present State“ und gehe dann auf “Run”. Nun liefert dir das Tool erste Einblicke, und sagt dir wie schnell deine Webseite tatsächlich lädt.  

Überprüfe den http-Status deiner Internetseite 

Das DEV-Tool erlaubt dir auch, den http-Status einer Webseite zu überprüfen. Öffne hierfür „Network“ und wähle das Hauptdokument der Internetseite aus. Im nächsten Feld öffnest du „Headers“. 

Überprüfe den Google Analytics Tracking Code 

Wer die Funktion von Javascript-Codes auf seiner Internetseite ausprobieren will, kann dies tun, indem er den Reiter „Console“ öffnet. Alternativ ist das auch über die Tastenkürzel “Strg”, “Shift” und “J” möglich. 

Mithilfe des DEV-Tools CSS-Fehler finden 

Das Chrome DEV-Tool kann dir auch helfen, Tippfehler zu finden und zu korrigieren. Sobald ein Programmierbefehl nicht korrekt ist, kannst du ein Ausrufezeichen sehen. Sobald du mit dem Mauszeiger darüber fährst, wird dir angezeigt, ob der Value (Wert) oder die Property (Eigenschaft) verkehrt ist. Nur dann ist mit dem Code etwas nicht ok. Ist der Code durchgestrichen, gibt es keinen Grund nervös zu werden.  

Fazit: Die Chrome Developer Tools bieten SEOs und Webentwicklern eine Vielzahl nützlicher Funktionen, die äußerst hilfreich sind. 

Sie haben noch Fragen? Zögern Sie nicht, uns anzusprechen!

Jetzt Kontakt aufnehmen