Novità di DevTools (Chrome 83)

Emula difetti alla vista

Apri la scheda Rendering e utilizza la nuova funzionalità Simula carenze visive per farti un'idea migliore di come le persone con diversi tipi di carenze visive vivono la tua esperienza sul sito.

Emulazione della vista annebbiata.

Gli strumenti di sviluppo possono emulare la visione offuscata e i seguenti tipi di discromatopsia:

• Protanopia: incapacità di percepire la luce rossa.
• Deuteranopia: incapacità di percepire la luce verde.
• Tritanopia: incapacità di percepire la luce blu.
• Acromatopsia: incapacità di percepire qualsiasi colore tranne le tonalità di grigio (estremamente rara).

Esistono versioni meno estreme di queste carenze della visione dei colori, che sono anche più comuni. Ad esempio, la protanomalia è una ridotta sensibilità alla luce rossa (a differenza della protanopia, che è l'incapacità completa di percepire la luce rossa). Tuttavia, queste carenze visive "-anomale" non sono definite in modo chiaro: ogni persona con una carenza visiva di questo tipo è diversa e potrebbe vedere le cose in modo diverso (essendo in grado di percepire più o meno i colori pertinenti).

Se progetti le tue app web per le simulazioni più estreme in DevTools, hai la garanzia che saranno accessibili anche alle persone con protanomalia, deuteranomalia, tritanomalia e acromatomalopia.

Invia feedback al problema n. 1003700 di Chromium o scopri di più sull'implementazione.

Emulare le impostazioni internazionali

Ora puoi emulare le impostazioni internazionali impostando una località in Sensori > Posizione. Apri il menu Comandi e digita Sensors per accedere alla scheda Sensori. Dopo aver eseguito queste azioni, DevTools modifica le impostazioni internazionali predefinite correnti, influendo su quanto segue:

• API Intl.*, ad es. new Intl.NumberFormat().resolvedOptions().locale
• altre API JavaScript sensibili alle impostazioni internazionali, come String.prototype.localeCompare e *.prototype.toLocaleString, ad es. 123_456..toLocaleString()
• API DOM come navigator.language e navigator.languages
• l'intestazione della richiesta HTTP Accept-Language

Dai un'occhiata all'esempio di codice dipendente dalle impostazioni internazionali per provarlo.

Invia feedback al problema n. 1051822 di Chromium.

Debug di COEP (Cross-Origin Embedder Policy)

Il riquadro Rete ora fornisce informazioni di debug sulle norme sull'incorporamento multiorigine.

La colonna Stato ora fornisce una rapida spiegazione del motivo per cui una richiesta è stata bloccata, nonché un link per visualizzare le intestazioni della richiesta per ulteriori operazioni di debug:

La sezione Intestazioni di risposta della scheda Intestazioni fornisce ulteriori indicazioni su come risolvere i problemi:

Invia feedback al problema n. 1051466 di Chromium.

Nuove icone per punti di interruzione, punti di interruzione condizionali e logpoint

Il riquadro Origini presenta nuove icone per i punti di interruzione, i punti di interruzione condizionali e i logpoint:

• I punti di interruzione sono rappresentati da cerchi rossi.
• Punti di interruzione condizionali sono rappresentati da cerchi metà rossi e metà bianchi.
• I punti di log sono rappresentati da cerchi rossi con icone della console.

La motivazione alla base delle nuove icone era rendere l'interfaccia utente più coerente con altri strumenti di debug della GUI (che di solito colorano i punti di interruzione di rosso) e facilitare la distinzione tra le tre funzionalità a colpo d'occhio.

Invia feedback al problema n. 1041830 di Chromium.

Visualizza le richieste di rete che impostano un percorso specifico per i cookie

Utilizza la nuova parola chiave del filtro cookie-path nel riquadro Rete per concentrarti sulle richieste di rete che impostano un percorso cookie specifico.

Consulta Filtrare le richieste in base alle proprietà per scoprire altre parole chiave speciali come cookie-path.

Aggancia a sinistra dal menu dei comandi

Apri il menu Comando ed esegui il comando Dock to left per spostare DevTools a sinistra della viewport.

Invia feedback a Chromium issue #1011679.

L'opzione Settings nel menu principale è stata spostata

L'opzione per aprire le Impostazioni dal menu principale si trova ora in Altri strumenti.

Invia feedback al problema n. 1050855 di Chromium.

Il riquadro Controlli ora è il riquadro Lighthouse

I team di DevTools e Lighthouse hanno ricevuto spesso feedback dagli sviluppatori web che affermavano di aver sentito dire che è possibile eseguire Lighthouse da DevTools, ma quando hanno provato non sono riusciti a trovare il riquadro "Lighthouse", quindi il riquadro Controlli ora è il riquadro Lighthouse.

Eliminare tutti gli override locali in una cartella

Dopo aver configurato gli override locali, puoi fare clic con il tasto destro del mouse su una cartella e selezionare la nuova opzione Elimina tutti gli override per eliminare tutti gli override locali nella cartella.

Invia feedback al problema n. 1016501 di Chromium.

UI aggiornata delle attività lunghe

Un'attività lunga è un codice JavaScript che monopolizza il thread principale per un lungo periodo di tempo, causando il blocco di una pagina web.

Da un po' di tempo puoi visualizzare le attività lunghe nel riquadro Prestazioni, ma in Chrome 83 l'interfaccia utente di visualizzazione delle attività lunghe nel riquadro Prestazioni è stata aggiornata. La parte di un'attività denominata Attività lunga ora è colorata con uno sfondo rosso a strisce.

Invia feedback al problema n. 1054447 di Chromium.

Supporto delle icone mascherabili nel riquadro Manifest

Android Oreo ha introdotto le icone adattive, che mostrano le icone delle app in varie forme su diversi modelli di dispositivi. Le icone mascherabili sono un nuovo formato di icone che supporta le icone adattive, che ti consentono di assicurarti che l'icona della tua PWA abbia un bell'aspetto sui dispositivi che supportano lo standard delle icone mascherabili.

Attiva la nuova casella di controllo Mostra solo l'area di sicurezza minima per le icone mascherabili nel riquadro Manifest per verificare che l'icona mascherabile abbia un bell'aspetto sui dispositivi Android Oreo. Per saperne di più, consulta l'articolo Le mie icone attuali sono pronte?

Scaricare i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altro argomento relativo a DevTools.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema di DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet a @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti di DevTools.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.