Wenn der Browser das HTML-Dokument mal wieder etwas anderes darstellt als erwartet, helfen die Entwicklertools weiter. Vorhanden in jedem aktuellen Browser, lassen sich die Entwicklertools mit einem Rechtsklick und „Element untersuchen“ starten; alternativ – und schneller – öffnen sich die Entwicklertools mit der Taste F12.
Warum die Werkzeuge in der täglichen Arbeit mit HTML, CSS und JavaScript so wichtig sind, lässt sich mit der folgenden Beispielseite schnell nachvollziehen:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispielseite Entwicklertools</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto);
body {
width: 300px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
font-family: 'Roboto', sans-serif;
}
nav {
background-color: #c1e2b3;
}
nav ul li {
display: inline-block;
}
main {
padding: 25px;
background-color: #0C8E82;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
</nav>
</header>
<main>
Hello World!
</main>
</body>
</html>
Die Seite besteht aus einem Kopfbereich (<header>), in dem sich eine unsortierte Liste mitsamt ihrer Listenelemente befindet. Auf den Kopfbereich folgt der Inhaltsbereich (<main>), der leider durch einen unschönen Abstand vom Kopfbereich getrennt wird:
Der Abstand resultiert aus Standardabständen, die der Browser für unsortierte Listen vergibt. Um nachzuvollziehen, wie groß der Abstand ist – und an welcher Stelle Änderungen vorgenommen werden müssen, um die Lücke zwischen Kopf- und Inhaltsbereich zu schließen -, braucht’s einzig die Entwicklertools, die sich mit einem Rechtsklick auf den Kopfbereich und anschließendem Klick auf „Element untersuchen“ öffnen:
Bei ausgewählter unsortierter Liste (<ul>) im linken Bereich des Fensters und einem Klick auf „Computed“ im rechten Fensterbereich öffenbart sich, dass der Browser einen Abstand von 16 Pixel für die unsortierte Liste vergeben hat:
Das Problem lässt sich folglich lösen, wenn der unsortierten Liste ein Abstand (margin) von 0 zugewiesen wird:
nav ul {
margin: 0;
}
Neben der Manipulation von CSS-Selektoren und ihren Eigenschaften bieten die Entwicklertools unabkömmliche Entwicklungswerkzeuge wie die Konsole, die Timeline oder Informationen zur Übertragungsgeschwindigkeit der eigenen Seiten und Ressourcen.