Stöbere in den neuesten Blogbeiträgen von Shopify-Mitarbeitern zum Thema Handel und Shopify-Plattform.
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.
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.
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.
Oder STRG F und dann H1 oder H2 in die Suchleiste eingeben und auf die Eingabe-Taste deines Keyboards klicken.
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:
document.querySelectorAll('h1')
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.
Zwischen Desktop und Handy Modus wechseln und Mobilgeräte simulieren:
Das Elemente Tab - den DOM-Tree und das CSS ansehen und bearbeiten:
Die Console - Fehlermeldungen ansehen und JavaScript bearbeiten.
Das Netzwerk Tab - die Ladezeiten und die einzelnen Page Elemente im Wasserfall Lade-Modell untersuchen und fehler beheben:
Das Recorder Tab um User Flows aufzuzeichnen, wiedergeben und zu messen:
Und last but not least die Performance deines Shops analysieren mit dem Performance Tab:
Sie müssen ein registrierter Benutzer sein, um hier einen Kommentar hinzuzufügen. Wenn Sie sich bereits registriert haben, melden Sie sich bitte an. Wenn Sie sich noch nicht registriert haben, führen Sie bitte eine Registrierung durch und melden Sie sich an.