Novità di DevTools (Chrome 83)

Emula carenze visive

Apri la scheda Rendering e usa la nuova funzionalità Emula carenze visive per una migliore di come le persone con diversi tipi di disabilità visiva percepiscono il tuo sito.

Emula vista annebbiata.

DevTools è in grado di emulare la visione sfocata e i seguenti tipi di carenze di visione dei colori:

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

Esistono versioni meno estreme di queste carenze della visione dei colori, che sono più comuni. Ad esempio, protanomalia è una sensibilità ridotta alla luce rossa (anziché protanopia, che è la totale incapacità di percepire la luce rossa). Tuttavia, questi "-omaly" le carenze visive sono non chiaramente definiti: ogni persona con una tale deficit visivo è diversa e potrebbe vedere cose in modo diverso (essere in grado di percepire più/meno dei colori pertinenti).

Progettando per le simulazioni più estreme in DevTools, le tue app web saranno sempre accessibili anche a persone affette da protanomalia, deuteranomalia, tritanomalia e acromatomalia.

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

Emula impostazioni internazionali

Ora puoi emulare le impostazioni internazionali impostandone una in Sensori > Posizione. Apri il menu Command Menu e digita Sensors per accedere alla scheda Sensori. Dopo aver eseguito queste azioni, DevTools modifica le impostazioni internazionali predefinite correnti, con ripercussioni su quanto segue:

• Intl.* API, ad es. new Intl.NumberFormat().resolvedOptions().locale
• altre API JavaScript compatibili con le 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

di Gemini Advanced.

Dai un'occhiata all'esempio di codice dipendente dalla lingua per provare in autonomia.

Invia feedback al problema di Chromium n. 1051822.

Debug dei criteri COEP (Cross-Origin Embedder Policy)

Il riquadro Rete ora fornisce informazioni di debug per Criterio di incorporamento multiorigine.

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

La sezione Intestazioni della risposta della scheda Intestazioni fornisce ulteriori indicazioni su come risolvere il problema problemi:

Invia feedback al problema di Chromium n. 1051466.

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

Il riquadro Origini contiene nuove icone per punti di interruzione, punti di interruzione condizionali e punti di log:

• Punti di interruzione sono rappresentate da cerchi rossi.
• Punti di interruzione condizionali sono rappresentate da cerchi mezzi bianchi semi-rosso.
• Punti di log sono rappresentate da cerchi rossi con icone di Console.

La motivazione per queste nuove icone era di rendere l'interfaccia utente più coerente con altri strumenti di debug delle GUI. (in genere i punti di interruzione di colore rosso) e per facilitare la distinzione tra le 3 caratteristiche nella a colpo d'occhio.

Invia feedback al problema di Chromium n. 1041830.

Visualizza le richieste di rete che impostano un percorso dei cookie specifico

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 Filtra le richieste per proprietà per scoprire altre parole chiave speciali come cookie-path.

Ancoraggio a sinistra dal menu dei comandi

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

Invia feedback al problema di Chromium n. 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 feedback al problema di Chromium n. 1050855.

Il riquadro Controlli ora si chiama Lighthouse.

I team DevTools e Lighthouse ricevevano spesso feedback dagli sviluppatori web che avrebbero ascoltato che sia possibile eseguire Lighthouse da DevTools, ma quando hanno provato lo strumento impossibile trovare "Lighthouse" di conseguenza, il riquadro Controlli è diventato il riquadro Lighthouse.

Elimina tutti gli override locali in una cartella

Dopo aver configurato gli Override locali, ora 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 di Chromium n. 1016501.

UI delle attività lunghe aggiornata

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

Da un po' di tempo eri in grado di visualizzare le attività lunghe nel riquadro Rendimento, ma in La UI di visualizzazione dell'attività lunga 83 di Chrome nel riquadro Prestazioni è stata aggiornata. L'attività lunga di un'attività è ora colorata con uno sfondo rosso a strisce.

Invia feedback al problema di Chromium n. 1054447.

Supporto delle icone mascherabili nel riquadro Manifest

Android Oreo ha introdotto le icone adattive, che mostrano icone delle app in diverse forme 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 PWA venga visualizzata correttamente sui dispositivi che supportano Icone standard.

Attiva la nuova casella di controllo Mostra solo l'area di sicurezza minima per le icone mascherabili nel file manifest. per verificare che l'icona mascherabile venga visualizzata correttamente sui dispositivi Android Oreo. Consulta Sono le icone attuali sono pronte? per saperne di più.

Scaricare i canali in anteprima

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

Contattare il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.

• Inviaci un suggerimento o un feedback tramite crbug.com.
• Segnala un problema di DevTools utilizzando Altre opzioni   > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet all'indirizzo @ChromeDevTools.
• Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

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