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.
Drücken Sie Strg + P oder Befehlstaste + P (Mac). Das Dialogfeld Datei öffnen wird geöffnet.
Abbildung 1. Das Dialogfeld Datei öffnen
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.
Abbildung 2. Dateinamen in das Dialogfeld Datei öffnen eingeben
Ressourcen im Bereich „Netzwerk“ öffnen
Weitere Informationen finden Sie unter Details einer Ressource 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.
Abbildung 4. Die Option Im Netzwerkbereich anzeigen
Ressourcen ansehen
Ressourcen im Bereich „Netzwerk“ ansehen
Weitere Informationen finden Sie unter Netzwerkaktivitäten protokollieren.
Abbildung 5. Seitenressourcen im Netzwerkprotokoll
Nach Verzeichnis suchen
So rufen Sie die Ressourcen einer Seite nach Verzeichnis auf:
- Klicken Sie auf den Tab Quellen, um den Bereich Quellen zu öffnen.
Klicken Sie auf den Tab Seite, um die Ressourcen der Seite aufzurufen. Der Bereich Seite wird geöffnet.
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.
Klicken Sie auf eine Ressource, um sie im Editor aufzurufen.
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:
- Öffnen Sie den Bereich Seite. Weitere Informationen finden Sie unter Nach Verzeichnis suchen.
Klicken Sie auf Weitere Optionen
und deaktivieren Sie Nach Ordner gruppieren.
Abbildung 8. Die Option Nach Ordner gruppieren
Ressourcen sind nach Dateityp organisiert. Innerhalb der einzelnen Dateitypen sind die Ressourcen alphabetisch angeordnet.
Abbildung 9. Der Bereich Seite, nachdem Nach Ordner gruppieren deaktiviert wurde
Nach Dateityp suchen
So gruppieren Sie Ressourcen nach Dateityp:
Klicken Sie auf den Tab Anwendung. Der Bereich Anwendung wird geöffnet. Standardmäßig wird zuerst der Bereich Manifest geöffnet.
Abbildung 10. Bereich Anwendung
Scrollen Sie nach unten zum Bereich Frames.
Abbildung 11. Bereich Frames
Maximieren Sie die Bereiche, die Sie interessieren.
Klicken Sie auf eine Ressource, um sie aufzurufen.
Abbildung 11. Ressourcen im Bereich Anwendung ansehen
Dateien im Bereich „Netzwerk“ nach Typ durchsuchen
Weitere Informationen finden Sie unter Nach Ressourcentyp filtern.
Abbildung 12. Im Netzwerkprotokoll nach Preisvergleichsportalen filtern