Disclaimer: Die Informationen in dieser Reihe beziehen sich ausschliesslich auf die DevTools im Google Chrome Browser. Sowohl Firefox wie Safari haben ähnliche DevTools, jedoch sind nicht alle Funktionen gleich oder auf die gleiche Art aufgebaut.
Als Webentwickler gibt es ein Tool, das bei mir im Dauereinsatz ist: Die DevTools von Google Chrome. Und so hat sich für mich im Umgang damit eine gewisse Selbstverständlichkeit eingeschlichen, wodurch ich oft vergessen, wie vielseitig und brilliant dieses Werkzeug eigentlich ist – und wie wenig bekannt seine Funktionen bei durchschnittlichen Anwendern möglicherweise sind.
Dem wollen wir Abhilfe verschaffen. Dies ist der erste in einer Reihe von Blogposts, in denen wir die Chrome DevTools etwas genauer beleuchten. Wir gehen dabei Schritt für Schritt die einzelnen Tabs durch und schauen uns die verschiedenen Funktionen an. Ziel ist es, dass wir am Schluss einen Rucksack voll von neuem Wissen haben, dass uns beim Fehlersuchen hilft und uns befähigt, rasch wichtige Informationen über die jeweilige Webseite zusammenzutragen.
Wir starten gleich mit den Basics. Also wie man die DevTools überhaupt öffnet. Dafür gibt es zwei Arten:
1. Man klickt irgendwo auf der Seite mit der rechten Maustaste. Im geöffneten Kontextmenü wählt man dann den untersten Punkt «Untersuchen».
2. Man drückt den Keyboard-Shortcut Ctrl+Shift+C (Windows) beziehungsweise Command+Option+I (Mac).
Danach sollte sich unten oder seitlich ein Fenster mit den DevTools öffnen:
Hier sieht man dann eine Reihe von Menüs und Untermenüs. Das mag zu Beginn etwas einschüchternd wirken, mit der Zeit versteht man es aber immer besser und weiss, wie man sich darin zurechtfindet.
Am besten versuchst du’s gleich mal aus und klickst dich durch die einzelnen Tabs durch. Und keine Angst, kaputt machen kannst du nichts. Falls du dich verlierst oder die Seite plötzlich ganz komisch aussieht, kannst du einfach oben rechts die DevTools wieder schliessen. Oder notfalls die Seite neu laden oder den Browser schliessen und wieder öffnen.
Beim nächsten Blogpost schauen wir uns dann den ersten Menüpunkt «Elemente» etwas genauer an.
Über mich
2 Kommentare
Auf Tastaturen mit Funktionstasten funktioniert auch F12, um die DevTools aufzurufen, sowohl in Chrome als auch in Firefox.
Toller Tip, danke Thomas!