Entwickler-Werkzeug Browser! – so funktioniert’s

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
“Classic und TinyMCE – ist so klasse!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
“Classic und TinyMCE – ist das ausgezeichnete!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
“Classic und TinyMCE – ist so sehr gut !”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
“Classic und TinyMCE – und tut sehr gut!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
“Classic und TinyMCE – ist so fabelhaft!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
“Classic und TinyMCE – ist so fein!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Das Browser-Entwickler-Werkzeug ist jedem Browser. Jedoch der Beschrieb vom Entwickler-Werkzeug können sehr langwierig sein und so sind hier dem Beitrag die Anfänge zum Erfolg. Denn im Grunde sind CSS-Elemente und Selektoren eigenständig und schnell zu finden. Weiter kann man dort das CSS bearbeiten und live sehen, wie sich die Website ändert. Also ähnlich wie WordPress Customizer. Das alles ist bebildert, um das optimal zu verwenden.

Zum Beginne! – zur Schlussfolgerung von Elementen und Selektoren braucht es auch in Bildung von praktisch des CSS, um nun zu wissen, was man tut.

“Besucher bleib drauf! – denn das hier,
das ist der Einstieg zum Erfolg”.

Browsers Entwickler-Werkzeug

Der Einführung nach ist auf die Sprünge zu kommen. So wie hier im Beschrieb ist das von WP-Freund die Basic samt Screenshots Edge Browser von Microsoft.

Für Interessierte ist den Punkt-um-Punkt mal durchzugehen und es so ein für alle Mal intus.

Tab 1: Das Allgemeine zur Wegleitung
Tab 2: Das in Übung von Aufgaben
Tab 3: CSS direkt im Browser anpassen
Tab 4: Das separat löschen von Cookies
Tab 5: Des Werkzeugs von Reiter Berechnen
Tab 6: Weiter im Beschrieb von Entwicklerwerkzeuge

1

Im Allgemeine

 Edge Browser von Microsoft. (1) Element Website klick Maustaste rechts / Untersuchen. (2) Element ist anvisiert. Weiteres (3) Formatvorlagen bspw. 'border'
Screenshot samt Beschrieb mit Snagit von WP Freund. Edge Browser.
Mit der rechten Maustaste das Element anklicken und dann 'Untersuchen'
Mit der rechten Maustaste das Element anklicken und dann ‘Untersuchen’

Im Allgemeine funktioniert das so, dass (1) das beabsichtigte Element mit der rechten Maustaste anzuklicken ist und dann ‘Untersuchen’. Siehe Bild rechts.

(2) In der Regel wird das richtige Element unter Elemente anvisiert und es ist zu sehen.

Weiteres (3) ist unter “Formatvorlagen” oder Browser-Safari in namens “Stile” zu sehen bspw von border.

Im Mouseover der Elemente finden

 Edge Browser von Microsoft. (1) 'F12', (2) klick Symbol oder statt (1 u. 2) 'Strg+Shift+C'. (3) Mouseover von Elemente. Weiter (4) Formatvorlagen bspw. 'border'
Screenshot samt Beschrieb mit Snagit von WP Freund. Microsoft Edge Browser.

(1) ‘F12’ für Windows / Mac ‘fn+F12’,

(2) Symbol anklicken und in die Website klicken.

Dasselbe in einem

Des nun folgenden Modus geht aber auch in einem also ohne (1 u. 2) mit ‘Strg+Shift+C’ für Windows / Mac ‘cmd+Shift+C’. Daher beides ob ‘F12’ und Symbol oder allein mit ‘Strg+Shift+C’ für Windows / Mac ‘cmd+Shift+C’ öffnet in einen speziellen Modus.

(3) Durch Mouseover von Elementen der Website zeigt das, was da zu finden ist.

(4) Weiter ist das der Formatvorlagen bspw von border zu sehen.

Das Suchen direkt unter Elemente

 Edge Browser von Microsoft. (1) 'F12'. (2) Auf Elemente klicken. (3) Das Suchfeld öffnen, 'Strg+F'. (4) Und direkt im Quelltext suchen.
Screenshot samt Beschrieb mit Snagit von WP Freund. Edge Browser.

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

(1) ‘F12’ für Windows / Mac die Tasten ‘fn+F12’.

(2) Auf Elemente klicken.

(3) Das Suchfeld öffnen, ‘Strg+F’ für Windows / Mac ‘cmd+F’

(4) Und so direkt im Quelltext suchen.

Das erleichtert die Suche bspw nach dem Klassenselektor .widget-title und so ist dann auch der ID-Selektor zu finden. Im Anklicke der Pfeile neben dem Suchfeld rechts ist zum nächst .widget-title zu springen.

Andersrum wie dem folgenden Beispiel den Titel des Widgets eingeben und so ist beides zu finden.

Beispiel

So ist hier der Aufgabe allein des Statify-Widgets den Titel samt Balken die Farbe anzupassen.

(1) Des Widgets Titel eingeben und nach Enter ist (2) das Ergebnis. Und zu finden ist (3) der ID-Selektor und (4) der Klassenselektor.
Anmerkung: Dasselbe wie hier unter Elemente ist auch im Reiter ‘Quellcode’ zu finden.

‘F12’ oder so ‘fn+F12’, dann in Elemente klicken und mit ‘Strg+F’ für Windows / Mac ‘cmd+F’ das Suchfeld öffnen.

(1) Des Widgets Titel eingeben und nach Enter ist

(2) das Ergebnis. Und zu finden ist

(3) der ID-Selektor und

(4) der Klassenselektor.

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’
Der Website Mausklicks rechts und dann 'Seitenquelltext anzeigen'
Der Website Mausklicks rechts und dann ‘Seitenquelltext anzeigen’
  1. Mit Rechtsklick in die Website und ‘Seitenquelltext anzeigen’.
  2. Das Suchfeld öffnen und des Suchbegriffs wie hier ‘populäre inhalte’ ist zu sehen.
Das Suchfeld öffnen und des Suchbegriffs wie hier 'populäre inhalte' ist zu sehen
Das Suchfeld öffnen und des Suchbegriffs wie hier ‘populäre inhalte’ ist zu sehen.

Tab 2: So bspw von Aufgaben

2

Übungen

Zum Beispiel drei so Aufgaben …

Erste Aufgabe

Das Widget ‘Suche’ ist im Titel “Begriffssuche”. Dort soll nun die Farbe des Titel geändert werden. Hierzu braucht es des Elements der Selektoren.

Im Beispiel ist das Twenty Fourteen Theme.

Browser Chrome

Des bspw machen wir das mit “Strg+Shift+C” für Windows, am Mac “cmd+Shift+C”. So erscheint das Entwickler-Werkzeug. Dann 1-mal auf oder so unter den Widget-Titel “Begriffssuche” klicken.

Elementauswahl

Im Mouseover ist zu sehen:

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

Raute # = ID-Selektor
Punkt . = Class-Selektor

Das Ergebnis, die Selektoren, die Eigenschaft und der Wert
#search-3 .widget-title {
color: cyan;
}
Und ferner des Beispiels

ID-Selektor #footer-sidebar… weiter Mouseover dann mit ID-Selektor #footer-sidebar sind im Footer alle Widget-Title.

 

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


Zweite Aufgabe

Von Widget ist dem Balken und der Überschrift die Farbe zu ändern. Also braucht es die Selektoren von CSS. Hier im Beispiel mit Browser Safari.

Im Beispiel ist das Twenty Fourteen Theme.

Browser Safari

Element mit Maustaste rechts visieren und klick Element-Informationen
Element mit Maustaste rechts visieren und klick ‘Element-Informationen’

Das anvisierte Element anklickt der Maustaste rechts und dann klick auf ‘Element-Informationen’.

 

 

 

Zur Schlussfolgerung von Selektoren braucht es der praktischen Erfahrung
Zur Schlussfolgerung von Selektoren braucht es auch der praktischen Erfahrung
Browser Safari der Taskleiste Entwickler
  • Der Taskleiste bedarf es von Entwickler, das ist erst mal unter Safari, Einstellungen → Erweitert und dort das Häkchen bei “Menü ‘Entwickler’ in der Menüleiste anzeigen”.
Elementauswahl starten

Browser Safari, Menüleiste → Entwickler. Mit “Elementauswahl starten” ist dann im Mouseover der Seitenleiste zu sehen. Zuerst ist der Website die Seitenleiste zu Mouseovern.

ID-Selektor #content-sidebar

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

Klassenselektor .widget-title

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

Den Link Ergenisse (1) rechsklick → Untersuchen
Den Link Ergenisse (1) Rechsklick → Untersuchen

Die Browserkonsole öffnet und dort ist

2. Folgendes von Interesse

Der Browserkonsole ist folgendes von Interesse (2)
Der Browserkonsole ist folgendes von Interesse (2)

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"].

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

Tab 3: CSS direkt im Browser anpassen

3

CSS direkt im Browser anpassen

So kann man dort das CSS bearbeiten und live sehen, wie sich die Website ändert. Das ist dasselbe wie der Customizer. So nun als Entwickler, um anderer Website* das. Das ist sehr patentes Tool!

*Bsp Supports WP-Polls mein helfen Color buttons. – doch da bis heute ohne Feedback. 

Zur Sache! – der Beschrieb so bebildert

CSS anpassen Entwicklerwerkzeuge, Schritt 1 / 3
CSS anpassen Entwicklerwerkzeuge, Schritt 1 / 3
CSS anpassen Entwicklerwerkzeuge, Schritt 2 / 3
CSS anpassen Entwicklerwerkzeuge, Schritt 2 / 3
CSS anpassen Entwicklerwerkzeuge, Schritt 3 / 3
CSS anpassen Entwicklerwerkzeuge, Schritt 3 / 3
Tab 3: So separat löschen von Cookies

4

Das löschen von Cookies

Das kann im Test von Anwendung erforderlich sein.

Browser mit F12 zum Entwicklertool, also das Entwickler-Werkzeug öffnen. Siehe Screenshot des bspw Edge Browser von Microsoft.

 Edge Browser von Microsoft
Screenshot samt Beschrieb mit Snagit von WP Freund. Edge Browser.

(1) In Browser Edge Reiter ‘Anwendung’, Chrome und Safari Reiter ‘App’ und in Firefox Reiter ‘Web-Speicher’.

(2) dann unter Speicher → Cookies.

(3) und so die Cookies die da gesetzt sind.

 

Bild links: F12 und bspw in Chrome Entwickler-Werkzeug ist das mit den Cookies im Reiter App. Bild rechts: Ganz praktisch ist das in Browser Chrome und Opera mit den Cookies. Denn auch in der Adresszeile das Schlösschen klicken …


Tab 5: Das Werkzeug von Reiter Berechnen

5

Berechnen

Das Entwickler-Werkzeug von Reiter ‘Berechnen’, wie das so von Nutzen sein kann.

HTML und CSS für Dummies von Florence Maurice
HTML und CSS für Dummies von Florence Maurice
Tab 6: Weiter im Beschrieb von Entwicklerwerkzeuge

6

Das sonst von Beschrieb …

Merke von Tastenkürzel
Öffne das Werkzeug „Element untersuchen“Command + Shift + C für Mac, Control + Shift + C für Windows
Bewegen zwischen den einzelnen KnotenPfeil nach oben und unten
Erweitern des ausgewählten KnotensRechter Pfeil
Komprimieren des ausgewählten KnotensLinker Pfeil
Rekursives Auf- und Zuklappen von KnotenOption + Klick für Mac, Alt + Klick für Windows
Bewegen innerhalb eines Knotens, um mit Attributen zu arbeitenEnter oder Zurück
Schritt vorwärts durch die Attribute eines KnotensTab
Schritt rückwärts durch die Attribute eines KnotensShift + Tab
Ausblenden oder Anzeigen des ausgewählten KnotensH
Bearbeiten und Beenden der Bearbeitung eines Knotens als HTMLF2
Wenn eine CSS-Eigenschaft ausgewählt ist, wird der Wert um eins erhöhtPfeil nach oben
Wenn eine CSS-Eigenschaft ausgewählt ist, verringerst du den Wert um einenPfeil nach unten
Wenn eine CSS-Eigenschaft ausgewählt ist, erhöhe den Wert um zehnShift + Pfeil nach oben
Wenn eine CSS-Eigenschaft ausgewählt ist, verringerst du den Wert um einsShift + Pfeil nach unten
Wenn eine CSS-Eigenschaft ausgewählt ist, erhöhe den Wert um 0,1Option + Pfeil nach oben für Mac, Alt + Pfeil nach oben für Windows
Wenn eine CSS-Eigenschaft ausgewählt ist, verringerst du den Wert um 0,1Option + Pfeil nach unten für Mac, Alt + Pfeil nach unten für Windows

Aktualisiert im Jahr 2022-Oktober