Willkommen beim Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.

Entwickler-Werkzeug Browser! – so direkt

Illustration von talhakhalil007
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; 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
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

In diesem Beitrag erfährst du alles Wichtige zum Entwickler-Werkzeug der Browser. Lerne, wie du das Tool erfolgreich einsetzen kannst, um Websites und Anwendungen effektiv zu analysieren und zu optimieren. Erfahre die Grundlagen und Tipps für eine effektive Nutzung, finde CSS-Elemente und Selektoren schnell und eigenständig und bearbeite das CSS live, um Änderungen direkt zu sehen. Zahlreiche bebilderte Erklärungen und Tipps helfen dir dabei, das Beste aus dem Entwickler-Werkzeug herauszuholen.

Browser-Entwickler-Werkzeug
vs. Browser-Konsole

Die Begriffe "Browser-Entwickler-Werkzeug" und "Browser-Konsole" werden oft synonym verwendet, da sie beide eine Reihe von Tools und Funktionen für Entwickler bereitstellen, um Webseiten zu analysieren und zu bearbeiten. Die Browser-Konsole ist jedoch ein Teil des Browser-Entwickler-Werkzeugs, das speziell für die Anzeige von JavaScript-Fehlern und -Warnungen sowie für die Durchführung von JavaScript-Befehlen und -Tests verwendet wird. Andere Funktionen des Browser-Entwickler-Werkzeugs umfassen die Elementinspektion, die Netzwerkanalyse, die Quellcode-Analyse und die Bearbeitung von CSS und HTML.

Browsers Entwickler-Werkzeug

Wenn du dich für das Entwickler-Werkzeug von Browsern interessierst, solltest du definitiv einen Blick auf die Basic-Anleitung werfen. Die Anleitung wurde teilweise von einem WP-Freund erstellt und beinhaltet Screenshots vom Edge Browser von Microsoft, was dir einen guten Einblick in die Funktionen des Entwickler-Werkzeugs geben wird.

"Dieser Beitrag bietet Dir den Einstieg zum Erfolg."

Es lohnt sich, die Anleitung Punkt für Punkt durchzugehen, um alles genau zu verstehen und es für immer im Gedächtnis zu behalten. Also, lass uns gemeinsam auf die Sprünge kommen!

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'

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

 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.

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

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

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

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.

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

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.

ID-Selektor #footer-sidebar

#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

Element mit Maustaste rechts visieren und klick Element-Informationen
Element mit Maustaste rechts visieren und klick 'Element-Informationen'

Das anvisierte Element mit der Maustaste rechts anklicken 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
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:

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

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.

Tab 3: CSS direkt im Browser anpassen

3

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:

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 Löschen von Cookies kann während der Anwendungsentwicklung erforderlich sein.

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

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

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


Tab 5: Das Werkzeug von Reiter Berechnen

5

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.

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

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

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 2023-Mai