hanseranking GmbH
hanseranking GmbH
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.
Unter Google Chrome kannst du die DEV-Tools auf verschiedenen Wegen öffnen:
Wissenswert: Sobald du im Google Chrome auf „Anzeigen“ – „Entwickler“ und „Entwicklertools“ klickst, erscheinen die Dev-Tools ebenfalls.
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.
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.
Mithilfe der Chrome-Dev-Tools kannst du verschiedene Dinge tun. Nachfolgend verraten wir dir, welche das sind.
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.
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.
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.
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:
Über Optionen kannst du weitere Funktionen innerhalb des Responsive Testing Tools anzeigen lassen. Zur Auswahl stehen:
|
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.
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“.
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.
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.
