Novità di DevTools (Chrome 83)

Kayce Basques

Emula difetti alla vista

Apri la scheda Rendering e utilizza la nuova funzionalità Emulare deficit visivi per farti un'idea migliore di come le persone con diversi tipi di deficit visivi utilizzano il tuo sito.

Emulazione di una visione annebbiata.

DevTools può emulare la visione sfumata e i seguenti tipi di discromatopsie:

• Protanopia: l'incapacità di percepire la luce rossa.
• Deuteranopia: l'incapacità di percepire la luce verde.
• Tritanopia: l'incapacità di percepire la luce blu.
• Acromatopsia: l'incapacità di percepire qualsiasi colore, ad eccezione delle sfumature di grigio (estremamente rara).

Esistono versioni meno estreme di queste deficienze della visione dei colori, che sono in effetti più comuni. Ad esempio, la protanomalia è una ridotta sensibilità alla luce rossa (a differenza della protanopia, che è la completa incapacità di percepire la luce rossa). Tuttavia, queste anomalie visive non sono così ben definite: ogni persona con una simile anomalia visiva è diversa e potrebbe vedere le cose in modo diverso (essere in grado di percepire più/meno i colori pertinenti).

Progettando per le simulazioni più estreme in DevTools, le tue app web saranno obbligatoriamente accessibili anche a persone con protanomalia, deuteranomalia, tritanomalia e acromatopsia.

Invia un feedback relativo al problema Chromium 1003700 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 Comando e digita Sensors per accedere alla scheda Sensori. Dopo aver eseguito queste azioni, DevTools modifica le impostazioni internazionali predefinite correnti, interessando quanto segue:

• API Intl.*, ad esempio new Intl.NumberFormat().resolvedOptions().locale
• altre API JavaScript sensibili alla lingua come String.prototype.localeCompare e *.prototype.toLocaleString, ad esempio 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 dalla lingua per provarlo.

Invia un feedback al problema di Chromium 1051822.

Debug dei criteri sull'incorporamento multiorigine (COEP)

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

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

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

Invia un feedback al problema Chromium 1051466.

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

Il riquadro Origini contiene nuove icone per le interruzioni, le interruzioni condizionali e i punti di log:

• I punti di interruzione sono rappresentati da cerchi rossi.
• I punti di interruzione condizionali sono rappresentati da cerchi metà rossi e metà bianchi.
• I logpoint sono rappresentati da cerchi rossi con icone di Console.

Lo scopo delle nuove icone era rendere l'interfaccia utente più coerente con altri strumenti di debug della GUI (che in genere colorano le interruzioni di programma in rosso) e semplificare la distinzione tra le 3 funzionalità al primo sguardo.

Invia un feedback al problema Chromium 1041830.

Visualizzare le richieste di rete che impostano un percorso del cookie specifico

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

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

Aggancia a sinistra dal menu di comando

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

Invia un feedback al problema Chromium 1011679.

L'opzione Settings nel menu principale è stata spostata

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

Invia un feedback relativo al problema di Chromium 1050855.

Il riquadro Controlli ora è il riquadro Lighthouse

I team di DevTools e Lighthouse ricevevano spesso feedback da sviluppatori web che affermavano di aver sentito dire che è possibile eseguire Lighthouse da DevTools, ma quando provavano a farlo non riuscivano a trovare il riquadro "Lighthouse". Pertanto, il riquadro Controlli ora è il riquadro Lighthouse.

Eliminare tutti gli override locali in una cartella

Dopo aver configurato le sovrapposizioni locali, ora puoi fare clic con il tasto destro del mouse su una cartella e selezionare la nuova opzione Elimina tutte le sovrapposizioni per eliminare tutte le sovrapposizioni locali nella cartella in questione.

Invia un feedback al problema Chromium 1016501.

Interfaccia utente delle attività lunghe aggiornata

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

Da un po' di tempo è possibile 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 relativa alle attività lunghe di un'attività ora è colorata con uno sfondo rosso a strisce.

Invia un feedback relativo al problema di Chromium 1054447.

Supporto delle icone mascherabili nel riquadro Manifest

Android Oreo ha introdotto le icone adattive, che mostrano le icone delle app in una serie di 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 sia visualizzata correttamente 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 venga visualizzata correttamente sui dispositivi Android Oreo. Per saperne di più, consulta l'articolo Le mie icone attuali sono pronte?

Scaricare i canali di anteprima

Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

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

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

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.