Quellenbereich – Übersicht

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Im Bereich Quellen der Chrome-Entwicklertools können Sie Folgendes tun:

Dateien ansehen

Im Bereich Seite können Sie sich alle Ressourcen ansehen, die auf der Seite geladen wurden.

Im Bereich „Seite“

So ist der Bereich Seite organisiert:

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

Klicken Sie im Bereich Seite auf eine Datei, um ihren Inhalt unter Editor zu sehen. Sie können alle Arten von der Datei. Bei Bildern sehen Sie eine Vorschau des Bildes.

Eine Datei im Editor-Bereich ansehen.

CSS und JavaScript bearbeiten

Im Bereich Editor können Sie CSS und JavaScript bearbeiten. Die Seite wird in den Entwicklertools aktualisiert, damit der neue Code ausgeführt wird.

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

Eine Kurzinfo zu einem Syntaxfehler.

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

CSS im Editorbereich bearbeiten

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

Bearbeiten von JavaScript im Editor-Bereich

Wenn in den Entwicklertools nach der Änderung das gesamte Skript noch einmal ausgeführt wurde, wurde der Text A im Konsole:

In den Entwicklertools werden Ihre CSS- und JavaScript-Änderungen gelöscht, wenn Sie die Seite neu laden. Weitere Informationen finden Sie unter Einrichten eines Workspace, um zu erfahren, wie Sie die Änderungen in Ihrem Dateisystem speichern.

Snippets erstellen, speichern und ausführen

Snippets sind Skripts, die auf jeder Seite ausgeführt werden können. Stellen Sie sich vor, Sie geben den Parameter Code in der Console, um die jQuery-Bibliothek in eine Seite einzufügen, damit Sie kann jQuery-Befehle über die Console ausführen:

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 kannst du diesen Code in einem Snippet speichern und ihn jederzeit mit nur wenigen Mausklicks ausführen die Sie brauchen. Die Entwicklertools speichern das Snippet in Ihrem Dateisystem. Untersuchen Sie beispielsweise ein Snippet die die jQuery-Bibliothek in eine Seite einfügt.

Ein Snippet, das die jQuery-Bibliothek in eine Seite einfügt.

So führen Sie ein Snippet aus:

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

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

JavaScript-Fehlersuche

Statt console.log() zu verwenden, um die Fehler im JavaScript-Code zu ermitteln, sollten Sie die Methode stattdessen die Debugging-Tools in den Chrome-Entwicklertools. Grundsätzlich wird ein Breakpoint gesetzt. Dabei handelt es sich Ihren Code absichtlich anhalten und dann die Ausführung des Codes Schritt für Schritt durchgehen. .

An einem Haltepunkt pausieren

Bei der Ausführung des Codes können Sie die Werte aller derzeit definierten und Variablen, JavaScript in der Console ausführen und vieles mehr.

Weitere Informationen zu den Grundlagen der Fehlerbehebung in den Entwicklertools finden Sie unter Erste Schritte mit der JavaScript-Fehlerbehebung.

Fokus 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 das moderne Web-Debugging zu bieten, führt die Entwicklertools folgende Schritte aus:

Darüber hinaus zeigen der Aufrufstack im Debugger und die Stacktraces in der Konsole den vollständigen Verlauf der asynchronen Vorgänge an, sofern diese von Frameworks unterstützt werden.

Weitere Informationen erhalten Sie unter:

Arbeitsbereich einrichten

Wenn Sie eine Datei im Bereich Quellen bearbeiten, gehen diese Änderungen beim Aktualisieren standardmäßig verloren. auf der Seite. Mit Arbeitsbereichen kannst du die in den Entwicklertools vorgenommenen Änderungen in deiner Datei speichern System. Im Wesentlichen kannst du so die Entwicklertools als Code-Editor verwenden.

Weitere Informationen finden Sie unter Dateien mit Arbeitsbereichen bearbeiten.