Willkommen beim WP Wegerl.at 'Lesemodus' + Tastaturnavigation!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus sowie die Tastaturbedienung.
WP Wegerl.at: Einzigartige Designs, optimiert für das Nutzererlebnis.
smilies.4-user.de

Entwickler-Werkzeug Browser:
Direktzugriff leicht gemacht

Illustration von talhakhalil007
Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.


Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.




Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.


Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.




Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.


Classic Editor & Advanced Editor Tools
Erleben Sie es.


Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.




Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.


Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools


Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.





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, 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: Entwicklertool öffnen … 
Tab 2: Übung / Aufgaben
Tab 3: CSS direkt im Browser testen
Tab 4: Löschen von Cookies
Tab 5: Werkzeug "Berechnen"
Tab 6: Weiter von Entwicklerwerkzeuge

1

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 …

 Edge Browser von Microsoft. (1) Element Website klick Maustaste rechts / Untersuchen. (2) Element ist anvisiert. Weiteres (3) Formatvorlagen bspw. 'border'
Screenshot (Snagit )samt Beschrieb 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'
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), "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

 Edge Browser von Microsoft. (1) 'F12'. (2) Auf Elemente klicken. (3) Das Suchfeld öffnen, 'Strg+F'. (4) Und direkt im Quelltext suchen.
Microsoft Edge Browser.
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.

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

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.

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.

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.

Im Beispiel 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
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 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

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

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.

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

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

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

Tab 3: So separat löschen von Cookies

4

Löschen von Cookies

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

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

 Edge Browser von Microsoft
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.


Tab 5: Das Werkzeug von Reiter Berechnen

5

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.

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 …

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
wp wegerl.at

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2024 August