Panoramica del riquadro dell'applicazione

Dale St. Marthe
Dale St. Marthe

Utilizza il riquadro Applicazione per ispezionare, modificare ed eseguire il debug di molti aspetti della tua app web, inclusi manifest, service worker, spazio di archiviazione e dati della cache.

Panoramica

Il riquadro Applicazione è diviso in quattro sezioni che contengono dei sottomenu. Di seguito sono riportati le sezioni e i sottomenu:

Applicazione: contiene informazioni generali sull'app, inclusi manifest, service worker e spazio di archiviazione.

  • La scheda File presenta le informazioni di manifest.json in modo facile da usare. Verranno inoltre visualizzati eventuali errori e avvisi nella sezione corrispondente.
  • La scheda Service worker ti consente di ispezionare i service worker ed eseguirne il debug emulando eventi push, aggiornando un servizio e altro ancora.
  • La scheda Spazio di archiviazione contiene un grafico a torta che mostra la distribuzione della memoria utilizzata dallo spazio di archiviazione della cache, da IndexedDB e dai service worker. Puoi anche cancellare i dati dei siti e simulare una quota di spazio di archiviazione personalizzata.

Spazio di archiviazione: visualizza e modifica i diversi metodi di archiviazione utilizzati da un'app web.

  • Gli elenchi locale e Spazio di archiviazione sessione ti consentono di selezionare un'origine e modificare le coppie chiave-valore dei metodi di archiviazione associati.
  • L'elenco IndexedDB contiene database e consente di controllare gli archivi di oggetti dal browser.
  • L'elenco Cookie ti consente di selezionare un'origine e modificare le coppie chiave-valore.
  • I token di stato privati e i gruppi di interesse ti consentono di controllare i token e gli gruppi corrispondenti, se presenti.
  • L'elenco Spazio di archiviazione condiviso ti consente di selezionare un'origine e di controllare e modificare le coppie chiave-valore associate.
  • L'elenco Spazio di archiviazione della cache contiene le cache disponibili e consente di ispezionare, filtrare ed eliminare le risorse corrispondenti.

Servizi in background: ispeziona, testa ed esegui il debug dei servizi in background.

  • La scheda Cache back/forward consente di eseguire test sulla cache back-forward nel browser. Segnala inoltre problemi che potrebbero impedire la memorizzazione nella cache back-forward.
  • La scheda Recupero sfondo ti consente di registrare l'attività dall'API Background Fetch per massimo tre giorni.
  • La scheda Sincronizzazione in background ti consente di registrare l'attività dall'API Background Sync per un massimo di tre giorni.
  • La scheda Mitigazioni del monitoraggio del rimbalzo ti consente di identificare ed eliminare lo stato dei siti che sembrano eseguire il monitoraggio tra siti utilizzando la tecnica di monitoraggio del rimbalzo.
  • La scheda Notifiche ti consente di registrare i messaggi push per un massimo di tre giorni.
  • La scheda Gestore dei pagamenti ti consente di registrare gli eventi Gestore dei pagamenti per un massimo di tre giorni.
  • La scheda Sincronizzazione periodica in background consente di registrare gli eventi chiave per un massimo di tre giorni nel ciclo di vita periodica di una sincronizzazione in background, come la registrazione per la sincronizzazione, l'esecuzione di una sincronizzazione in background e l'annullamento della registrazione.
  • La scheda Caricamenti speculativi consente di eseguire il debug dei caricamenti speculativi. Mostra lo stato speculativo, le serie di regole e i tentativi di caricamento speculativo.
  • La scheda Messaggi push ti consente di registrare i messaggi push per un massimo di tre giorni e di registrarli.
  • La scheda API di reporting monitora il tuo sito e segnala le chiamate API ritirate e le violazioni della sicurezza.

Frame: consente di suddividere le pagine e le risorse in più visualizzazioni e di visualizzare le informazioni pertinenti, quali Sicurezza e isolamento, Criterio di sicurezza del contenuto, Disponibilità delle API e altro ancora.

Apri il riquadro Applicazione

Per aprire il riquadro Applicazione:

  1. Apri DevTools.
  2. Apri il menu Comando premendo:
    • macOS: Comando+Maiusc+P
    • Windows, Linux, ChromeOS: Ctrl+Maiusc+P Menu dei comandi con
  3. Inizia a digitare application, seleziona Mostra applicazione e premi Invio. DevTools visualizza il riquadro Applicazione nella parte superiore della finestra DevTools.

In alternativa, puoi aprire il riquadro Applicazione nei seguenti modi:

  • Nella barra delle azioni in alto, fai clic su double_arrow Altri riquadri e seleziona Applicazione dall'elenco a discesa.
  • Nell'angolo in alto a destra, seleziona more_vert Altre opzioni > Altri strumenti > Applicazione.