Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 111)

Jecelyn Yeen

Debug del colore HD con il riquadro Stili

Nuovi tipi di colore e spazi CSS saranno in arrivo sul web. È altrettanto entusiasmante che DevTools abbia introdotto nuovi strumenti per aiutare gli sviluppatori a creare, convertire ed eseguire il debug del colore ad alta definizione.

Il riquadro Stili ora supporta 12 nuovi spazi colore e 7 nuove gamut, come descritto nella specifica Livello di colore 4 dei CSS. Consulta la Guida ai colori per i CSS ad alta definizione per una comprensione completa delle opzioni di colore disponibili sul web.

Ecco alcuni esempi di definizioni di colore CSS con color(), lch(), oklab() e color-mix().

Quando utilizzi la funzione color-mix(), puoi visualizzare l'output del colore finale nel riquadro Elaborato. risultato del mix di colori nel riquadro Calcolato.

Il selettore colori supporta tutti i nuovi spazi colore con più funzionalità. Ad esempio, fai clic sul campione di colore color(display-p3 1 0 1). È stata aggiunta anche una linea di confine della gamma, che distingue tra le gamut sRGB e display-p3 per una comprensione più chiara della gamma del colore selezionato.

DevTools supporta la conversione dei colori tra i diversi formati. Utilizza l'icona Modifica formato colore per accedere al popup di conversione oppure fai clic su Shift + fai clic su un campione di colore nel riquadro Stili. Conversione dei colori tra formati diversi.

Durante la conversione, è importante sapere se la conversione è stata ritagliata per adattarla allo spazio. DevTools posiziona un'icona di avviso accanto al colore convertito per avvisarti di questo ritaglio. Avviso di ritaglio del colore.

Inoltre, puoi scegliere i colori sullo schermo con la nuova scorciatoia. Premi "c" per attivare il contagocce e premi Escape per disattivarlo. Lo strumento Contagocce campiona solo i colori nello spazio colore sRGB. Ad esempio, se provi a campionare il colore color(display-p3 1 0 1), che si trova al di fuori dello spazio colore sRGB, lo strumento Contagocce ridurrà il colore al colore più vicino nello spazio sRGB, che è magenta color(display-p3 0.92 0.2 0.97).

Attiva il contagocce.

Infine, l'impostazione Formato colore è stata ritirata per fare spazio al nuovo formato di colore HD. Ritiro dell'impostazione del formato di colore.

Problemi relativi a Chromium: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409 e 1392054

UX migliorata per i punti di interruzione

Il riquadro Punti di interruzione rinnovato consente di accedere rapidamente alle funzionalità di uso comune, in particolare la disattivazione, la modifica e la rimozione dei punti di interruzione.

Ecco alcuni punti salienti: - Entrambe le opzioni per la messa in pausa delle eccezioni sono state spostate nel riquadro Punti di interruzione ed etichettate con del testo per renderle più intuitive. Metti in pausa le opzioni di eccezione.

I punti di interruzione vengono raggruppati per file, ordinati per numeri di riga o colonna e sono comprimibili.
Sono disponibili nuove opzioni per disattivare, rimuovere e modificare i punti di interruzione quando si passa il mouse sopra un punto di interruzione o un file.
Fai clic sul pulsante Modifica punto di interruzione per aprire l'editor dei punti di interruzione. Da qui puoi inserire la condizione del punto di interruzione o passare a un punto di log.

Per informazioni su come eseguire il debug con DevTools, consulta Riferimento al debug di JavaScript.

Problemi relativi a Chromium: 1407586, 1402891, 1402893

Scorciatoie di Registratore personalizzabili

Usa le scorciatoie da tastiera per registrare e riprodurre i flussi utente più velocemente.

Il Registratore introduce alcune pratiche scorciatoie da tastiera per registrare e ripetere più rapidamente i flussi utente.

Non ricordi le scorciatoie? Nessun problema, fai clic sul pulsante ? per visualizzare tutte le scorciatoie in qualsiasi momento. Le scorciatoie di Registratore.

Puoi anche personalizzare queste scorciatoie tramite il menu Impostazioni. Personalizza le scorciatoie di Registratore.

Se stai lavorando in un altro riquadro e vuoi avviare una registrazione del flusso utente, usa il comando Crea una nuova registrazione dal menu Comando in DevTools. Crea un nuovo comando di registrazione.

Problema relativo a Chromium: 1339771

Migliore evidenziazione della sintassi per Angular

DevTools ha migliorato l'evidenziazione della sintassi per i modelli HTML Angular, semplificando la lettura del codice e il riconoscimento della sua struttura.

Problemi relativi a Chromium: 1385374, 1385678

Riorganizzare le cache nel riquadro Applicazione

Il riquadro Archiviazione cache si trova ora nella sezione Archiviazione del riquadro Applicazione, mentre il riquadro Cache back/forward è stato spostato nella sezione Servizi in background. Cache nel riquadro Applicazione.

Problema relativo a Chromium: 1407166

Varie in evidenza

Di seguito sono riportate alcune importanti correzioni di questa release:

DevTools è stato aggiornato in modo da rispettare l'impostazione Disattiva cache durante il caricamento delle mappe di origine. (1407084)
Il riquadro Elementi ora mette automaticamente a fuoco automaticamente il primo elemento corrispondente nei risultati di ricerca. (1381853)
Varie correzioni per migliorare l'affidabilità della mappa di origine e dei punti di interruzione. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
Per facilitare meglio il debug, DevTools ora supporta la valutazione delle espressioni con membri privati delle classi. (1381806)

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 ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di 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 usando 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.