Anwendungsbereich – Übersicht

Dale St. Marthe
Dale St. Marthe
LinkedIn

Im Bereich Anwendung können Sie viele Aspekte Ihrer Webanwendung untersuchen, ändern und debuggen, einschließlich Manifest, Service Worker, Speicher und Cache-Daten.

Überblick

Der Bereich Anwendung ist in vier Abschnitte mit Untermenüs unterteilt. Es gibt folgende Abschnitte und Untermenüs:

Anwendung: Enthält übergreifende Informationen zur App, einschließlich Manifest, Service Worker und Speicher.

  • Auf dem Tab Manifest werden Informationen aus manifest.json nutzerfreundlich präsentiert. Gegebenenfalls werden im entsprechenden Bereich auch Fehler und Warnungen angezeigt.
  • Auf dem Tab Service Worker können Sie Service Worker untersuchen und Fehler beheben, indem Sie Push-Ereignisse emulieren, einen Dienst aktualisieren usw.
  • Der Tab Speicher enthält ein Kreisdiagramm, das die Verteilung des von Cache-Speicherung, IndexedDB und Service Workern verwendeten Arbeitsspeichers zeigt. Sie können auch Websitedaten löschen und ein benutzerdefiniertes Speicherkontingent simulieren.

Speicher: Hier können Sie die verschiedenen Speichermethoden ansehen und bearbeiten, die von einer Web-App verwendet werden.

  • Mit den Listen Lokaler Speicher und Sitzungsspeicher können Sie einen Ursprung auswählen und die Schlüssel/Wert-Paare der zugehörigen Speichermethoden bearbeiten.
  • Die Liste IndexedDB enthält Datenbanken und ermöglicht es Ihnen, Objektspeicher über den Browser zu prüfen.
  • In der Liste Cookies können Sie einen Ursprung auswählen und die Schlüssel/Wert-Paare bearbeiten.
  • Mit Private State Tokens und Interessengruppen können Sie die entsprechenden Tokens und Gruppen prüfen, sofern vorhanden.
  • In der Liste Freigegebener Speicher können Sie einen Ursprung auswählen und zugehörige Schlüssel/Wert-Paare untersuchen und bearbeiten.
  • Die Liste Cache-Speicher enthält verfügbare Caches und ermöglicht es Ihnen, die zugehörigen Ressourcen zu untersuchen, zu filtern und zu löschen.

Hintergrunddienste: Hintergrunddienste prüfen, testen und debuggen.

  • Auf dem Tab Back-Forward-Cache können Sie den Back-Forward-Cache im Browser testen. Außerdem werden Probleme gemeldet, die das Back-Forward-Caching möglicherweise verhindern.
  • Auf dem Tab Hintergrundabruf können Sie bis zu drei Tage lang Aktivitäten der Background Fetch API aufzeichnen.
  • Auf dem Tab Hintergrundsynchronisierung können Sie Aktivitäten der Background Sync API bis zu drei Tage lang aufzeichnen.
  • Auf dem Tab Eindämmung von Bounce-Tracking können Sie den Status von Websites ermitteln und löschen, die mithilfe des Bounce-Tracking-Verfahrens websiteübergreifendes Tracking durchführen.
  • Auf dem Tab Benachrichtigungen können Sie Push-Nachrichten bis zu drei Tage lang aufzeichnen.
  • Auf dem Tab Zahlungs-Handler können Sie Payment Handler-Ereignisse bis zu drei Tage lang aufzeichnen.
  • Auf dem Tab Regelmäßige Hintergrundsynchronisierung können Sie Schlüsselereignisse für bis zu drei Tage im Lebenszyklus der regelmäßigen Hintergrundsynchronisierung aufzeichnen, z. B. die Registrierung für die Synchronisierung, die Durchführung einer Hintergrundsynchronisierung und die Aufhebung der Registrierung.
  • Auf dem Tab Spekulative Ladevorgänge können Sie Fehler in spekulativen Ladevorgängen beheben. Es werden der spekulative Status, Regelsätze und spekulative Ladeversuche angezeigt.
  • Auf dem Tab Push-Nachrichten können Sie Push-Nachrichten bis zu drei Tage lang aufzeichnen und protokollieren.
  • Über den Tab Reporting API wird Ihre Website überwacht und eingestellte API-Aufrufe und Sicherheitsverstöße werden gemeldet.

Frames: Seiten und Ressourcen werden in mehrere Ansichten unterteilt und relevante Informationen wie Sicherheit und Isolation, Content Security Policy und API-Verfügbarkeit angezeigt.

App-Steuerfeld öffnen

So öffnen Sie den Bereich Anwendung:

  1. Öffnen Sie die Entwicklertools.
  2. Öffnen Sie das Befehlsmenü durch Drücken von:
    • macOS: Befehlstaste + Umschalttaste + P
    • Windows, Linux, ChromeOS: Strg + Umschalttaste + P Befehlsmenü mit
  3. Geben Sie die ersten Zeichen application ein, wählen Sie Anwendung anzeigen aus und drücken Sie die Eingabetaste. In DevTools wird oben im Fenster der Entwicklertools der Bereich Anwendung angezeigt.

Alternativ können Sie das Steuerfeld Anwendung so öffnen:

  • Klicken Sie oben in der Aktionsleiste auf double_arrow Weitere Steuerfelder und wählen Sie aus der Drop-down-Liste Anwendung aus.
  • Wählen Sie rechts oben more_vert Weitere Optionen > Weitere Tools > Anwendung aus.