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 Sie mit den Grundlagen der Webentwicklung und der Chrome-Entwicklertools vertraut sind.
Ressourcen öffnen
Wenn Sie den Namen der Ressource kennen, die Sie prüfen möchten, können Sie die Ressource schnell über das Befehlsmenü öffnen.
Drücken Sie Strg + P oder die Befehlstaste + P (Mac). Das Dialogfeld Open File (Datei öffnen) wird geöffnet.
Abbildung 1. Das Dialogfeld Datei öffnen
Wählen Sie die Datei aus dem Drop-down-Menü aus oder beginnen Sie mit der Eingabe des Dateinamens und drücken Sie die Eingabetaste, sobald die richtige Datei im Feld für die automatische Vervollständigung markiert wurde.
Abbildung 2. Dateinamen in das Dialogfeld Datei öffnen eingeben
Ressourcen im Bereich „Netzwerk“ öffnen
Siehe Details einer Ressource prüfen.
Abbildung 3. Eine Ressource im Bereich Netzwerk prüfen
Ressourcen im Steuerfeld „Netzwerk“ in anderen Bereichen einblenden
Im folgenden Abschnitt Ressourcen ansehen erfahren Sie, wie Sie Ressourcen aus verschiedenen Bereichen der Entwicklertools-UI aufrufen können. Wenn Sie eine Ressource im Bereich Netzwerk untersuchen möchten, klicken Sie mit der rechten Maustaste auf die Ressource und wählen Sie Im Netzwerkbereich anzeigen aus.
Abbildung 4. Die Option Im Netzwerkbereich anzeigen
Ressourcen ansehen
Ressourcen im Bereich „Netzwerk“ ansehen
Siehe Netzwerkaktivität protokollieren.
Abbildung 5. Seitenressourcen im Netzwerkprotokoll
Nach Verzeichnis suchen
So rufen Sie die Ressourcen einer Seite nach Verzeichnis sortiert 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. Im Bereich Seite
Aufschlüsselung der nicht offensichtlichen Elemente in Abbildung 6:
- top ist der Browserkontext des Hauptdokuments.
- airhorner.com steht für eine Domain. Alle untergeordneten Ressourcen stammen aus dieser Domain.
Beispiel: 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 Service Worker-Ausführungskontext.
Klicken Sie auf eine Ressource, um sie im Editor anzusehen.
Abbildung 7. Datei im Editor aufrufen
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:
- Ö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 jedes Dateityps sind die Ressourcen alphabetisch organisiert.
Abbildung 9. Der Bereich Seite nach der Deaktivierung von Nach Ordner gruppieren
Nach Dateityp suchen
So gruppieren Sie Ressourcen anhand ihres Dateityps:
Klicken Sie auf den Tab Anwendung. Der Bereich Anwendung wird geöffnet. Standardmäßig wird der Bereich Manifest in der Regel zuerst geöffnet.
Abbildung 10. Das Steuerfeld Anwendung
Scrollen Sie nach unten zum Bereich Frames.
Abbildung 11. Im Bereich Frames
Maximieren Sie die Bereiche, die Sie interessieren.
Klicken Sie auf eine Ressource, um sie anzusehen.
Abbildung 11. Ressource im Bereich Anwendung ansehen
Dateien im Steuerfeld „Netzwerk“ nach Typ suchen
Siehe Nach Ressourcentyp filtern.
Abbildung 12. Nach CSS im Netzwerkprotokoll filtern