Seitenressourcen ansehen

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

In diesem Leitfaden wird davon ausgegangen, dass Sie mit den Grundlagen der Webentwicklung und den Chrome DevTools vertraut sind.

Ressourcen öffnen

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

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

    Dialogfeld „Datei öffnen“

    Abbildung 1. Das 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 hervorgehoben wird.

    Dateinamen in das Dialogfeld „Datei öffnen“ eingeben

    Abbildung 2. Dateinamen in das Dialogfeld Datei öffnen eingeben

Ressourcen im Bereich „Netzwerk“ öffnen

Weitere Informationen finden Sie unter Details einer Ressource prüfen.

Ressourcen im Netzwerkbereich prüfen

Abbildung 3. Ressourcen im Bereich Netzwerk prüfen

Ressourcen aus anderen Bereichen im Bereich „Netzwerk“ anzeigen

Im Abschnitt Ressourcen ansehen unten wird beschrieben, wie Sie Ressourcen aus verschiedenen Bereichen der DevTools-Benutzeroberfläche aufrufen. Wenn Sie eine Ressource im Bereich Netzwerk prüfen möchten, klicken Sie mit der rechten Maustaste auf die Ressource und wählen Sie Im Bereich „Netzwerk“ anzeigen aus.

Im Netzwerkbereich anzeigen

Abbildung 4. Die Option Im Netzwerkbereich anzeigen

Ressourcen ansehen

Ressourcen im Bereich „Netzwerk“ ansehen

Weitere Informationen finden Sie unter Netzwerkaktivitäten protokollieren.

Seitenressourcen im Netzwerkprotokoll

Abbildung 5. Seitenressourcen im Netzwerkprotokoll

Nach Verzeichnis suchen

So rufen Sie die Ressourcen einer Seite nach Verzeichnis 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 Seitenbereich

    Abbildung 6. Der Bereich Seite

    Hier eine Aufschlüsselung der nicht offensichtlichen Elemente in Abbildung 6:

    • top ist der Browserkontext des Hauptdokuments.
    • airhorner.com ist eine Domain. Alle untergeordneten Ressourcen stammen aus dieser Domain. Die vollständige URL der Datei comlink.global.js lautet beispielsweise 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 das HTML-Hauptdokument eingebettet ist.
    • sw.js ist ein Ausführungskontext für Service Worker.
  3. Klicken Sie auf eine Ressource, um sie im Editor aufzurufen.

    Dateien im Editor ansehen

    Abbildung 7. Dateien im Editor ansehen

Nach Dateiname suchen

Im Bereich Seite werden Ressourcen standardmäßig nach Verzeichnis gruppiert. So deaktivieren Sie diese Gruppierung und rufen die Ressourcen jeder Domain als Liste auf:

  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 der einzelnen Dateitypen sind die Ressourcen alphabetisch angeordnet.

    Der Seitenbereich, nachdem die Option „Nach Ordner gruppieren“ deaktiviert wurde

    Abbildung 9. Der Bereich Seite, nachdem Nach Ordner gruppieren deaktiviert wurde

Nach Dateityp suchen

So gruppieren Sie Ressourcen nach Dateityp:

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

    Der Bereich „Anwendung“

    Abbildung 10. Bereich Anwendung

  2. Scrollen Sie nach unten zum Bereich Frames.

    Der Bereich „Frames“

    Abbildung 11. Bereich Frames

  3. Maximieren Sie die Bereiche, die Sie interessieren.

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

    Ressourcen im Bereich „Anwendung“ ansehen

    Abbildung 11. Ressourcen im Bereich Anwendung ansehen

Dateien im Bereich „Netzwerk“ nach Typ durchsuchen

Weitere Informationen finden Sie unter Nach Ressourcentyp filtern.

Im Netzwerkprotokoll nach Preisvergleichsportalen filtern

Abbildung 12. Im Netzwerkprotokoll nach Preisvergleichsportalen filtern