Immer mal wieder kommt die Frage auf, wie ein bestimmtes Element auf einer Webseite verändert werden kann. Dazu muss man natürlich erst einmal wissen, welchen Namen das Element hat und welche Regeln das Stylesheet dafür vorsieht. Um das herauszufinden, kann man sich entweder mühsam durch den Quellcode der Webseite lesen (und verstehen) und anschließend im Stylesheet nach den zutreffenden Deklarationen suchen, oder man macht es sich einfach und nutzt ein Browser-Entwicklertool ala Firebug und Co..

Jeder der großen Browser kommt mit eigenen Tools für die Webentwicklung daher:

  • bei Google Chrome nennt sich das Tool schlicht Entwicklertools, welches im Menü „Tools“ -> „Entwicklertools“ oder über die Tastenkombination STRG + Umschalt + I aufgerufen werden kann,
  • bei Mozilla Firefox findet ihr das browsereigene Tool im Menü „Web-Entwickler“ -> „Inspektor“ oder ebenfalls über die Tastenkombination STRG + Umschalt + I und
  • beim Internet Explorer drückt ihr entweder die Taste F12 oder ruft im Menü den Punkt „F12 Entwicklertools“ auf.

Bei Chrome und Firefox habt ihr darüber hinaus die komfortable Möglichkeit das gesuchte Element mit der rechten Maustaste anzuklicken und aus dem Kontextmenü „Element untersuchen“ zu wählen.

Entwicklertools über das Kontextmenü aufrufen

Es öffnet sich das Entwicklertool und das gesuchte Element ist auch gleich ausgewählt.

Neben den Tools der Browserhersteller gibt es noch eine Vielzahl von Zusatzprogrammen (Add-ons) von Fremdanbietern, die noch weitere Möglichkeiten bieten, als die browsereigenen Tools. Das bekannteste ist sicherlich Firebug für Mozilla Firefox.

Ich beschränke mich in diesem Beitrag auf die Chrome-Entwicklertools und zeige die Funktionsweise. Die Tools für Firefox und Internet Explorer sind ähnlich aufgebaut, wobei das Microsoft Tool doch noch einiges an Verbesserungspotential bietet.

Schauen wir uns den Aufbau des Chrome-Entwicklertools einmal genauer an:

Aufbau des Entwicklertools für Google Chrome

Auf der linken Seite sehen wir die Struktur der Webseite im Explorer-Stil mit den einzelnen Elementen. Wir sehen hier die einzelnen IDs und Klassen der Elemente sowie definierte Inline-Styles. Ein nach rechts zeigendes Dreieck vor dem Element zeigt an, dass Kindelemente vorhanden sind.

Im rechten Bereich werden die auf das im linken Bereich ausgewählte Element zutreffenden Style-Deklarationen angezeigt.

Praxis

So, schauen wir uns das Ganze mal in der Praxis an. Nehmen wir mal eine bekannte Webseite: wie wäre es mit Google? Ändern wir einfach mal ganz dreist die Hintergrundfarbe von weiß auf orange? Mal sehen, wie’s ausschaut.

Rufen wir also die Webseite von Google auf und klicken mit der rechten Maustaste auf einen freien Bereich und wählen „Element untersuchen“ aus dem Kontextmenü.

Aufbau der Google-Webseite

Wir sehen, dass die Hintergrundfarbe der Google-Webseite – wenig überraschend – im body auf weiß (#fff) festgelegt ist. Um das zu ändern klicken wir einfach auf den Hex-Farbcode. Es öffnet sich ein Eingabefeld, in das wir unsere eigenen Werte eintragen können:

Deklaration in den Entwicklertools verändern

Das Ergebnis bekommen wir sofort präsentiert: die Google Webseite erstrahlt in prachtvollem orange:

Google in orange

Bestehende Werte zu überschreiben ist also recht simpel. Genauso einfach ist es eine neue Deklaration hinzuzufügen. Die Google-Webseite in Großbuchstaben? Bitte sehr:

Google mit Großbuchstaben

Um eine neue Deklaration hinzuzufügen, klickt ihr im rechten Bereich mit der linken Maustaste auf einen freien Bereich des Elements, in diesem Fall dem body. Es öffnet sich ein Textfeld, in das ihr den CSS-Befehl (ohne den abschließenden Doppelpunkt) eingebt, in userem Beispiel text-transform. Beendet die Eingabe des Befehls mit der Tabulator-Taste (nicht mit Enter!). Ihr springt zum nächsten Eingabefeld, in welches ihr die Wertdefinition eingebt, allerdings ohne abschließendes Semikolon. Fertig.

Wie deaktiviert man Deklarationen? Ebenfalls ganz einfach. Bewegt ihr euch mit der Maus über eine Style-Deklaration kommt ein Kontrollkästchen zum Vorschein. Das deaktiviert ihr und schon wird die Deklaration nicht mehr angewendet.

Ebenfalls möglich: ganze Elemente aus dem Quelltext löschen. Klickt dazu im linken Bereich mit der rechten Maustaste auf das Element, das gelöscht werden soll und wählt aus dem Kontextmenü „Delete node“:

Element löschen

In diesem Beispiel würden wir der Google Suche die Sucheingabe entfernen. Fies, oder?

Was gibt es sonst noch zu sagen?

Wird im linken Bereich ein Element gehovert, wird das Element auf der Webseite farblich hervorgehoben. So kann man sicher sein, dass man auch das gewünschte Element erwischt hat. Gleichzeitig wird die Höhe und Breite des Elements angezeigt. Auch das ist sehr hilfreich; wer schon einmal versucht hat die pixelgenaue Höhe oder Breite eines Elements zu ermitteln, wird mir sicher zustimmen.

Wer bei einem bestimmten Element einen bestimmten Status benötigt, beispielsweise :hover bei einem Listenelement eines Menüs, damit das Untermenü angezeigt wird, kann Elementen einen Status „aufzwingen“:

Klickt das Element mit rechts an und wählt aus dem Kontext-Menü „Force element state“ und aus dem Untermenü dann den benötigten Status:

Element-Status ändern

Und wo wir gerade bei Element-Status sind: es wird lediglich der aktuelle Status des Elements eingeblendet, bei einem a-Tag also nur der nicht aktive, nicht gehoverte, nicht fokussierte und nicht besuchte Link. Wer die weiteren Status eines Elements sehen möchte, muss dies erst aktivieren:

Element-Status einblenden

Auch noch interessant ist das kleine Rädchen in der rechten unteren Ecke. Hier habt ihr eine Vielzahl von Optionen, um das Verhalten des Browsers zu „manipulieren“.

Einstellungen der Entwicklertools

So lässt sich beispielsweise der User-Agent oder die Auflösung verändern (prima um das responsive Layout zu testen oder Screenshots anzufertigen), Touch-Events emulieren, Java-Script deaktivieren, und vieles mehr.

Spannende Sache diese Entwicklertools, oder?