Quellenbereich – Übersicht

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Im Bereich Quellen können Sie die Ressourcen Ihrer Website wie Stylesheets, JavaScript-Dateien und Bilder aufrufen und bearbeiten.

Übersicht

Im Bereich Quellen haben Sie folgende Möglichkeiten:

Bereich „Quellen“ öffnen

So öffnen Sie den Bereich „Quellen“:

  1. Öffnen Sie die Entwicklertools.
  2. Drücken Sie eine der folgenden Tasten, um das Befehlsmenü zu öffnen:
    • macOS: Befehlstaste + Umschalt + P
    • Windows, Linux, ChromeOS: Strg + Umschalttaste + P
  3. Geben Sie sources ein, wählen Sie Bereich „Quellen anzeigen“ aus und drücken Sie die Eingabetaste.

Alternativ können Sie rechts oben auf das Dreipunkt-Menü Weitere Optionen > Weitere Tools > Quellen klicken.

Dateien ansehen

Klicken Sie auf den Tab Seite, um alle Ressourcen anzuzeigen, die auf der Seite geladen wurden.

Tab „Seite“

Struktur des Tabs Seite:

  • Die oberste Ebene, wie top im Screenshot oben, stellt einen HTML-Frame dar. Sie finden top auf jeder Seite, die Sie besuchen. top steht für den Hauptrahmen des Dokuments.
  • Die zweite Ebene, z. B. developers.google.com im Screenshot oben, steht für einen Ursprung.
  • Die dritte und vierte Ebene usw. stellen Verzeichnisse und Ressourcen dar, die von diesem Ursprung geladen wurden. Im Screenshot oben lautet der vollständige Pfad zur Ressource devsite-googler-button beispielsweise developers.google.com/_static/19aa27122b/css/devsite-googler-button.

Klicken Sie auf dem Tab Seite auf eine Datei, um ihren Inhalt auf dem Tab Editor zu sehen. Sie können sich beliebige Dateitypen ansehen. Bei Bildern wird eine Vorschau angezeigt.

Eine Datei auf dem Tab „Editor“ ansehen.

CSS und JavaScript bearbeiten

Klicken Sie auf den Tab Editor, um CSS und JavaScript zu bearbeiten. In den Entwicklertools wird die Seite aktualisiert, damit der neue Code ausgeführt wird.

Auch im Editor können Sie Fehler beheben. So werden beispielsweise Kurzinfos zu Syntaxfehlern und anderen Problemen wie fehlerhaften CSS-@import- und url()-Anweisungen sowie HTML-href-Attribute mit ungültigen URLs unterstrichen und inline mit Fehlerinfos angezeigt.

Eine Kurzinfo zu einem Syntaxfehler.

Wenn Sie die background-color eines Elements bearbeiten, wird die Änderung sofort wirksam.

CSS auf dem Tab „Editor“ bearbeiten

Damit JavaScript-Änderungen wirksam werden, drücken Sie die Befehlstaste + S (Mac) oder Strg + S (Windows und Linux). In den DevTools wird ein Script nicht noch einmal ausgeführt. Daher werden nur die JavaScript-Änderungen wirksam, die Sie innerhalb von Funktionen vornehmen. Beachten Sie beispielsweise, dass console.log('A') nicht ausgeführt wird, console.log('B') jedoch schon.

JavaScript auf dem Tab „Editor“ bearbeiten

Wenn das gesamte Script nach der Änderung noch einmal in den Entwicklertools ausgeführt wurde, wurde der Text A in der Console protokolliert.

In den DevTools werden Ihre CSS- und JavaScript-Änderungen gelöscht, wenn Sie die Seite neu laden. Informationen zum Speichern der Änderungen in Ihrem Dateisystem finden Sie unter Arbeitsbereich einrichten.

Snippets erstellen, speichern und ausführen

Snippets sind Skripts, die auf jeder Seite ausgeführt werden können. Angenommen, Sie geben den folgenden Code wiederholt in die Console ein, um die jQuery-Bibliothek in eine Seite einzufügen, damit Sie jQuery-Befehle über die Console ausführen können:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

Stattdessen können Sie diesen Code in einem Snippet speichern und bei Bedarf mit wenigen Mausklicks ausführen. In den DevTools wird das Snippet in Ihrem Dateisystem gespeichert. Sehen Sie sich beispielsweise ein Snippet an, mit dem die jQuery-Bibliothek in eine Seite eingefügt wird.

Ein Snippet, mit dem die jQuery-Bibliothek in eine Seite eingefügt wird.

So führen Sie ein Snippet aus:

  • Öffnen Sie die Datei auf dem Tab Snippets und klicken Sie unten in der Aktionsleiste auf Ausführen Die Schaltfläche „Ausführen“..
  • Öffnen Sie das Befehlsmenü, löschen Sie das Zeichen >, geben Sie ! ein, geben Sie den Namen Ihres Snippet ein und drücken Sie die Eingabetaste.

Weitere Informationen finden Sie unter Code-Snippets von jeder Seite ausführen.

JavaScript debuggen

Statt console.log() zu verwenden, um die Fehler im JavaScript-Code zu ermitteln, sollten Sie stattdessen die Debugging-Tools von Chrome DevTools verwenden. Im Allgemeinen legen Sie einen Haltepunkt fest, also einen beabsichtigten Stopppunkt in Ihrem Code, und gehen dann Zeile für Zeile durch die Ausführung Ihres Codes.

An einem Haltepunkt anhalten

Während Sie den Code durcharbeiten, können Sie die Werte aller derzeit definierten Eigenschaften und Variablen ansehen und ändern, JavaScript in der Console ausführen und vieles mehr.

Unter Erste Schritte mit dem Debuggen von JavaScript finden Sie die Grundlagen des Debuggens in den DevTools.

Konzentrieren Sie sich nur auf Ihren Code

Mit den Chrome-Entwicklertools können Sie sich ganz auf den von Ihnen erstellten Code konzentrieren, da Rauschen von Frameworks und Build-Tools herausgefiltert werden, die Sie beim Erstellen von Webanwendungen verwenden.

Um Ihnen eine moderne Web-Debugging-Erfahrung zu bieten, führt die Entwicklertools folgende Schritte aus:

Wenn von den Frameworks unterstützt, zeigen der Aufrufstack im Debugger und die Stapelaufzeichnungen in der Console den vollständigen Verlauf der asynchronen Vorgänge an.

Weitere Informationen erhalten Sie unter:

Arbeitsbereich einrichten

Wenn Sie eine Datei im Bereich Quellen bearbeiten, gehen diese Änderungen beim Aktualisieren der Seite standardmäßig verloren. Mit Arbeitsbereichen können Sie die Änderungen, die Sie in den Entwicklertools vornehmen, in Ihrem Dateisystem speichern. Im Grunde können Sie DevTools als Code-Editor verwenden.

Weitere Informationen finden Sie unter Dateien mit Arbeitsbereichen bearbeiten.