La sezione Servizi in background di Chrome DevTools è una raccolta di strumenti per le API JavaScript che consentono al tuo sito web di inviare e ricevere aggiornamenti anche quando un utente non ha aperto il tuo sito web. Un servizio in background è funzionalmente simile a un processo in background.
La sezione Servizi in background consente di eseguire il debug dei seguenti servizi in background:
- Recupero dello sfondo
- Sincronizzazione in background
- Notifiche
- Caricamenti speculativi
- Esegui il pull dei messaggi
Chrome DevTools può registrare gli eventi di recupero, sincronizzazione e notifica per tre giorni, anche quando DevTools non è aperto. In questo modo puoi assicurarti che gli eventi vengano inviati e ricevuti come previsto.
Oltre agli eventi dei servizi in background, DevTools può:
- Mostrare i report che Chrome ha già inviato o sta per inviare utilizzando l'API di reporting.
- Consentire di eseguire il debug e testare la cache back-forward con un clic.
Recupero dello sfondo
L'API Background Fetch consente a un service worker di scaricare in modo affidabile risorse di grandi dimensioni, come film o podcast, come servizio in background. Per registrare gli eventi di recupero dello sfondo per tre giorni, anche quando DevTools non è aperto:
- Apri DevTools in una pagina che utilizza l'API Background Fetch.
Vai ad Applicazione > Servizi in background > Recupero dello sfondo e fai clic su
Registra.
Nella pagina, attiva alcune attività di recupero dello sfondo. DevTools registra gli eventi nella tabella.
Fai clic su un evento per visualizzarne i dettagli nello spazio sotto la tabella.
Puoi chiudere DevTools e lasciare in esecuzione la registrazione per un massimo di tre giorni. Per interrompere la registrazione, fai clic su
Interrompi.
Sincronizzazione in background
L'API Background Sync consente a un service worker offline di inviare dati a un server una volta ristabilita una connessione internet affidabile. Per registrare gli eventi di sincronizzazione in background per tre giorni, anche quando DevTools non è aperto:
- Apri DevTools, ad esempio in questa pagina demo.
Vai ad Applicazione > Servizi in background > Sincronizzazione in background e fai clic su
Registra.
Nella pagina demo, fai clic su Registra sincronizzazione in background per registrare il service worker corrispondente e fai clic su Consenti quando richiesto.
La registrazione del service worker è un'attività di sincronizzazione in background. DevTools registra gli eventi nella tabella.
Fai clic su un evento per visualizzarne i dettagli nello spazio sotto la tabella.
Puoi chiudere DevTools e lasciare in esecuzione la registrazione per un massimo di tre giorni. Per interrompere la registrazione, fai clic su
Interrompi.
(Sperimentale) Mitigazioni del monitoraggio del rimbalzo
Esperimento di mitigazione del monitoraggio del rimbalzo in Chrome consente di identificare ed eliminare lo stato dei siti che sembrano eseguire il monitoraggio tra siti utilizzando la tecnica di monitoraggio del rimbalzo. Puoi forzare manualmente le mitigazioni del monitoraggio e visualizzare un elenco dei siti i cui stati sono stati eliminati.
Per forzare le mitigazioni del monitoraggio:
- Blocca i cookie di terze parti in Chrome. Vai a
> Impostazioni > 
Privacy e sicurezza > Cookie e altri dati dei siti > 
Blocca i cookie di terze parti. - In
chrome://flags, imposta l'esperimento Mitigazioni del monitoraggio del rimbalzo su Attivato con eliminazione. - Apri DevTools e vai ad Applicazione > Servizi in background > Mitigazioni del monitoraggio del rimbalzo.
- Fai clic su un link di rimbalzo e attendi (10 secondi) che Chrome registri il rimbalzo. La scheda Problemi ti avvisa dell'imminente eliminazione dello stato.
- Fai clic su Forza esecuzione per eliminare immediatamente lo stato.
Notifiche
Dopo che un service worker ha ricevuto un messaggio push da un server, il service worker utilizza l'API Notifications per visualizzare i dati per un utente. Per registrare le notifiche per tre giorni, anche quando DevTools non è aperto:
- Apri DevTools.
Vai ad Applicazione > Servizi in background > Notifiche e fai clic su
Registra.
Fai clic su Pianifica notifica e su Consenti quando richiesto.
Attendi che venga visualizzata la notifica. DevTools registra gli eventi di notifica nella tabella.
Fai clic su un evento per visualizzarne i dettagli nello spazio sotto la tabella.
Puoi chiudere DevTools e lasciare in esecuzione la registrazione per un massimo di tre giorni. Per interrompere la registrazione, fai clic su
Interrompi.
Caricamenti speculativi
I caricamenti speculativi consentono un caricamento della pagina quasi istantaneo in base alle regole di speculazione che definisci. In questo modo, il tuo sito web può recuperare in anticipo e pre-renderizzare la maggior parte delle pagine a cui si accede.
Il precaricamento recupera una risorsa in anticipo, mentre il pre-rendering va oltre ed esegue il rendering dell'intera pagina in un processo di rendering in background nascosto.
Puoi eseguire il debug dei caricamenti speculativi nella sezione Applicazione > Servizi in background > Caricamenti speculativi. La sezione contiene tre visualizzazioni:
- Caricamenti speculativi. Contiene lo stato speculativo per la pagina corrente, l'URL corrente, le pagine che la pagina corrente tenta di caricare in modo speculativo e i relativi stati.
- Regole. Contiene gli insiemi di regole nella pagina corrente nel riquadro Elementi e lo stato generale delle speculazioni.
- Speculazioni. Contiene una tabella con informazioni sui tentativi di caricamento speculativo e i relativi stati. Se un tentativo non è riuscito, puoi fare clic su di esso nella tabella per visualizzare informazioni dettagliate e il motivo dell'errore.
Prova a eseguire il debug dei caricamenti speculativi in questa pagina demo di pre-rendering:
Apri DevTools nella pagina e vai ad Applicazione > Servizi in background > Caricamenti speculativi. Se non riesci a visualizzare i caricamenti speculativi avviati dalla pagina, ricaricala.
La pagina iniziale della demo esegue il pre-rendering di due pagine e non riesce a eseguire il pre-rendering di una. Fai clic su Visualizza tutte le speculazioni.
In Speculazioni, seleziona la speculazione con lo stato Errore per visualizzare la Motivazione dell'errore nella sezione con informazioni dettagliate in basso.
In questo caso, il pre-rendering non è riuscito perché non esiste una pagina
/next3.htmlsul sito web.Apri la sezione Regole e fai clic su Stato per visualizzare l'insieme di regole in basso. Se fai clic sul link Insieme di regole , viene visualizzato il riquadro Elementi e viene mostrato dove è definita la regola di speculazione.
Per una procedura dettagliata, consulta Eseguire il debug delle regole di speculazione.
Messaggi push
Per visualizzare una notifica push per un utente, un service worker deve prima utilizzare l'API Push Message per ricevere dati da un server. Quando il service worker è pronto per visualizzare la notifica, utilizza l'API Notifications. Per registrare i messaggi push per tre giorni, anche quando DevTools non è aperto:
- Apri DevTools, ad esempio in questa pagina demo.
Vai ad Applicazione > Servizi in background > Messaggi push e fai clic su
Registra.
Nella pagina demo, attiva/disattiva Attiva notifiche push, fai clic su Consenti quando richiesto, digita un messaggio e invialo. DevTools registra gli eventi di notifica push nella tabella.
Fai clic su un evento per visualizzarne i dettagli nello spazio sotto la tabella.
Puoi chiudere DevTools e lasciare in esecuzione la registrazione per un massimo di tre giorni. Per interrompere la registrazione, fai clic su
Interrompi.
API di reporting
Alcuni errori si verificano solo in produzione. Non li vedi mai localmente o durante lo sviluppo perché gli utenti, le reti e i dispositivi reali cambiano le regole.
Ad esempio, supponiamo che il tuo nuovo sito si basi su software di terze parti che utilizza document.write() per caricare script critici. I nuovi utenti di tutto il mondo aprono il tuo sito, ma potrebbero avere connessioni più lente di quelle con cui hai eseguito i test. A tua insaputa, il tuo sito inizia a non funzionare per loro perché Chrome interviene contro document.write() sulle reti lente. In alternativa, potresti voler tenere d'occhio le API ritirate o che verranno ritirate a breve che il tuo codebase potrebbe utilizzare.
L'API di reporting è progettata per aiutarti a monitorare le chiamate API deprecate, le violazioni della sicurezza della tua pagina e altro ancora. Puoi configurare i report come descritto in Monitorare l'applicazione web con l'API di reporting.
Per visualizzare i report generati da una pagina:
- Vai a
chrome://flags/#enable-experimental-web-platform-features, imposta Funzionalità sperimentali della piattaforma web su Attivato e riavvia Chrome. Apri DevTools e vai ad Applicazione > Servizi in background > API di reporting.
La scheda API di reporting è divisa in tre parti:
- La tabella Report con le seguenti informazioni su ogni report:
- URL che ha causato la generazione del report
- Tipo di violazione
- Stato del report
- Endpoint di destinazione
- Timestamp Generato il
- Corpo del report
- La sezione di anteprima Corpo del report. Per visualizzare l'anteprima del corpo di un report, fai clic su un report nella tabella dei report.
- La sezione Endpoint con una panoramica di tutti gli endpoint configurati nell'intestazione
Reporting-Endpoints.
Stato del report
La colonna Stato indica se Chrome ha inviato il report correttamente, sta per inviarlo o non è riuscito a inviarlo.
| Stato | Descrizione |
|---|---|
Success |
Il browser ha inviato il report e l'endpoint ha risposto con un codice di esito positivo (200 o un altro codice di risposta di esito positivo 2xx). |
Pending |
Il browser sta tentando di inviare il report. |
Queued |
Il report è stato generato e il browser non sta ancora tentando di inviarlo. Un report viene visualizzato come Queued in uno di questi due casi:
|
MarkedForRemoval |
Dopo aver riprovato per un po' (Queued), il browser ha smesso di tentare di inviare il report e lo rimuoverà a breve dall'elenco dei report da inviare. |
I report vengono rimossi dopo un po', indipendentemente dal fatto che siano stati inviati correttamente o meno.
Sessioni associate al dispositivo
Le credenziali di sessione associate al dispositivo (DBSC) sono un'API web e un protocollo tra user agent e server che mira a impedire il furto di cookie consentendo a uno user agent di dichiarare il possesso di una chiave privata archiviata in modo sicuro.
Per visualizzare le sessioni associate al dispositivo, le relative definizioni e gli eventi:
- Apri DevTools in una pagina che utilizza DBSC.
- Vai ad Applicazione > Servizi in background > Sessioni associate al dispositivo.
Nella barra laterale a sinistra, espandi un sito per visualizzarne le sessioni attive. Seleziona una sessione per visualizzarne la definizione.
La tabella Eventi registra gli eventi DBSC: creazione, aggiornamento, richiesta e terminazione. Per conservare l'elenco degli eventi durante le navigazioni delle pagine, seleziona check_box Conserva log.
Nella tabella Eventi, seleziona un evento per visualizzarne i dettagli.
Se un evento non riesce, vedrai il messaggio
Errornella colonna Risultato. Seleziona l'evento non riuscito per visualizzarne i dettagli, il codice di errore della risposta e la causa dell'errore.
La sezione Sessioni associate al dispositivo nella barra laterale potrebbe evidenziare i seguenti problemi:
- Sessioni terminate: indicate da un testo barrato e da un'icona di database disattivato nella barra laterale.
- Eventi non riusciti: evidenziati con un'icona di avviso. L'elemento Nessuna sessione acquisisce gli eventi non riusciti collegati a un sito, ma non a una sessione nota.