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:

Öffnen Sie den Bereich „Quellen“.

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 + Umschalttaste + 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 more_vert Weitere Optionen > Weitere Tools > Quellen klicken.

Dateien ansehen

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

Den Tab „Seite“.

So ist der Tab Seite aufgebaut:

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

Dateien 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.

Der Editor hilft Ihnen auch bei der Fehlerbehebung. So werden beispielsweise Syntaxfehler und andere Probleme unterstrichen und es werden Inline-Fehler-Tooltips neben ihnen angezeigt, z. B. fehlgeschlagene CSS-@import- und url()-Anweisungen sowie HTML-href-Attribute mit ungültigen URLs.

Eine Inline-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 Befehlstaste + S (Mac) oder Strg + S (Windows, Linux). In den DevTools wird ein Script nicht noch einmal ausgeführt. Daher werden nur 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. Weitere Informationen zum Speichern der Änderungen an Ihrem Dateisystem finden Sie unter Arbeitsbereich einrichten.

Snippets erstellen, speichern und ausführen

Snippets sind Scripts, 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 ihn jederzeit mit wenigen Klicks ausführen. In den DevTools wird das Snippet in Ihrem Dateisystem gespeichert. Sehen wir uns 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 von jeder Seite aus ausführen.

JavaScript debuggen

Anstatt mit console.log() zu ermitteln, wo in Ihrem JavaScript ein Fehler auftritt, sollten Sie stattdessen die Chrome-Entwicklertools zur Fehlerbehebung verwenden. Im Allgemeinen legen Sie einen Haltepunkt fest, also einen beabsichtigten Endpunkt in Ihrem Code, und führen dann die Ausführung Ihres Codes Zeile für Zeile durch.

Pausieren an einem Haltepunkt

Während Sie den Code durchgehen, können Sie unter anderem die Werte aller derzeit definierten Properties und Variablen aufrufen und ändern sowie JavaScript in der Console ausführen.

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 nur auf den von Ihnen erstellten Code konzentrieren, da unnötige Informationen von Frameworks und Build-Tools herausgefiltert werden, die Sie beim Erstellen von Webanwendungen verwenden.

Die Entwicklertools bieten Ihnen moderne Funktionen für die Web-Fehlerbehebung:

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 die Änderungen standardmäßig verloren, wenn Sie die Seite neu laden. 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 Workspaces bearbeiten.