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.

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.

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

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).

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

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 mettere in pausa le eccezioni sono state spostate nel riquadro Punti di interruzione e sono state etichettate con del testo per renderle più intuitive.

• 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.

Puoi anche personalizzare queste scorciatoie tramite il menu Impostazioni.

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.

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.

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 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.