Problemi: individuare e risolvere i problemi

Sam Dutton

Sofia Emelianova

Il riquadro Problemi in Chrome DevTools riduce l'eccesso di notifiche e il disordine della console. Utilizzalo per trovare soluzioni a problemi rilevati dal browser, ad esempio problemi relativi ai cookie e contenuti misti.

Al momento, il riquadro Problemi supporta:

• Problemi relativi ai cookie
• Contenuti misti
• Problemi COEP
• Errori CORS
• Problemi relativi alla modalità non standard
• (Anteprima) Problemi a basso contrasto
• Problemi relativi all'attività web attendibile
• Problemi di caricamento dei fogli di stile
• Regole CSS @property non valide
• Violazioni dei criteri di sicurezza del contenuto
• Problemi relativi agli attributi di completamento automatico

Le versioni future di Chrome supporteranno altri tipi di problemi.

Apri il riquadro Problemi

1. Visita una pagina con problemi da risolvere, ad esempio samesite-sandbox.glitch.me.
2. Apri DevTools.

3. Fai clic sul pulsante Problemi in sospeso accanto a Impostazioni nell'angolo a destra della barra delle azioni in alto. A seconda della gravità del problema, il pulsante può avere un'icona rossa, un'icona gialla o un'icona blu.

   

   In alternativa, seleziona Problemi dal menu Altri strumenti di .

   

4. Una volta aperto il riquadro Problemi, potresti voler ricaricare la pagina per individuare altri problemi, ma questa volta durante il caricamento della pagina.

   

La console potrebbe anche visualizzare i problemi segnalati dal browser. Tuttavia, noterai che questi problemi (come l'avviso sui cookie nello screenshot di seguito) sono difficili da comprendere. Non è chiaro cosa devi fare per risolvere il problema.

Il riquadro Problemi fornisce invece informazioni strategiche.

Visualizzare gli elementi nel riquadro Problemi

Il riquadro Problemi presenta gli avvisi del browser in modo strutturato, aggregato e utilizzabile.

1. Fai clic su un elemento nel riquadro Problemi per espandere il problema e ricevere indicazioni su come risolverlo e trovare le risorse interessate.

   

   Ogni elemento ha quattro componenti:

   • Un titolo che descrive il problema.
   • Una descrizione che fornisca il contesto e la soluzione.
   • Una sezione RISORSE INTERESSATE che rimanda alle risorse nel contesto di DevTools appropriato, come Rete, Origini, Elementi e altri riquadri.
   • Link ad ulteriori indicazioni.

2. Fai clic sugli elementi in RISORSE INTERESSATE per visualizzare i problemi nel contesto.

Raggruppa i problemi per tipo

Il riquadro Problemi conteggia il numero di risorse interessate per ogni problema e lo mostra accanto ai titoli. Inoltre, puoi organizzare i problemi in base alla gravità in tre tipi di gruppi:

• Errori di pagina segnalati da Chrome.
• Modifiche che provocano un errore, come i ritiri.
• Miglioramenti consigliati da DevTools.

Per raggruppare i problemi, seleziona Raggruppa per tipo nella barra delle azioni nella parte superiore del riquadro Problemi.

Includere problemi di terze parti

Il riquadro Problemi mostra i problemi relativi ai cookie di terze parti per impostazione predefinita.

Puoi trovare i problemi relativi ai cookie di terze parti nella sezione RISORSE INTERESSATE senza un link.

Per nascondere questi problemi, deseleziona Includi problemi relativi ai cookie di terze parti nella barra delle azioni nella parte superiore del riquadro Problemi.

Nascondi problemi

Per nascondere un problema, seleziona Nascondi problemi di questo tipo dal menu con tre puntini accanto al problema.

Per visualizzare l'elenco dei problemi nascosti, scorri verso il basso fino alla sezione Problemi nascosti ed espandila.

Per mostrare tutti i problemi, fai clic su Mostra tutto. Per rivelare un problema specifico, seleziona Mostra problemi come questo dal menu con tre puntini accanto al problema.

Inoltre, con il raggruppamento attivato, puoi nascondere interi gruppi di problemi utilizzando lo stesso menu con tre puntini accanto a un gruppo.

Visualizza i problemi nel contesto

Per esaminare un problema:

1. Nella sezione RISORSE INTERESSATE, fai clic sul link di una risorsa per visualizzare l'elemento nel contesto appropriato in DevTools. In questo esempio, fai clic su samesite-sandbox.glitch.me per visualizzare i cookie associati a tale richiesta. Il link porta al riquadro Rete.

   

2. Scorri per visualizzare l'elemento che presenta un problema: in questo caso, il cookie ck02. Passa il mouse sopra l'icona delle informazioni su a destra per vedere il problema e come risolverlo.