Seitenressourcen ansehen

In diesem Leitfaden erfahren Sie, wie Sie mit den Chrome-Entwicklertools die Ressourcen einer Webseite aufrufen. Ressourcen sind die Dateien, die eine Seite benötigt, um korrekt angezeigt zu werden. Beispiele für Ressourcen sind CSS-, JavaScript- und HTML-Dateien sowie Bilder.

In diesem Leitfaden wird davon ausgegangen, dass du mit den Grundlagen der Webentwicklung und den Chrome-Entwicklertools vertraut bist.

Ressourcen öffnen

Wenn Sie den Namen der Ressource kennen, die Sie überprüfen möchten, können Sie die Ressource über das Befehlsmenü schnell öffnen.

  1. Drücken Sie Strg + P oder die Befehlstaste + P (Mac). Das Dialogfeld Datei öffnen wird geöffnet.

    Dialogfeld „Datei öffnen“

    Abbildung 1. Dialogfeld Datei öffnen

  2. Wählen Sie die Datei aus dem Drop-down-Menü aus oder geben Sie den Dateinamen ein und drücken Sie die Eingabetaste, sobald die richtige Datei im Feld für die automatische Vervollständigung markiert ist.

    Eingabe eines Dateinamens in das Dialogfeld „Datei öffnen“

    Abbildung 2. Geben Sie einen Dateinamen in das Dialogfeld Datei öffnen ein.

Ressourcen im Netzwerkbereich öffnen

Siehe Details einer Ressource prüfen.

Ressource im Bereich „Netzwerk“ prüfen

Abbildung 3. Ressource im Bereich Netzwerk prüfen

Ressourcen im Netzwerkbereich von anderen Bereichen aus anzeigen

Im folgenden Abschnitt Ressourcen durchsuchen erfahren Sie, wie Sie Ressourcen aus verschiedenen Bereichen der Entwicklertools-UI aufrufen. Wenn Sie eine Ressource im Bereich Netzwerk überprüfen möchten, klicken Sie mit der rechten Maustaste auf die Ressource und wählen Sie Im Netzwerkbereich anzeigen aus.

Im Netzwerkbereich anzeigen

Abbildung 4. Die Option Im Netzwerkbereich anzeigen

Ressourcen ansehen

Ressourcen im Netzwerkbereich durchsuchen

Siehe Netzwerkaktivität protokollieren.

Seitenressourcen im Netzwerkprotokoll

Abbildung 5. Seitenressourcen im Netzwerkprotokoll

Nach Verzeichnis suchen

So rufen Sie die Ressourcen einer Seite nach Verzeichnis geordnet auf:

  1. Klicken Sie auf den Tab Quellen, um den Bereich Quellen zu öffnen.
  2. Klicken Sie auf den Tab Seite, um die Ressourcen der Seite aufzurufen. Der Bereich Seite wird geöffnet.

    Der Bereich „Seite“

    Abbildung 6. Der Bereich Seite

    Hier eine Übersicht der nicht offensichtlichen Elemente in Abbildung 6:

    • top ist der Browserkontext des Hauptdokuments.
    • airhorner.com steht für eine Domain. Alle darunter verschachtelten Ressourcen stammen aus dieser Domain. Die vollständige URL der Datei comlink.global.js lautet wahrscheinlich https://airhorner.com/scripts/comlink.global.js.
    • scripts ist ein Verzeichnis.
    • (Index) ist das Haupt-HTML-Dokument.
    • iu3 ist ein weiterer Browserkontext. Dieser Kontext wurde wahrscheinlich durch ein <iframe>-Element erstellt, das in den HTML-Code des Hauptdokuments eingebettet ist.
    • sw.js ist ein Dienst-Worker-Ausführungskontext.
  3. Klicken Sie auf eine Ressource, um sie im Editor anzusehen.

    Datei im Editor ansehen

    Abbildung 7. Datei im Editor ansehen

Nach Dateiname suchen

Standardmäßig werden im Bereich Seite Ressourcen nach Verzeichnis gruppiert. So deaktivieren Sie diese Gruppierung und zeigen die Ressourcen jeder Domain als einfache Liste an:

  1. Öffnen Sie den Bereich Seite. Weitere Informationen finden Sie unter Nach Verzeichnis suchen.
  2. Klicken Sie auf Weitere Optionen Weitere Optionen und deaktivieren Sie Nach Ordner gruppieren.

    Nach Ordner gruppieren

    Abbildung 8. Die Option Nach Ordner gruppieren

    Ressourcen sind nach Dateityp organisiert. Innerhalb jedes Dateityps sind die Ressourcen alphabetisch geordnet.

    Der Seitenbereich nach dem Deaktivieren von „Gruppieren nach“

    Abbildung 9. Der Bereich Seite nach dem Deaktivieren von Nach Ordner gruppieren

Nach Dateityp durchsuchen

So gruppieren Sie Ressourcen anhand ihres Dateityps:

  1. Klicken Sie auf den Tab Anwendung. Das Steuerfeld Anwendung wird geöffnet. Standardmäßig wird der Bereich Manifest normalerweise zuerst geöffnet.

    Das App-Steuerfeld

    Abbildung 10. Der Bereich Anwendung

  2. Scrollen Sie nach unten zum Bereich Frames.

    Der Bereich „Frames“

    Abbildung 11. Im Bereich Frames

  3. Maximieren Sie die Abschnitte, die Sie interessieren.

  4. Klicken Sie auf eine Ressource, um sie anzusehen.

    Ressource im Anwendungsbereich ansehen

    Abbildung 11. Ressource im Bereich Anwendung ansehen

Dateien im Bereich „Netzwerk“ nach Typ durchsuchen

Siehe Nach Ressourcentyp filtern.

Filtern nach CSS im Netzwerkprotokoll

Abbildung 12. Filtern nach CSS im Netzwerkprotokoll