Novità di DevTools (Chrome 111)

Jecelyn Yeen

Eseguire il debug del colore HD con il riquadro Stili

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

Il riquadro Stili ora supporta 12 nuovi spazi colore e 7 nuove gamme come descritto nella specifica CSS Color Level 4. Consulta la guida ai colori CSS ad alta definizione per una comprensione completa delle opzioni di colore disponibili sul web.

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

Quando utilizzi la funzione color-mix(), puoi visualizzare l'output del colore finale nel riquadro Calcolata.

Il selettore di colori supporta tutti i nuovi spazi di 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 le gamme sRGB e display-p3 per una comprensione più chiara della gamma del colore selezionato.

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

Durante la conversione, è importante sapere se la conversione è stata ritagliata per adattarsi allo spazio. DevTools inserisce un'icona di avviso accanto al colore convertito per segnalare questo ritaglio.

Inoltre, con la nuova scorciatoia puoi scegliere i colori dallo schermo. Premi "C" per attivare l'apposita icona e Escape per disattivarla. Lo strumento Contagocce campiona i colori solo nello spazio colore sRGB. Ad esempio, se provi a campionare il colore color(display-p3 1 0 1), che non rientra nello spazio colore sRGB, lo strumento Eyedropper ne taglia il colore al più vicino nello spazio sRGB, ovvero il 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 di Chromium: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

UX dei punti di interruzione migliorata

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

Ecco alcuni punti salienti: - Entrambe le opzioni di eccezione di interruzione sono state spostate nel riquadro Breakpoint e etichettate con un testo per renderle più autoesplicative.

• I punti di interruzione sono raggruppati per file, ordinati in base ai numeri di riga o colonna e sono comprimibili.

• Quando passi il mouse sopra un punto di interruzione o un file, sono disponibili nuove opzioni per disattivare, rimuovere e modificare i punti di interruzione.

• Fai clic sul pulsante di modifica del punto di interruzione per aprire l'editor del punto di interruzione. Da qui, puoi inserire la condizione del punto di interruzione o passare a un punto di log.

Consulta la documentazione di riferimento per il debug di JavaScript per scoprire come eseguire il debug con DevTools.

Problemi di Chromium: 1407586, 1402891, 1402893

Scorciatoie di Registratore personalizzabili

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

Lo strumento Registratore introduce alcune comode scorciatoie da tastiera per registrare e riprodurre 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, utilizza il comando Crea una nuova registrazione nel menu dei comandi di DevTools per iniziare.

Problema di Chromium: 1339771

Migliore evidenziazione della sintassi per Angular

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

Problemi di Chromium: 1385374, 1385678

Riorganizzare le cache nel riquadro Applicazioni

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

Problema di Chromium: 1407166

Altri punti salienti

Di seguito sono riportate alcune correzioni importanti 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 il primo elemento corrispondente nei risultati di ricerca. (1381853)
• Varie correzioni per migliorare l'affidabilità della mappa di origine e delle interruzioni. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
• Per semplificare ulteriormente il debug, DevTools ora supporta la valutazione delle espressioni con membri di classe privati. (1381806)

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