Developer Tools

Die Developer Tools sind Werkzeuge in jedem Browser, die es dir ermöglichen, Websiten einfacher bauen zu können. Du kannst Fehler leichter finden und deine Website testen, bevor du sie für alle verfügbar machst.

Developer Tools starten

In Chrome kannst du die Developer Tools mit ⌘COMMAND + ⌥OPTION + I (MacOS) bzw. F12 (Windows) starten. Rechtsklick + “Element untersuchen” startet ebenfalls die Developer Tools.

Aufbau der Developer Tools

Die oberste Leiste zeigt die verschiedenen Bereiche der Developer Tools. Diese können sehr viel, aber wir werden uns auf die wichtigsten Funktionalitäten konzentieren.

Wenn die Developer Tools geöffnet sind, kannst du mit einem Klick oben rechts auf das Icon mit den drei vertikalen Punkten bestimmen, wo das Fenster mit diesen Tools angezeigt werden soll.

Element untersuchen

Durch Auswählen des Pfeil-Icons oben links kannst du verschiedene Elemente auf deiner Website untersuchen. Das zeigt dir die Position im HTML-Dokument an, als auch welche CSS-Regeln für dieses Element gelten.

Im unteren Bereich der Developer Tools gibt es eine weitere Tab-Leiste, dort kannst du im Tab “Styles” die aktuell gültigen CSS-Regeln für dieses HTML-Element ansehen. In dem Fall sehen wir, dass folgende CSS-Class gilt und das Aussehen definiert:

.onboarding-ed__arrow-teaser .onboarding-ed__arrow-teaser__alpinist {
  height: 64px;
  width: 80px;
  opacity: 0.85;
  transition: opacity .25s ease;
}

CSS lokal bearbeiten

Eine Stärke der Developer Tools ist, dass du direkt im Browser CSS verändern kannst. Manchmal ist es mühsam, immer zwischen Code-Editor und Browser zu wechseln. So kannst du im Browser Stylings ausprobieren und diese dann in deinen Code-Editor übertragen. Schreibe dazu im “Styles”-Tab deine eigenen CSS-Regeln und du kannst die Auswirkungen direkt sehen.

Responsive Mode

Durch Auswählen des Icons oben links, welches aussieht wie ein kleiner und grosser Bildschirm die sich überlagern, kannst du den Responsive Modus in den Developer Tools starten. In der linken Bildschirmhälfte kannst du nun dort, wo es “iPhone 6/7/8” heisst, eine vordefinierte Screengrösse auswählen. Wenn du aus dem Dropdown “Responsive” wählst, dann kannst du die Ränder deines Screens frei vergrössern und verkleinern. So kannst du deine Website für unterschiedlichste Bildschirmgrössen testen.

Console

Manchmal funktioniert etwas nicht auf einer Website. Dann musst du den Fehler suchen. Die Console ist wie ein Fehlerprotokoll und zeigt dir an, wo ein Fehler liegen könnte. CSS Fehler wirst du hier nicht sehen. Wenn dein Javascript Probleme macht oder der Server nicht richtig funktioniert, dann findest du hier am ehesten Fehler. Ob ein Fehler oder eine Warnung für eine Website existiert, siehst du an den farbigen Icons oben rechts in deiner Konsole.

Profis können dir besser helfen, wenn du ihnen einen Auszug von deiner Console sendest. Für dieses Projekt ist die Console noch nicht relevant, aber je vertrauter du mit Webentwicklung wirst, desto mehr wirst du sie brauchen.