Anzeigen der Ressourcendateien, aus denen eine Webseite besteht

  • Artikel

Sie können die Ressourcen, aus denen eine Webseite besteht, in mehreren Tools (oder Bereichen) in Microsoft Edge DevTools anzeigen, einschließlich:

  • Netzwerktool
  • Quellentool
  • Anwendungstool

Ressourcen sind die Dateien, aus denen eine Webseite besteht. Beispiele für Ressourcen sind:

  • CSS-Dateien
  • JavaScript-Dateien
  • HTML-Dateien
  • Bilddateien

Siehe auch:

Öffnen von Ressourcendateien über das Befehlsmenü

Wenn Sie den Namen der Ressourcendatei einer Webseite kennen, die Sie überprüfen möchten, bietet das Befehlsmenü in DevTools eine schnelle Möglichkeit, diese Ressource zu finden und zu öffnen.

  1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B. der Demo für Barrierefreiheitstests. (Die Quelldateien für diese Webseite befinden sich unter MicrosoftEdge/Demos > devtools-a11y-testing.)

  2. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS).

  3. Wenn DevTools den Fokus hat, drücken Sie STRG+P (Windows, Linux) oder BEFEHL+P (macOS). Oder klicken Sie in DevTools auf die Schaltfläche DevTools anpassen und steuern (Symbol anpassen), und wählen Sie dann Datei öffnen aus. Das Befehlsmenü wird geöffnet und zeigt die Liste Datei öffnen an:

    Das Befehlsmenü, in dem die Liste Datei öffnen angezeigt wird

  4. Wenn eine Eingabeaufforderung größer als (>) angezeigt wird, drücken Sie DIE RÜCKTASTE , um zur Eingabeaufforderung Datei öffnen zu gelangen.

  5. Beginnen Sie mit der Eingabe des Dateinamens, und drücken Sie dann die EINGABETASTE, wenn die richtige Datei im Feld autovervollständigen hervorgehoben ist, oder wählen Sie die Datei aus der Dropdownliste aus:

    Eingeben eines Teils eines Dateinamens in die Liste Datei öffnen des Befehlsmenüs

Durchsuchen von Ressourcendateien im Netzwerktool

Im Netzwerktool können Sie die Ressourcendateien überprüfen, aus denen die aktuelle Webseite besteht, z .html. B. die Bilddateien , .css, .jsund . Informationen zum Abrufen der Details zu einer bestimmten Ressource finden Sie unter Untersuchen der Details der Ressource unter Untersuchen der Netzwerkaktivität.

  1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B . zur Demo zur Untersuchung der Netzwerkaktivität. (Die Quelldateien für diese Webseite befinden sich unter MicrosoftEdge/Demos > network-tutorial.)

  2. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

  3. Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Netzwerk aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools (Symbol

  4. Stellen Sie sicher, dass die Schaltfläche Netzwerkprotokoll aufzeichnen oben links ausgewählt ist (rot).

  5. Aktualisieren Sie die Seite. Standardmäßig ist die Schaltfläche Alle Filter ausgewählt, sodass alle Ressourcendateien der Webseite im Netzwerktool aufgeführt sind, eine Zeile pro Ressourcendatei:

    Im Netzwerkprotokoll aufgelistete Ressourcendateien der Webseite, eine Ressourcendatei pro Zeile

  6. Wählen Sie eine Ressource aus, um sie anzuzeigen. Wählen Sie beispielsweise den network-tutorial Pfad aus, um anzuzeigen index.html:

    Überprüfen einer Ressource im Netzwerktool

Weitere Informationen zum Anzeigen der Netzwerkaktivität, die von den Seitenressourcen generiert wird, finden Sie unter Protokollieren der Netzwerkaktivität im Artikel Untersuchen der Netzwerkaktivität.

Durchsuchen von Ressourcendateien nach Dateityp durch Filtern im Netzwerktool

Wenn Sie im Netzwerktool die Liste der Ressourcendateien anzeigen, aus denen die aktuelle Webseite besteht, können Sie filtern, welche Ressourcentypen aufgelistet werden sollen, z. B. nur Anzeigen .css oder .js Dateien.

So zeigen Sie beispielsweise nur CSS-Dateien an:

  1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B . zur Demo zur Untersuchung der Netzwerkaktivität. (Die Quelldateien für diese Webseite befinden sich unter MicrosoftEdge/Demos > network-tutorial.)

  2. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

  3. Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Netzwerk aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools (Symbol

  4. Aktualisieren Sie die Seite. Standardmäßig ist die Schaltfläche Alle Filter ausgewählt, sodass alle Ressourcendateien der Webseite im Netzwerktool aufgeführt werden.

  5. Klicken Sie auf CSS , um zu filtern und nur CSS-Dateien anzuzeigen. Es wird nur die main.css Datei aufgeführt:

    Filtern, um nur CSS-Ressourcendateien im Netzwerkprotokoll aufzulisten

Weitere Informationen finden Sie unter Filtern nach Ressourcentyp in Untersuchen der Netzwerkaktivität.

Anzeigen von Ressourcendateien im Netzwerktool aus anderen Tools

Klicken Sie in verschiedenen Tools, die Ressourcendateien für die Webseite auflisten, mit der rechten Maustaste auf die Ressourcendatei, um eine Ressourcendatei im Netzwerktool zu überprüfen, auf die Ressourcendatei, und wählen Sie dann Im Netzwerkbereich anzeigen aus. Möglicherweise müssen Sie zuerst die Webseite aktualisieren, während das Netzwerktool geöffnet ist.

So wechseln Sie beispielsweise von der Ressourcenliste der Registerkarte Seite im Tool Quellen zum Netzwerktool :

  1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B . zur Demo zur Untersuchung der Netzwerkaktivität. (Die Quelldateien für diese Webseite befinden sich unter MicrosoftEdge/Demos > network-tutorial.)

  2. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

  3. Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Netzwerk aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools (Symbol weitere Tools).

  4. Drücken Sie STRG+R , um die Seite zu aktualisieren. Die empfangenen Ressourcendateien, aus denen die Webseite besteht, werden jetzt als Zeilen auf der Registerkarte Netzwerk hinzugefügt. Die Ordnerzeile network-tutorial/ stellt die HTML-Seite dar– in diesem Fall index.html.

  5. Klicken Sie in DevTools auf der Aktivitätsleiste auf die Registerkarte Quellen .

  6. Klicken Sie auf der Registerkarte Seite oben links mit der rechten Maustaste auf eine Ressourcendatei, und wählen Sie dann Im Netzwerkbereich anzeigen aus:

    Das Menüelement

    Wenn das Menüelement Im Netzwerkbereich anzeigen nicht aufgeführt ist, wechseln Sie zum Tool Netzwerk , stellen Sie sicher, dass die Schaltfläche Netzwerkprotokoll aufzeichnen oben links ausgewählt ist (rot), und aktualisieren Sie dann die Seite.

Durchsuchen von Ressourcendateien nach Ordnern auf der Registerkarte "Seite" des Tools "Quellen"

Sie können das Tool Quellen verwenden, um die Ressourcendateien der Webseite wie folgt nach Verzeichnis organisiert anzuzeigen:

  1. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

  2. Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Quellen aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools (Symbol weitere Tools).

  3. Wählen Sie im Bereich Navigator oben links die Registerkarte Seite aus.

  4. Ressourcendateien werden standardmäßig nach Ordnern gruppiert. Wenn die Ressourcen stattdessen alle alphabetisch nach Dateinamen aufgelistet sind, klicken Sie auf die Schaltfläche Weitere Optionen (Symbol Weitere Optionen) rechts neben der Registerkarte Seite , und wählen Sie dann Nach Ordner gruppieren aus:

    Die Nach Ordner gruppierten Ressourcendateien der Webseite auf der Registerkarte Seite des Tools

    Die Registerkarte Seite enthält verschiedene Knotentypen, darunter:

    Seitenelement Beschreibung
    top Die Standard Kontext zum Durchsuchen von Dokumenten, z. B. eine Browserregisterkarte, ein Browserfenster oder ein Frame. Siehe Browserkontext oder <iframe>: Das Inlineframe-Element.
    microsoftedge.github.io Die Domäne. Alle darunter geschachtelten Ressourcen stammen aus dieser Domäne. Die vollständige URL der buttons.js Datei lautet z. B https://microsoftedge.github.io/Demos/devtools-a11y-testing/buttons.js. .
    Demos/devtools-a11y-testing, css, photos Verzeichnisse.
    devtools-a11y-testing/ Das Standard HTML-Dokument.
    buttons.js Ein Skript zum Verarbeiten von Schaltflächendrücken auf der Seite.

  5. Wählen Sie eine Ressourcendatei aus, um sie im Editor des Tools Quellen anzuzeigen:

    Anzeigen einer Ressourcendatei im Editor des Quellentools

Durchsuchen von Ressourcendateien sortiert nach Dateinamen auf der Registerkarte Seite des Quellentools

Standardmäßig gruppiert die Registerkarte Seite im Tool Quellen Ressourcendateien nach Ordner. So zeigen Sie stattdessen alle Ressourcendateien für jede Domäne an, die in einer einzigen alphabetischen Liste gruppiert sind:

  1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B. der Demo für Barrierefreiheitstests. (Die Quelldateien für diese Webseite befinden sich unter MicrosoftEdge/Demos > devtools-a11y-testing.)

  2. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

  3. Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Quellen aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools (Das Symbol Weitere Tools).

  4. Wählen Sie im Bereich Navigator oben links die Registerkarte Seite aus.

  5. Klicken Sie auf Weitere Optionen (Symbol Weitere Optionen), und deaktivieren Sie dann die Option Nach Ordner gruppieren :

    Option

    Alle Ressourcendateien für jede Domäne (z. B . Top) werden in einer einzigen alphabetischen Liste gruppiert:

    Registerkarte

Durchsuchen von Ressourcendateien nach Dateityp in der Struktur "Frames" im Anwendungstool

Eine Möglichkeit zum Anzeigen von Webseitenressourcen, die nach Dateityp gruppiert sind, ist die Verwendung der Struktur Frames im Anwendungstool :

  1. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

  2. Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Anwendung aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools (Das Symbol Weitere Tools).

    Das Anwendungstool wird geöffnet und zeigt standardmäßig zuerst den Bereich Manifest an:

    Das Anwendungstool

  3. Scrollen Sie nach unten zum Bereich Frames , und erweitern Sie dann den Ordner, den Sie interessieren:

    Die Frames-Struktur im Anwendungstool

  4. Wählen Sie eine Ressource aus, um sie im Anwendungstool anzuzeigen:

    Anzeigen einer Ressource im Anwendungstool

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die originale Seite befindet sich hier und wurde von Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.