Im Allgemeine

Allgemein gilt: (1, siehe Bild oberhalb und rechts) Um ein bestimmtes Element mit dem Entwickler-Werkzeug zu untersuchen, klicke mit der rechten Maustaste auf das Element und wähle "Untersuchen".

(2) Dabei wird das Element normalerweise unter dem Abschnitt "Elemente" angezeigt .

Weitere Informationen (3) findest du unter dem Abschnitt "Formatvorlagen" oder unter "Stile", falls du den Browser Safari verwendest. Hier sind beispielsweise CSS-Stile wie "border" zu finden.

Im Mouseover der Elemente finden

Um den Mouseover-Modus im Entwickler-Werkzeug zu aktivieren, gibt es zwei Möglichkeiten:

1. Drücke die Taste "F12" (Windows) oder "fn+F12" (Mac), um das Entwickler-Tool zu öffnen. Klicke dann auf das Symbol, das im Bild oben mit (2) gekennzeichnet ist, und anschließend auf die gewünschte Stelle in der Website.
2. Alternativ kannst du auch direkt in den Entwickler-Modus wechseln, indem du die Tastenkombination "Strg+Shift+C" (Windows) oder "cmd+Shift+C" (Mac) drückst.

Im Mouseover-Modus kannst du nun über die Maus das gewünschte Element auf der Website ansteuern und erhältst direkt im Entwickler-Werkzeug Informationen darüber. Unter dem Abschnitt "Formatvorlagen" kannst du beispielsweise CSS-Stile wie "border" einsehen.

Das Suchen direkt unter Elemente

Wer gut im HTML lesen, ist das der Formatvolagen auch unter Elemente zu suchen

Wenn du gut im Lesen von HTML-Code bist, kannst du auch direkt unter dem Abschnitt "Elemente" im Entwickler-Werkzeug nach CSS-Formatvorlagen suchen.

(1) Drücke die Taste "F12" (Windows) oder "fn+F12" (Mac), um das Entwickler-Tool zu öffnen.

(2) Klicke auf den Abschnitt "Elemente".

(3) Öffne das Suchfeld, indem du "Strg+F" (Windows) oder "cmd+F" (Mac) drückst.

(4) Gib den Namen des CSS-Selektors, wie z.B. ".widget-title", ein und suche direkt im Quelltext.

Das erleichtert die Suche nach spezifischen CSS-Selektoren wie Klassen oder IDs. Wenn du beispielsweise nach dem Klassenselektor ".widget-title" suchst, kannst du auf die Pfeile neben dem Suchfeld klicken, um schnell zwischen den verschiedenen Ergebnissen zu navigieren. Alternativ kannst du auch den Titel des Widgets eingeben und so nach beiden Selektoren suchen.

Beispiel

Das Ziel hier ist, den Titel und die Balkenfarbe des Statify-Widgets anzupassen.

Anmerkung: Die gleichen Schritte wie in Elemente sind auch im Reiter "Quellcode" zu finden.

Öffne das Entwickler-Werkzeug mit "F12" oder "fn+F12" und klicke auf Elemente. Verwende dann "Strg+F" für Windows oder "cmd+F" für Mac, um das Suchfeld (1) zu öffnen.

Indem du den Titel des Widgets (1) eingibst und auf "Enter" drückst, wird das Ergebnis angezeigt. Hier findest du den (3) ID-Selektor (#statifywidget-4) und (4) den Klassenselektor (.widget-title).

Raute # = ID-Selektor #statifywidget-4
Punkt . = Class-Selektor .widget-title

Der Erfolg

#statifywidget-4 .widget-title {
border-color: #ff6600;
color: #ff6600;
}

Des Beispiels ist dasselbe
unter 'Seitenquelltext anzeigen'

Als zusätzliches Beispiel kann man auch den Quelltext einer Website anzeigen lassen, indem man mit der rechten Maustaste auf die Website klickt und dann 'Seitenquelltext anzeigen' auswählt. Hier kann man dann auch das Suchfeld öffnen und nach dem gewünschten Begriff suchen. Beachte jedoch, dass dies nur eine alternative Methode ist und nicht Teil der Hauptanleitung.

1. Mit Rechtsklick in die Website und 'Seitenquelltext anzeigen'.
2. Das Suchfeld öffnen und des Suchbegriffs wie hier 'populäre inhalte' ist zu sehen.

Übungen

Hier sind drei Beispiel-Aufgaben.

Erste Aufgabe

Ändere die Farbe des Titels des Such-Widgets mit dem Titel "Begriffssuche". Dazu musst du die entsprechenden Selektoren des Elements finden.

In diesem Beispiel verwenden wir das Twenty Fourteen Theme und den Chrome Browser.

Browser Chrome

Öffne das Entwickler-Werkzeug mit "Strg+Shift+C" (Windows) oder "cmd+Shift+C" (Mac). Klicke dann einmal auf oder unter den Widget-Titel "Begriffssuche".

Elementauswahl

Während du mit der Maus über das Element fährst, erscheinen Informationen im Entwickler-Werkzeug. Der relevante ID-Selektor ist in diesem Fall #search-3 und der Klassenselektor ist .widget-title.

Eine Raute (#) bezeichnet einen ID-Selektor und ein Punkt (.) einen Klassenselektor.

Im Mouseover ist zu sehen:

Da oben ist der ID-Selektor #search-3 relevant und folgend der Klassenselektor .widget-title

Das Ergebnis, die Selektoren, die Eigenschaft und der Wert

#search-3 .widget-title {
  color: cyan;
}

Und ferner des Beispiels

Ein weiteres Beispiel: Wenn wir alle Widget-Titel im Footer-Bereich ändern möchten, können wir den ID-Selektor #footer-sidebar und den Klassenselektor .widget-title verwenden. Indem wir diese Selektoren auswählen, sind alle Widget-Titel im Footer-Bereich betroffen und können geändert werden.

#footer-sidebar .widget-title {
color: cyan;
}

Zweite Aufgabe

Um die Farbe des Balkens und der Überschrift eines Widgets zu ändern, müssen die entsprechenden CSS-Selektoren gefunden werden. Dazu klicken wir mit der rechten Maustaste auf das Element, das wir ändern möchten, und wählen 'Element-Informationen'.

Im Beispiel verwenden wir den Safari-Browser und das Twenty Fourteen Theme.

Browser Safari

Das anvisierte Element mit der Maustaste rechts anklicken und dann klick auf 'Element-Informationen'.

Ein Beispiel mit dem Browser Safari und der Entwicklertool-Leiste:

Um die Entwicklertools in Safari zu aktivieren, muss zunächst unter 'Einstellungen' → 'Erweitert' das Häkchen bei 'Menü "Entwickler" in der Menüleiste anzeigen' gesetzt werden. Dann kann man in der Menüleiste auf 'Entwickler' klicken und 'Elementauswahl starten' auswählen. Wenn man die Maus über die gewünschten Elemente bewegt, werden diese hervorgehoben.

Folgendes ist nur so beiläufiges Beispiel:

Im Ersten ist da obig das mit dem ID-Selektor #content-sidebar welches wir brauchen.

Im nächst Mouseover ist zu sehen der Klassenselektor .widget-title

Die Selektoren, die Eigenschaft und der Wert

Die Deklaration für den Balken heißt border-color und der Überschrift color. Infolge das CSS:

#content-sidebar .widget-title {
border-color: #ff6600;
color: #ff6600;
}

Soweit allein mit drei Klassenselektoren und der Deklarationen. Das ist nur des bspw, weil von zwei Selektoren wie oben besser ist:

.content-sidebar .widget .widget-title {
border-color: #ff6600;
color: #ff6600;
}

Und bspw alle Widgets Seitenleiste links und Fußleiste der Titel die Farbe:

.widget-title {
color: #ff6600;
}

Dritte Aufgabe

WP-Polls, da ist ja unter dem Abstimmen-Button der Link zu den Ergebnissen und zurück. Der Link nun ( .wp-polls a) sollte auch so als Button sein. Vorerst ist der Selektor zu definieren.

Selektor finden

1. Den Link Ergebnisse (1) Rechsklick → Untersuchen

Die Browserkonsole öffnet und dort ist

2. Folgendes von Interesse

Das bei (2) ist nach Doppelklick auf href zu kopieren. Somit haben wir das Grundlegende href="#ViewPollResults".

Selektor dann CSS richtig

So ziemlich jeder a-Tag ist individuell zu gestalten. Einfach mit: a[href=""] oder wenn der Link besonders anfängt, bspw bei einem Beitrag: a[id^="post-"]

Das ^ steht dann für “fängt mit an”. Da geht einiges mit. Lese hier: https://www.w3schools.com/cssref/sel_attr_contain.asp. Funktioniert mit allen Attributen sowie oben auch mit dem href Attribut.

^{Pr. WP-Freund}

Somit heißt der Selektor: a[href="#ViewPollResults"].

Hier ist eine mögliche Lösung für die dritte Aufgabe:

CSS-Regel für den Ergebnis-Button definieren.

a[href="#ViewPollResults"] {
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  color: #fff; 
  font-size: 14px; 
  padding: 8px 16px; 
  text-align: center; 
  text-decoration: none; 
}

Wie des WP-Polls das CSS weiter der Deklaration siehe evtl. zum Beitrag.

CSS direkt im Browser testen

Man kann das CSS direkt im Browser bearbeiten und sehen, wie sich die Website ändert. Das ist ähnlich wie der Customizer in WordPress. Als Entwickler ist das ein nützliches Tool, um anderen Websites zu helfen*. Zum Beispiel könnte man das CSS von WP-Polls bearbeiten, um farbige Buttons zu erstellen.

*Bsp Supports WP-Polls mein helfen Color buttons. 

Hier ist eine bebilderte Anleitung dazu:

Das löschen von Cookies

Das Löschen von Cookies kann während der Anwendungsentwicklung erforderlich sein.

Öffne das Entwickler-Werkzeug beispiels Edge-Browsers von Microsoft mit der Taste F12.

(1) Im Edge-Browser finden Sie die Cookies im Reiter 'Anwendung',

• in Chrome im Reiter 'App', in Firefox im Reiter 'Web-Speicher', in Opera der Taskleiste Entwickler / Entwicklerwerkzeue / Reiter Application und in Safari im Reiter 'Speicher'.

(2) Klicke auf 'Speicher' und wählen die 'Cookies'.

(3) Entferne die Cookies, die du löschen möchtest.

Links im Bild: Das Öffnen des Entwickler-Werkzeugs in Chrome durch Drücken von F12  oder fn+F12 und das Löschen von Cookies. In Chrome befindet sich die Option zum Löschen von Cookies im Reiter "App", während es in anderen Browsern, wie Firefox, "Web-Speicher" auch "Speicher" oder in Opera "Application" heißt.

Rechts im Bild: In Chrome war das so und Opera ist es so praktisch, dass man immer noch über das Schloss-Symbol in der Adressleiste auf die Cookies zugreifen und sie löschen kann.

Berechnen

Der Reiter "Berechnen" (auch "Console" genannt) im Entwickler-Werkzeug wird hauptsächlich für das Debugging von JavaScript-Code verwendet. Hier können Entwickler JavaScript-Code eingeben und testen, und sie können auch Fehlermeldungen und Debugging-Informationen anzeigen lassen.

Im Reiter "Berechnen" können Entwickler auch Variablenwerte, Funktionen und andere Objekte anzeigen lassen, um sie zu überprüfen und zu debuggen. Darüber hinaus kann der Reiter "Berechnen" auch für die Interaktion mit der Seite verwendet werden, zum Beispiel zum Ändern des HTML-Codes oder zum Testen von AJAX-Aufrufen.

Insgesamt ist der Reiter "Berechnen" ein leistungsstarkes Werkzeug für Entwickler, das ihnen hilft, den Code zu debuggen und zu testen, um sicherzustellen, dass er korrekt funktioniert.

• Kurz zum Beispiel siehe hier: books.google

Und weiter zum Thema,
welches sonst wo im Beschrieb ist …

• Firefox-Entwicklertools → Seiteninspektor
• Browser Werkzeug “Element untersuchen” u. a. das Merke …