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.
Drücken Sie Strg + P oder die Befehlstaste + P (Mac). Das Dialogfeld Datei öffnen wird geöffnet.
Abbildung 1. 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 markiert ist.
Abbildung 2. Geben Sie einen Dateinamen in das Dialogfeld Datei öffnen ein.
Ressourcen im Netzwerkbereich öffnen
Siehe Details einer Ressource 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.
Abbildung 4. Die Option Im Netzwerkbereich anzeigen
Ressourcen ansehen
Ressourcen im Netzwerkbereich durchsuchen
Siehe Netzwerkaktivität protokollieren.
Abbildung 5. Seitenressourcen im Netzwerkprotokoll
Nach Verzeichnis suchen
So rufen Sie die Ressourcen einer Seite nach Verzeichnis geordnet 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 Ü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.
Klicken Sie auf eine Ressource, um sie im Editor anzusehen.
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:
- Ö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 geordnet.
Abbildung 9. Der Bereich Seite nach dem Deaktivieren von Nach Ordner gruppieren
Nach Dateityp durchsuchen
So gruppieren Sie Ressourcen anhand ihres Dateityps:
Klicken Sie auf den Tab Anwendung. Das Steuerfeld Anwendung wird geöffnet. Standardmäßig wird der Bereich Manifest normalerweise zuerst geöffnet.
Abbildung 10. Der Bereich Anwendung
Scrollen Sie nach unten zum Bereich Frames.
Abbildung 11. Im Bereich Frames
Maximieren Sie die Abschnitte, die Sie interessieren.
Klicken Sie auf eine Ressource, um sie anzusehen.
Abbildung 11. Ressource im Bereich Anwendung ansehen
Dateien im Bereich „Netzwerk“ nach Typ durchsuchen
Siehe Nach Ressourcentyp filtern.
Abbildung 12. Filtern nach CSS im Netzwerkprotokoll