Jeder moderne Browser bringt ein mächtiges Werkzeug direkt mit – die Entwicklerwerkzeuge, auf Englisch DevTools (kurz für Developer Tools). Du musst nichts installieren, nichts kaufen: Ein Druck auf die F12-Taste, und sie öffnen sich direkt im Browser.
Die DevTools sind kein Werkzeug nur für Profis. Schon beim Einstieg ins Webdesign helfen sie enorm – zum Beispiel wenn etwas nicht so aussieht wie gewollt, oder wenn man verstehen will wie eine andere Seite aufgebaut ist. In dieser Artikelserie schauen wir uns die wichtigsten Bereiche der DevTools Schritt für Schritt an.
Teil 1 – Bildschirmgrößen testen
Wie sieht deine Website auf einem Smartphone aus – oder auf einem Tablet? Die DevTools haben dafür einen eingebauten Modus, mit dem du verschiedene Bildschirmgrößen direkt im Browser simulieren kannst. Ideal wenn du responsive Design ausprobieren und verstehen willst.
Mit dem Inspektor klickst du jedes Element einer Seite direkt an, siehst die HTML-Struktur dahinter und kannst CSS live bearbeiten – Änderungen werden sofort angezeigt. Das schnellste Werkzeug um zu verstehen wie eine Seite aufgebaut ist.
Welche Schrift verwendet diese Seite? Welchen genauen Farbwert hat dieser Button? Die DevTools verraten es dir in Sekunden – direkt am Element, ohne Umwege.
Die Konsole zeigt dir was dein JavaScript tut – oder warum es es nicht tut. Fehlermeldungen lesen, Werte mit console.log() ausgeben und Code direkt eintippen: unverzichtbar sobald du mit JavaScript anfängst.
Steckst du fest oder kommt etwas nicht so heraus wie gedacht? In der dev-community findest du Entwickler und Designer die gerne helfen – egal ob Anfänger oder nicht. Keine Frage ist zu klein.
