Quellenbereich – Übersicht

Kayce Basques

Sofia Emelianova

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

• Dateien ansehen
• CSS- und JavaScript-Code bearbeiten
• Erstellen und speichern Sie JavaScript-Snippets, die Sie auf jeder Seite ausführen können. Snippets ähneln Lesezeichen.
• JavaScript-Fehler beheben
• Richten Sie einen Arbeitsbereich ein, damit Änderungen, die Sie in den Entwicklertools vornehmen, im Code Ihres Dateisystems gespeichert werden.

Dateien ansehen

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

Struktur des Bereichs Seite:

• Die oberste Ebene, wie z. B. top im Screenshot oben, repräsentiert einen HTML-Frame. Sie finden top auf jeder Seite, die Sie besuchen. top steht für den Frame des Hauptdokuments.
• Die zweite Ebene, wie z. B. developers.google.com im Screenshot oben, repräsentiert einen Ursprung.
• Die dritte, vierte Ebene usw. stellt Verzeichnisse und Ressourcen dar, die aus 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 im Bereich Seite auf eine Datei, um ihren Inhalt im Bereich Editor aufzurufen. Sie können jeden Dateityp ansehen. Bei Bildern sehen Sie eine Vorschau des Bildes.

CSS und JavaScript bearbeiten

Verwenden Sie den Editor, um CSS- und JavaScript-Code zu bearbeiten. Die Entwicklertools aktualisieren die Seite, um deinen neuen Code auszuführen.

Der Editor unterstützt Sie auch beim Debuggen. Beispielsweise werden dort Kurzinfos zu Inline-Fehlern unterstrichen und neben Syntaxfehlern und anderen Problemen angezeigt, z. B. fehlerhafte @import- und url()-Anweisungen im CSS-Code sowie HTML-href-Attribute mit ungültigen URLs.

Wenn Sie den background-color eines Elements bearbeiten, werden die Änderungen sofort übernommen.

Drücken Sie Befehlstaste + S (Mac) oder Strg + S (Windows, Linux), damit JavaScript-Änderungen wirksam werden. Die Entwicklertools führen ein Skript nicht noch einmal aus. Daher werden nur die JavaScript-Änderungen wirksam, die Sie innerhalb von Funktionen vornehmen. Beachten Sie beispielsweise, dass console.log('A') im Gegensatz zu console.log('B') nicht ausgeführt wird.

Wenn die Entwicklertools das gesamte Skript nach der Änderung noch einmal ausgeführt hätten, wäre der Text A in der Console protokolliert worden.

Die Entwicklertools löschen Ihre CSS- und JavaScript-Änderungen, wenn Sie die Seite aktualisieren. Unter Arbeitsbereich einrichten erfahren Sie, 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. Angenommen, Sie geben den folgenden Code wiederholt in der Console ein, um die jQuery-Bibliothek in eine Seite einzufügen und jQuery-Befehle über die Console auszufü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 können Sie diesen Code in einem Snippet speichern und ihn mit wenigen Klicks bei Bedarf ausführen. Die Entwicklertools speichern das Snippet in Ihrem Dateisystem. Sehen Sie sich beispielsweise ein Snippet an, mit dem die jQuery-Bibliothek in eine Seite eingefügt wird.

So führen Sie ein Snippet aus:

• Öffnen Sie die Datei im Bereich Snippets und klicken Sie unten in der Aktionsleiste auf Ausführen .
• Öffnen Sie das Befehlstaste, 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 auf beliebigen Seiten ausführen.

JavaScript-Fehler beheben

Anstatt console.log() zu verwenden, um festzustellen, wo JavaScript nicht funktioniert, können Sie stattdessen die Debugging-Tools der Chrome-Entwicklertools verwenden. Im Allgemeinen sollten Sie einen Haltepunkt festlegen, der eine absichtliche Stoppstelle in Ihrem Code ist, und dann die Ausführung des Codes Zeile für Zeile durchgehen.

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

Informationen zu den Grundlagen der Fehlerbehebung in den Entwicklertools finden Sie unter Erste Schritte beim Debugging von JavaScript.

Konzentrieren Sie sich nur auf Ihren Code

Mit den Chrome-Entwicklertools können Sie sich ganz auf den von Ihnen erstellten Code konzentrieren, indem Sie das durch Frameworks und Build-Tools erzeugte Rauschen herausfiltern, das Sie für die Erstellung von Webanwendungen nutzen.

Um Ihnen die moderne Fehlerbehebung im Web zu ermöglichen, werden in den Entwicklertools folgende Schritte ausgeführt:

• Trennt erstellten und bereitgestellten Code. Damit Sie den Code schneller finden, trennt der Bereich Quellen den von Ihnen erstellten Code vom gebündelten und reduzierten Code.
• Bekannter Drittanbietercode wird ignoriert:
  • Diese Quellen werden im Bereich Quellen im Dateibaum im Bereich Seite ausgeblendet.
  • Die Console blendet solche Frames in Stacktraces aus.
  • Über das Menü Datei öffnen werden solche Dateien in den Suchergebnissen ausgeblendet.

Sofern dies von Frameworks unterstützt wird, zeigen der Aufrufstack im Debugger und die Stacktraces in der Console außerdem den vollständigen Verlauf der asynchronen Vorgänge an.

Weitere Informationen erhalten Sie unter:

• Modernes Web-Debugging mit den Chrome-Entwicklertools
• Fallstudie: Better Angular Debugging with Entwicklertools

Arbeitsbereich einrichten

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

Weitere Informationen finden Sie unter Dateien mit Arbeitsbereichen bearbeiten.