• Thema

  • Technologie

Google Chrome DevTools – Konsole

Beitragsbanner mit dem Beitragsnamen und dem Logo der Chrome DevTools
Dieser Beitrag ist Teil der Serie Chrome DevTools
Beitrag speichern

Noch kein Konto? Registrieren

Du hast vielleicht schon einmal die DevTools in Google Chrome geöffnet (so geht’s) und auch schon die Elemente und Styles inspiziert (so geht’s). Und hast vielleicht auch gesehen, dass es noch weitere Tabs gibt, beispielsweise die Konsole. Diese ist aber häufig entweder leer oder es stehen so nichtssagende Sachen wie «JQMIGRATE: Migrate is installed, version 3.4.1» drin. In diesem Artikel schauen wir uns an, wofür die Konsole ist und wozu man sie brauchen kann.

Wer sich mit Webentwicklung beschäftigt, kommt früher oder später zwangsläufig damit in Verbindung: JavaScript. Eine der Programmiersprachen, auf die das Web aufgebaut ist.

Eine Website besteht üblicherweise aus drei Code-Komponenten: HTML, CSS und JavaScript. Mit HTML wird der Inhalt und dessen Struktur festgelegt. CSS ist für das Layout, Styling etc. verantwortlich. Und JavaScript? Einfach ausgedrückt ermöglicht JavaScript Benutzerinteraktionen, die über einfache Verlinkungen von Seiten hinausgehen. Wo immer auf Knopfdruck Popup-Fenster aufgehen, es scroll-basierte Animationen gibt oder man auf der Website hin- und her navigieren kann, ohne dass sie neu lädt, ist JavaScript im Spiel.

Und für alle JavaScript-Entwickler (oder die, die es noch werden wollen), ist die Konsole zentral. Einer der ersten Befehle, die man in JavaScript lernt, ist console.log(). Damit lassen sich Variablen und Werte in der Konsole ausgeben, was für die Entwicklung und Fehlersuche ein zentrales Werkzeug ist.

In der Konsole lässt sich JavaScript-Code direkt ausführen. Probier’s doch gleich aus. Öffne die DevTools in Chrome und klicke dann auf den Tab «Konsole». Falls die Konsole Text oder gar eine Fehlermeldung ausgibt, kannst du das für den Moment ignorieren. Falls du noch keinen Cursor siehst, klicke rechts neben das >-Zeichen. Und dann gib folgenden Code ein:

console.log('Hallo morntag!');

Die Konsole sollte dann den Wert «Hallo morntag!» ausgeben.

«Schön und gut«, sagst du, »aber ich benutze JavaScript nicht und habe auch nicht vor, es zu lernen. Dann brauche ich die Konsole ja gar nicht, oder?« Jein.

Wer in JavaScript programmiert, kennt die Konsole (hoffentlich) sowieso schon. Für alle anderen kann sie aber trotzdem nützlich sein.

Erste Anlaufstelle bei Fehlersuche

Klappt auf deiner Website etwas nicht wie gewünscht, kann es sich durchaus lohnen, einen Blick in die Konsole zu werfen. Denn dort werden in solchen Fällen häufig Fehlermeldungen ausgespielt. Ein gutes Beispiel dafür ist das Laden von eigenen Schriften in Elementor. Werden diese auf der Website nicht wie gewünscht geladen, ist mein erster Instinkt jeweils, die Konsole zu öffnen und zu schauen, ob es Fehlermeldungen gibt. Möglicherweise steht dann in der Konsole etwas in der Art:

«Access to font at ‘https://…’ from origin ‘http://…’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is presented on the requested resource.»

Diese Fehlermeldung gilt es genauer zu studieren. Offensichtlich wurde hier das Laden der Schrift blockiert. Der Grund dafür scheint die CORS-Policy zu sein. Bei genauer Betrachtung fällt auf, dass die eine erwähnte Adresse mit «https://…» beginnt, die andere aber mit «http://…». Gibt man den Fehler nun bei Google ein, wird schnell klar, dass hier wohl der Link für die Schriften falsch gesetzt wurde.

Das bedeutet, man muss nicht unbedingt wissen, was die Fehlermeldung bedeutet. Aber sie hilft dabei, das Problem einzugrenzen, um dann danach zu googeln oder dem Entwickler/Unterhalter der Website eine bereits gut abgeklärte Support-Anfrage zu schicken.

Coden im der Konsole

Wer sich gerne mal etwas die Füße nass machen möchte mit JavaScript, jedoch noch keinen Text-Editor herunterladen möchte und auch nicht weiß, wie man eine JavaScript-Datei in WordPress sauber lädt, kann das in der Konsole tun.. (Hier findest du eine kurze Anleitung zu deinem ersten JavaScript-Programm).

Fazit

Die Konsole ist für den Durchschnitts-Webdesigner sicher nicht so ein zentrales Feature der DevTools wie beispielsweise die Elemente. Gerade aber bei der Fehlersuche sollte man hin und wieder auch einen Blick in die Konsole werfen. Dort kann man sich viel Zeit und Ärger sparen.

Dieser Beitrag ist Teil der Serie Chrome DevTools

Über mich

Was denkst du dazu?
yeah!
0
wooow
2
what?
0
meh.
0
hahaha
0
Beitrag teilen
Was denkst du dazu?
Was denkst du dazu?
yeah!
0
wooow
2
what?
0
meh.
0
hahaha
0
Diskussion

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

 

Hinweis: Es kann bis zu zwei Stunden gehen, bis dein Kommentar auf der Website erscheint. Bitte poste deinen Kommentar nur einmal 😉

Aktuelle Jobangebote
  • Grafik / Prepress / Druck / Verpackung / Werbetechnik | Medienjobs und Stellen für Profis

  • Neue Beiträge als E-Mail
    jeden Dienstag die neusten Blogposts in deiner Inbox
    Unsere Partner:

    Dein Gerät ist aktuell offline.