Quellenbereich – Übersicht

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

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

Übersicht

Im Bereich Quellen haben Sie folgende Möglichkeiten:

Quellenbereich öffnen

So öffnen Sie den Bereich „Quellen“:

  1. Öffnen Sie die Entwicklertools.
  2. Öffnen Sie das Befehlsmenü, indem Sie Folgendes drücken:
    • macOS: Befehlstaste + Umschalttaste + P
    • Windows, Linux, ChromeOS: Strg + Umschalttaste + P
  3. Geben Sie sources ein, wählen Sie Quellenbereich einblenden aus und drücken Sie die Eingabetaste.

Alternativ können Sie rechts oben das more_vert Weitere Optionen > Weitere Tools > Quellen auswählen.

Dateien ansehen

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

Der Tab „Seite“.

So ist der Tab Seite aufgebaut:

  • Die oberste Ebene, z. B. top im Screenshot oben, stellt einen HTML-Frame dar. top wird auf jeder Seite angezeigt, die Sie besuchen. top steht für den Hauptdokumentrahmen.
  • Die zweite Ebene, z. B. developers.google.com im Screenshot oben, stellt einen Ursprung dar.
  • Die dritte, vierte usw. Ebene stellt Verzeichnisse und Ressourcen dar, die von diesem Ursprung geladen wurden. Im Screenshot oben ist 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 sich deren Inhalt auf dem Tab Editor anzusehen. Sie können sich beliebige Dateitypen ansehen. Bei Bildern sehen Sie eine Vorschau.

Eine Datei auf dem Tab „Editor“ ansehen

CSS und JavaScript bearbeiten

Klicken Sie auf den Tab Editor, um CSS und JavaScript zu bearbeiten. DevTools aktualisiert die Seite, um den neuen Code auszuführen.

Der Editor kann Ihnen auch beim Debuggen helfen. Beispielsweise werden Syntaxfehler und andere Probleme wie fehlgeschlagene CSS-Anweisungen vom Typ @import und url() sowie HTML-Attribute vom Typ href mit ungültigen URLs unterstrichen und es werden Inline-Fehler-Tooltips angezeigt.

Eine Inline-Kurzinfo mit 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 Befehlstaste + S (Mac) oder Strg + S (Windows, Linux). In DevTools wird ein Skript nicht noch einmal ausgeführt. Die einzigen JavaScript-Änderungen, die wirksam werden, sind also diejenigen, die Sie in 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 die Entwicklertools das gesamte Skript nach der Änderung noch einmal ausgeführt haben, wäre der Text A in der Konsole protokolliert worden.

DevTools löscht Ihre CSS- und JavaScript-Änderungen, wenn Sie die Seite neu laden. Informationen zum Einrichten eines Arbeitsbereichs

Snippets erstellen, speichern und ausführen

Snippets sind Skripts, die Sie auf jeder Seite ausführen können. Stellen Sie sich vor, Sie geben den folgenden Code wiederholt in die Konsole ein, um die jQuery-Bibliothek in eine Seite einzufügen, damit Sie jQuery-Befehle über die Konsole 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 ihn jederzeit mit wenigen Klicks ausführen. DevTools speichert das Snippet in Ihrem Dateisystem. 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 Snippets ein und drücken Sie die Eingabetaste.

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

JavaScript debuggen

Anstatt console.log() zu verwenden, um zu ermitteln, wo Ihr JavaScript fehlerhaft ist, sollten Sie stattdessen die Debugging-Tools der Chrome-Entwicklertools verwenden. Die allgemeine Idee besteht darin, einen Haltepunkt festzulegen, der eine beabsichtigte Unterbrechung in Ihrem Code darstellt, und dann die Ausführung Ihres Codes Zeile für Zeile durchzugehen.

An einem Haltepunkt pausieren.

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

Erste Schritte beim Debuggen von JavaScript

Konzentrieren Sie sich nur auf Ihren Code

Mit den Chrome-Entwicklertools können Sie sich nur auf den von Ihnen geschriebenen Code konzentrieren, indem Sie die von Frameworks und Build-Tools generierten Störungen herausfiltern, die Sie beim Erstellen von Webanwendungen verwenden.

Um Ihnen eine moderne Web-Debugging-Umgebung zu bieten, führen die Entwicklertools Folgendes aus:

Wenn das von Frameworks unterstützt wird, wird außerdem im Aufrufstack im Debugger und in Stapelüberwachungen in der Konsole der vollständige Verlauf asynchroner Vorgänge angezeigt.

Weitere Informationen erhalten Sie unter:

Arbeitsbereich einrichten

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

Weitere Informationen