Entwicklertool öffnen

Browser Safari

Wird das Menü Entwickler in der Menüleiste nicht angezeigt, wähle Safari > Einstellungen, klicke auf Erweitert und wähle dann "Funktionen für Webentwickler anzeigen" aus. Infolge ist der Menüleiste die Schaltfläche Entwickler und man kann direkt von dort aus entprechendes auswählen. Mit Aktivierung von Funktionen für Webentwickler anzeigen ist dasselbe auch über "cmd+alt+I" auszuwählen.

Browser Edge, Firefox und Chrome

1. Drücke die Taste "F12" (Windows) oder "fn+F12" (Mac), um das Entwickler-Tool zu öffnen.
2. Alternativ kannst du auch direkt in den Entwickler-Modus wechseln, indem du die Tastenkombination "Strg+Shift+C" (Windows), "cmd+Shift+C" (Mac) oder cmd+alt+I drückst.

Allgemein gilt …

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), "cmd+Shift+C" (Mac) oder cmd+alt+I 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

Formatvolagen 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 Classen oder IDs. Wenn du beispielsweise nach dem Classenselektor ".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 Classenselektor (.widget-title).

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

Der Erfolg:

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

Seitenquelltext anzeigen

• 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.

Im Beispiel 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 Classenselektor ist .widget-title.

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

Im Mouseover ist zu sehen:

Da oben ist der ID-Selektor #search-3 relevant und folgend der Classenselektor .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 Classenselektor .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.

Im Beispiel Browser Safari

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

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 Classenselektor .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 Classenselektoren 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 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".

Link-Selektor, dann das korrekte CSS

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”. Damit geht einiges. 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. Dort im Scrolle des Codes ist das zu sehen.

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. Zum Beispiel könnte man das CSS von WP-Polls bearbeiten, um farbige Buttons zu erstellen. 

Hier ist eine bebilderte Anleitung dazu:

Als Entwickler ist das ein nützliches Tool. Man kann damit auch anderen Websites helfen (bspw. Supports WP-Polls Color buttons).

Löschen von Cookies

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

Öffne das Entwickler-Werkzeug (Beispiel Edge-Browser).

(1) Im Edge-Browser findest du 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 und Opera ist das praktisch, dass man immer noch über das Schloss-Symbol in der Adressleiste auf die Cookies zugreifen und sie löschen kann.

Werkzeug: Berechnen / Konsole

Der Reiter "Berechnen" oder "Konsole" 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 "Konsole" 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 "Konsole" 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 "Konsole" 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.: