Was ist Inspect Element und Developer Tools?
Inspect Element (oder Developer Tools) ist so etwas wie das magische Werkzeug der modernen Browser. Klicken Sie einfach mit der rechten Maustaste auf eine beliebige Seite, klicken Sie auf inspizieren und voilà! Hier sehen Sie eine detaillierte Beschreibung der Seite mit den folgenden Informationen:
- Der gesamte HTML-Code, der die Website strukturiert
- Die CSS-Codes, die die Struktur gestalten und formen
- JS-Codes, die die Animationen steuern
- Stats darüber, wie lange die Seite zum Laden braucht
- Die Dateigrößen aller Assets
- Die Reihenfolge, in der die Dateien geladen werden
- Eine Konsolenseite, um die Probleme oder versteckte Meldungen eines schelmischen Entwicklers zu sehen.
Alles, was Sie über die Seite wissen müssen, ist hier zu finden! Und wollen Sie den besten Teil wissen? Sie müssen kein Geek oder Entwickler (oder beides) sein, um sie zu nutzen. Es ist für jeden! Vielleicht sind Sie ein Designer und wollen wissen, wie Ihr Design auf einem mobilen Gerät aussieht, oder vielleicht wollen Sie einfach nur einen anderen Farbton in Ihrer neuen Kopfzeile sehen und die Textgröße ändern, um sie besser sichtbar zu machen. Das Wichtigste ist, dass Ihre Änderungen keine Probleme verursachen oder irgendetwas kaputt machen können, da alle Änderungen nur auf Ihrer Seite angewendet werden.
Wenn Sie ein Website-Besitzer sind, möchten Sie vielleicht die Geschwindigkeit Ihrer Website herausfinden, nur um zu sehen, ob Ihre Kunden irgendwelche Probleme beim Zugriff auf Ihre Website haben. Oder wenn Sie ein Vermarkter sind, möchten Sie vielleicht wissen, welche Schlüsselwörter Ihre Konkurrenten verwenden. Sie verstehen, worauf ich hinaus will – das Inspect-Element ist eine Goldmine für Details, auf die jeder zugreifen kann! In diesem Artikel gebe ich Ihnen einige nützliche Tipps, wie das Inspect-Element für Ihre Website von Nutzen sein kann.
Wie kann das Inspect-Element für Ihre Website von Nutzen sein?
Stellen Sie sich vor, Sie wollen einen Teil Ihres Textes ändern, ein Bild oder einen Stil auf Ihrer Website testen, aber Sie wollen keine Staging-Umgebung nur für diesen Zweck erstellen. Sie wollen es auch nicht den Besuchern servieren. Kein Problem, hier können die Developer Tools ins Spiel kommen.
Hier ist, was Sie mit den Developer Tools (Inspect Element) tun können:
- Beliebigen Text ändern
- Farben ändern
- Fehler auf Ihrer Seite finden
- Testen Sie Ihre Seite im responsiven Modus
- Überwachen Sie die Geschwindigkeit des Ladens von Dateien
Texte ändern, Stileigenschaften und Hinzufügen neuer Stile
Für das Ändern von Texten können Sie einfach einen Doppelklick auf das Element im Entwicklerwerkzeug ausführen. Dann können Sie den Text direkt ändern. Das Ändern von Farben und das Hinzufügen neuer Stile erfordern jedoch unterschiedliche Vorgehensweisen. Um Stile zu ändern, müssen Sie die richtigen CSS-Klassen auf der rechten Seite der Developer Tools finden.
Auch das Hinzufügen neuer Stile für die Elemente ist einfach. Sie können einfach auf den Bereich „element.style“ klicken, der sich auf der rechten Seite der Entwicklertools (oberer Bereich) befindet, und dann können Sie dort Ihre CSS-Eigenschaften hinzufügen.
Fehler in den Entwicklertools finden
Sie können sich die Fehler in den Entwicklertools leicht anzeigen lassen, wenn Sie mit einem Problem kämpfen, das Sie nicht definieren können. Sie können alle Fehler auf der Registerkarte „Konsole“ in den Entwicklertools sehen. Wenn kein Fehler vorliegt und alles einwandfrei funktioniert, dann sehen Sie den Text „ready for rock“ (nur in Artbees Themes).
Responsiver Modus der Entwicklertools
Sie können den Responsive Mode in den Entwicklertools aktivieren, indem Sie auf das „Phone and Tablet“-Symbol klicken, das sich oben rechts in den Entwicklertools befindet. Nach dem Klick können Sie Ihre Website in allen Dimensionen sehen. Das ist ein ziemlich geniales Feature, das es Ihnen ermöglicht, Ihre Website in verschiedenen Dimensionen zu testen.
Überwachung der Quellen in den Entwicklertools
Sie können in den Entwicklertools auch die Quellen Ihrer Website überwachen, wie Bilder, Javascript-Dateien, CSS-Dateien, Videos, usw… Sie können dann alle Metriken auf der Registerkarte „Netzwerk“ in den Developer Tools sehen.
Mit Inspect Element die Haube Ihrer Website öffnen
Ich möchte mit der Vorstellung aufräumen, dass nur ein technisch versierter Entwickler durch all die Details navigieren kann, die das Gerüst Ihrer Website bilden. Unterschätzen Sie nicht, was Sie mit Inspect Element tun können und wie informativ die Details im Inneren sein können, die Ihnen erlauben zu sehen, was wirklich hinter dem Design Ihrer Website steckt.