Arbeiten mit dem Seiteninspektor

Aus SELFHTML-Wiki
(Weitergeleitet von Helferlein/Viewport-Emulator)
Wechseln zu: Navigation, Suche

Sobald die Webseite von der Struktur halbwegs steht, beginnt der wichtigste Prozess: testen, testen und nochmals testen!

Früher bedeutete das einen ewigen Kreislauf von

  1. im Editor speichern
  2. Datei im Browser (bzw. in mehreren Browsern) öffnen, bzw. neu laden
  3. wieder in den Editor gehen.

Heute bieten die Browser Werkzeuge, mit denen Sie die Webseiten direkt verändern und ausprobieren können.

In diesem Kapitel zeigen wir, wie Sie Ihre Webseite mit dem Seiteninspektor untersuchen und verbessern können. Mit einigen Handgriffen mehr können Sie auch Webseiten auf externen SmartPhones debuggen.

Überprüfen Sie Ihr HTML-Markup, ob es valide ist!

  1. Öffnen Sie mit Rechtsklick das Kontextmenü des Browsers und gehen Sie auf Seitenquelltext anzeigen
    Fehler im Markup werden rot dargestellt.
  2. Deaktivieren Sie das CSS entweder im Browser oder indem Sie den Link entfernen/ auskommentieren.
  3. Testen Sie Ihre Webseite (n) in einem Validator.
  4. Ein anderer Ansatz ist ein Validierungs-Stylesheet, mit dem Fehler sichtbar gemacht werden.

Heutzutage stürzen Webseiten mit fehlerhaftem HTML nicht mehr einfach ab. Trotzdem sollten Sie sich darum bemühen, ein handwerklich perfektes Stück Arbeit im Internet zu veröffentlichen.

Andererseits schützt valides HTML-Markup nicht vor Fehlern und fehlender Zugänglichkeit: Eine div-Suppe aus lauter div-Elementen, von denen einigen sogar noch Klickfunktionalität per JavaScript hinzugefügt wurde, ist selten responsiv und nicht mit der Tastatur bedienbar. Hier bringt eine Seitenstrukturierung mit HTML5-Elementen schnell viel mehr Übersicht!


Arbeiten mit dem Seiteninspektor

In jedem Browser können Sie durch F12 oder einen Rechtsklick mit der Maus ein Kontextmenü öffnen, das eine Ansicht des Quelltexts (des HTML-Dokuments), bzw. eine Untersuchung des betreffenden Elements erlaubt. Screenshot

DOM inspizieren

Im Seiteninspektor wird das DOM einer Seite gezeigt. Hier werden nicht nur die HTML-Elemente, sondern auch Pseudoelemente und sogar das Shadow DOM (z. B. bei einem audio- oder input-Element) angezeigt.

Pseudoelement im DOM

falsch geschlossenes br-Tag

Dieses Beispiel wurde als Frage im SelfHTML-Forum gestellt, da der Zeilenumbruch größer als gewohnt war.[1]

Beispiel 
<p> 
  Dies ist ein Text <br></br> 
  mit einem Zeilenumbruch.
</p>

br ist ein inhaltsleeres Element, das normalerweise nicht geschlossen werden muss. Ein Blick in den Seiteninspektor zeigt, dass das schließende br-Tag als zweites br-Element geparst wurde.

Screenshot

Blockelemente in p

Ein weiterer typischer Fehler ist das Einfügen von Blockelementen wie div innerhalb von Textabsätzen.

Blockelemente in p-Elementen ansehen …
p {
  color: green;
}
div {
  color: red;
}
Der Absatz p soll grüne, ein mit div gekennzeichneter Bereich jedoch rote Textfarbe erhalten.
<p> 
  Dies ist ein Text 
  <div> mit einem div</div>
  und noch etwas Text.
</p>

Der Textabsatz wird unerklärlicherwiese in 3 Blöcken dargestellt. Die Farbzuweisung für p wird nur im ersten Teil ausgeführt, aber nicht im letzten.

Ein Blick in den Seiteninspektor zeigt, dass das p-Element vor dem neuen div geschlossen wird, da es keine Blockelemente als Kinder enthalten darf. Unterhalb des div wird plain text ohne Formatierung ausgegeben, da es kein Start-Tag gibt. Das schließende p-Tag wird als weiterer, jedoch leerer Absatz geparst.

Screenshot

Empfehlung: Verwenden Sie zur Hervorhebung von Text inline-Elemente wie span oder em.

Parsen fehlender Elemente

Dieser Beitrag aus dem SelfHTML-Forum beschreibt Probleme, die durch das Weglassen nicht notwendiger Elemente entstehen können.[2]

Wenn Sie die head- und body-Tags weglassen, werden die Elemente implizit trotzdem erstellt. Im Traversieren im DOM-Baum bei DOM-Manipulationen kann es hier zu Problemen führen, wenn Elemente entgegen der Notation im Markup keine Kindelemente sind.

HTML bearbeiten

Durch einen Rechtsklick auf das geparste Markup öffnet sich ein Kontextmenü, mit dem Sie das Markup ändern und neue HTML-Elemente sowie Inhalte hinzufügen können.

Screenshot

CSS bearbeiten

Das Layouten von Webseiten geht sogar noch einfacher. Durch einen Klick in das rechte, untere Feld können Sie

Kontrast-Checker-im-Seiteninspektor.png
  • CSS-Werte verändern
  • neue CSS-Eigenschaften hinzufügen

und die Änderungen gleich sehen.


Mit einem Klick auf den Farbpunkt bei Textfarbe können Sie gleich überprüfen, ob der Kontrast zwischen Text und Hintergrund genügend hoch ist.

Wenn das Layout passt, können Sie die ermittelten Eigenschaften und Werte in den Code-Editor kopieren und speichern.

Debugging auf Mobilgeräten

Webseiten müssen nicht auf allen Geräten gleich aussehen – aber es müssen alle Inhalte auf allen Geräten les- und erreichbar sein.

Die Anpassung von Webseiten an die Viewportgröße besonders von Mobilgeräten wird als Responsives Webdesign bezeichnet und ist heute angesichts der Vielzahl mobiler Geräte wie Handys, Tablets und sogar SmartWatches mit integrierten Computern unabdingbar!

Der ewige Kreislauf, Dateien …

  1. im Desktop-Editor speichern und auf den Server laden
  2. dann im Browser des Mobilgeräts öffnen, bzw. neu laden
  3. wieder in den Editor gehen

kann heute mit modernen Entwicklungswerkzeugen vereinfacht werden.

Developer Tools für Chrome

In Chrome können Sie auch Webseiten auf externen - per USB an den Desktop angeschlossenen - Geräten untersuchen. [3] [4]

Voraussetzung: Das Handy muss im Entwicklermodus sein (bitte für das jeweilige Handymodell das richtige Vorgehen selbst suchen)

  1. Schließen Sie ihr Mobilgerät mit USB an Ihren Desktop an
  2. Öffnen Sie im Chrome einen neuen Tab mit der URL chrome://inspect/#devices
  3. Aktivieren Sie das Erkennen von USB-Geräten. Danach sollte das über USB Kabel angeschlossene Smartphone erkannt werden und sich mit einem Dialog zur Authorisierung melden.
  4. Über den Tab inspect können Sie nun die internen Developer Tools öffnen und die berechneten Werte einsehen und so lange verändern, bis die Darstellung „passt“!

ToDo (weitere ToDos)

Screenshots

--Matthias Scharwies (Diskussion) 17:47, 30. Jun. 2023 (CEST)

Firefox

[5] [6]

Fazit

Durch browsereigene Tools wie den Seiteninspektor können Sie große Teile des Entwickelns und Debuggens direkt im Browser erledigen und benötigen keine externen Programme mehr. Dies ist eine große Vereinfachung und Zeitersparnis.

Testen Sie das CSS in allen Auflösungen und wenn möglich auf möglichst vielen Geräten!

Sie haben das neueste Modell von xyz noch nicht? Es gibt in Ihrem Haushalt kein altes Handy mehr? Dann wird es Zeit für die nächste Testphase:

Usability-Tests

Seitenaufbau, Inhaltsstruktur und Beschriftungen müssen so benutzerfreundlich sein, dass sie intuitiv erfasst und angewandt werden können. Dies können Sie testen, indem Sie unvoreingenommene Personen aus Ihrem Bekanntenkreis zu einem Test einladen.

Geben Sie Ihnen Ziele vor (Impressum, Artikelsuche, Einkauf mit Bezahlvorgang, etc ) und beobachten Sie, welchen Weg die Tester nehmen und vor welchen Schwierigkeiten sie stehen. Man selbst ist oft betriebsblind und denkt, die von einem selbst entworfene Struktur wäre auch für andere leicht zu durchschauen. Wenn der Tester Inhalte nicht auf Anhieb findet, oder im Formular Schwierigkeiten hat, seine Daten einzugeben, merken Sie schnell, wo Sie etwas verbessern können.

Heatmaps

Eine Heatmap (englisch heat = ‚Hitze‘, ‚Wärme‘; map = ‚Karte‘) ist ein Diagramm zur Visualisierung von Daten, deren abhängige Werte als Farben repräsentiert werden. Sie dient dazu, in einer großen Datenmenge intuitiv und schnell besonders markante Werte zu erfassen.

Im Webdesign werden heatmaps zum mouse tracking eingesetzt, um zu überprüfen, welche Bereiche mit der Maus überfahren werden. Effektiver ist das eye-tracking, eine Blickbewegungsmessung, mit der der Blickverlauf einer Person sichtbar gemacht werden kann.

Generell sollten wichtige Inhalte entsprechend der Leserichtung in unserem Kulturkreis oben links platziert werden, sodass sie sofort erfasst werden.

Freigabephase

Die Freigabephase beschreibt den Zustand, in welchem ein Projekt alle geplanten Komponenten beinhaltet und diese auch kontrolliert und geprüft wurden. In dieser Phase fallen folgende Arbeiten an:

  • Für alle verwendeten fremden Ressourcen müssen Lizenzen eingeholt werden.
  • Das Angebot wird auf dem Produktionsserver für den allgemeinen öffentlichen Zugriff freigegeben.


Weblinks

  1. ↑ SelfHTML-Forum: "<br>" Tag schliessen != Tag offen lassen?
  2. ↑ selfHTML-Forum: HTML5 Struktur richtig?
  3. ↑ Remote Web Debugging unter Android und Chrome (till.net)
  4. ↑ Debugging Safari/Chrome on your iPhone/iPad/iOS device (davidlozzi.com)
  5. ↑ Debugging Firefox on Android (chenhuijing.com)
  6. ↑ A Detailed Guide On How To Use Firefox To Debug Web Issues In Android (LambdaTest)


Siehe auch

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Arbeiten_mit_dem_Seiteninspektor&oldid=96711“