FROM CACHE - de_header

Wie du die Chrome Developer Console nutzt, um einen Gesundheitscheck deines Themes auszuführen!

Gabe
Shopify Staff

design blueprint.png

 

Möchtest du deinen Theme und Shop einen Gesundheits-Check unterziehen lassen? Oder möchtest du wissen, wie viele <h1> oder <h2> Title Tags im HTML deiner Homepage eingebettet sind? Oder reagiert dein In den Warenkorb Button nicht mehr? Hat dein Shop viele Fehler im Code und du weißt nicht wo sie herkommen?

 

Die Chrome Developer Console ist ein super Tool um diese Fragen zu beantworten. Mit einer Reihe von Features, die direkt in den Google Chrome-Browser integriert sind, kannst du deinen Shop mit der Developer Console einen Gesundheits-Check durchziehen lassen. Andere Browser haben ähnliche Tools auch eingebaut, aber in diesem Artikel werde ich mich spezifisch auf die Konsole im Chrome Browser konzentrieren. Sie hilft dir, vieles über deinen Shop Code und HTML zu lernen und On-the-fly zu bearbeiten sowie Probleme im Code oder kaputte Page Elemente schnell zu diagnostizieren, damit du die Gesundheit deines Shops, vor allem für die Besucher deines Shops, gewährleisten kannst.

 

An erster Stelle dachte ich mir, was Besseres als die wichtigsten Features der Chrome Developer Console, die du sofort verwenden kannst, um einen Gesundheits-Check deines Shops durchzuführen, in einem kurzen Video zu zeigen.

 

Siehe meine Demo des Tools hier:

 

 

Die Chrome Developer Console (DevTools) ist also für deinen Shopify-Shop sehr nützlich:

  • Fehlerbehebung und Tests: Du kannst JavaScript-Probleme auf deinem Shopify-Shop beheben, HTML/CSS inspizieren und verschiedene Funktionen direkt im Browser testen.
  • Leistungsoptimierung: Analysiere die Ladezeiten und Leistung deiner Shop-Seiten, um Verbesserungsbereiche zu identifizieren.
  • Responsive Design-Tests: Stelle sicher, dass dein Shop auf verschiedenen Geräten und Bildschirmgrößen gut aussieht und funktioniert, indem du die Gerätesimulation von DevTools verwendest.
  • Netzwerkanalyse: Überwache Netzwerkanfragen und -antworten, was nützlich ist, um Ladeprobleme zu lösen oder zu verstehen, wie deine Inhalte geliefert werden.
  • CSS-Anpassung: Experimentiere in Echtzeit mit CSS-Änderungen, um das Aussehen und Gefühl deines Shops anzupassen, ohne den Code dauerhaft zu ändern.

Mit diesen Tools kannst du die User Experience in deinem Shop analysieren und verbessern, die Leistung deiner Seite steigern und sicherstellen, dass dein Shopify-Shop reibungslos funktioniert.

 

Es gibt also mehrere Möglichkeiten, das DevTool zu öffnen. Um mit dem DOM-Tree oder dem CSS zu arbeiten, klickst du mit der rechten Maustaste auf ein Element in deinem Shop und wählst “Inspect”, um das Elemente-Panel zu öffnen. Oder drücke Befehl+Wahl+C (Mac) oder Strg+Umschalt+C (Windows, Linux, ChromeOS).

 

Um protokollierte Meldungen zu sehen oder JavaScript Debugging auszuführen, drückst du Befehl+Wahl+J (Mac) bzw. Strg+Umschalt+J (Windows, Linux, ChromeOS), um direkt in das relevante Konsolenfenster zu gelangen.

 

Sobald du einen Node im DOM-Tree ausgewählt hast (siehe Video oben), kannst du mit der Tastatur im DOM-Baum navigieren, sprich, mit der Pfeiltaste nach oben oder nach unten schrittweise navigieren. 

 

image.png

 

Im obigen Beispiel ist dann <ul> ausgewählt. Drücke die Pfeiltaste nach oben oder erneut nach links und dann wird die <ul>-Liste zusammengeklappt. Der übergeordnete Node des <ul> Element wird dann ausgewählt. In diesem Fall ist es der <li>-Node. Drücke dreimal die Pfeiltaste nach unten, damit du die <ul>-Liste, die du gerade eingeklappt hast, wieder auswählst. Sie sollte jetzt so aussehen: <ul>...</ul>

Drücke die Pfeiltaste nach rechts. Die Liste wird erweitert.

 

Im DOM-Tree interessierst du dich vielleicht manchmal für einen DOM-Node, der sich nicht im Sichtfenster befindet. Zum Beispiel, wenn du alle <h1> oder <h2>-Nodes finden möchtest, um zu prüfen, ob deine Titel die korrekten <H> Heading Styles haben. Mit der Funktion "In die Ansicht scrollen" kannst du das Ansichtsfenster schnell wieder so positionieren, dass du den Knoten sehen kannst.

 

image.png

 

Oder STRG F und dann H1 oder H2 in die Suchleiste eingeben und auf die Eingabe-Taste deines Keyboards klicken.

 

Use-Case 1: der ATC (add to cart) Button funktioniert nicht:

Um zu untersuchen, warum der "Add to Cart" (In den Warenkorb legen) Button in deinem Shop nicht funktioniert, kannst du die Chrome Developer Console wie folgt verwenden:

 

  • Öffne die Shop-Seite im Chrome-Browser.
  • Rechtsklick auf die Seite und wähle "Untersuchen" oder drücke F12, um die Developer Console zu öffnen.
  • Gehe zum Tab "Console" in den DevTools, um JavaScript-Fehler zu sehen, die auftreten, wenn du auf den "Add to Cart" Button klickst. Führe nochmal einen Klick auf den Button durch während dessen.
  • Du kannst auch im "Netzwerk" Tab jegliche Netzwerkanfragen überwachen, die beim Klicken auf den Button gesendet werden. Dies hilft dir zu sehen, ob Anfragen fehlschlagen oder unerwartete Antworten zurückkommen.
  • Überprüfe im "Elements" Tab, dass der Button korrekt im HTML markiert ist und die erforderlichen Event-Listener hat.
  • Suche nach Fehlern oder Unregelmäßigkeiten, die aufzeigen, warum der Button nicht funktioniert. Es kann sich um ein Skriptproblem, ein Problem mit der Netzwerkanfrage oder eine fehlerhafte Integration handeln.

 

Use-Case 1: du möchtest alle <h1>-Überschriften in der Developer Console finden und im CSS zu ändern:

  • Öffne die Developer Console in deinem Browser (Rechtsklick auf die Seite und wähle "Untersuchen" oder drücke F12).
  • Gehe zum Tab "Console".
  • Um alle H1-Überschriften zu finden, gib folgenden JavaScript-Befehl ein:

 

 

document.querySelectorAll('h1')

 

 

  • Dieser Befehl gibt dir eine Liste aller H1-Elemente auf der Seite zurück.

Um das CSS für diese H1-Überschriften zu ändern, kannst du folgendes Skript verwenden:

 

 

document.querySelectorAll('h1').forEach(function(h1) {

    h1.style.color = 'blue'; // Ändert die Farbe zu Blau

    h1.style.fontSize = '20px'; // Ändert die Schriftgröße

    // Füge hier weitere CSS-Stile hinzu

});

 

 

Ändere die CSS-Eigenschaften nach deinen Wünschen.

 

Beachte, dass diese Änderungen nur temporär sind und nur in deinem Browser angezeigt werden. Um die Änderungen dauerhaft zu machen, musst du die CSS-Datei deines Themes entsprechend bearbeiten.

 

Die Benutzeroberfläche der Chrome Developer Console kann also etwas überwältigend sein... Es gibt so viele Tabs! Wenn du dir jedoch etwas Zeit nimmst, damit herumzuspielen und dich mit den einzelnen Tabs vertraut machst, wirst du feststellen, wie kraftvoll dieses Tool ist, um die Gesundheit und die Performance deines Shops ganz schnell und effektiv zu analysieren.

 

Siehe weitere hilfreich Links hier:

 

Zwischen Desktop und Handy Modus wechseln und Mobilgeräte simulieren:


Das Elemente Tab - den DOM-Tree und das CSS ansehen und bearbeiten:

Gabe_6-1706780386986.png

 

Die Console - Fehlermeldungen ansehen und JavaScript bearbeiten.

Gabe_3-1706780048145.png

 

Das Netzwerk Tab - die Ladezeiten und die einzelnen Page Elemente im Wasserfall Lade-Modell untersuchen und fehler beheben:

Gabe_4-1706780048487.png

 

Das Recorder Tab um User Flows aufzuzeichnen, wiedergeben und zu messen:

Gabe_5-1706780048060.png

Und last but not least die Performance deines Shops analysieren mit dem Performance Tab: