• Thema

  • Technologie

Google Chrome DevTools – Basics

Banner mit Text "Chrome DevTools - Basics" und dem Google Chrome DevTools-Logo
Dieser Beitrag ist Teil der Serie Chrome DevTools
Beitrag speichern

Noch kein Konto? Registrieren

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.

Dieser Beitrag ist Teil der Serie Chrome DevTools

Über mich

Was denkst du dazu?
yeah!
1
wooow
0
what?
0
meh.
0
hahaha
1
Beitrag teilen
Was denkst du dazu?
Was denkst du dazu?
yeah!
1
wooow
0
what?
0
meh.
0
hahaha
1
Diskussion

2 Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

 

Hinweis: Es kann bis zu zwei Stunden gehen, bis dein Kommentar auf der Website erscheint. Bitte poste deinen Kommentar nur einmal 😉

Aktuelle Jobangebote
  • Grafik / Prepress / Druck / Verpackung / Werbetechnik | Medienjobs und Stellen für Profis

  • Neue Beiträge als E-Mail
    jeden Dienstag die neusten Blogposts in deiner Inbox
    Unsere Partner:

    Dein Gerät ist aktuell offline.