Novità di DevTools (Chrome 111)

Jecelyn Yeen

Debug del colore HD con il riquadro Stili

Sul web arriveranno nuovi tipi e spazi di colore CSS. È 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 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 colore CSS con color(), lch(), oklab() e color-mix().

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

Il selettore del colore 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 gamme sRGB e display-p3 per una comprensione più chiara della gamma del colore selezionato.

Gli strumenti di sviluppo supportano la conversione dei colori tra i formati di colore. Utilizza l'icona Cambia formato colore per accedere al popup di conversione oppure utilizza semplicemente Shift + fai clic su un campione di colore nel riquadro Stili.

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

Inoltre, puoi scegliere i colori dallo 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 non rientra nello spazio colore sRGB, lo strumento Contagocce ritaglia il colore al colore più vicino nello spazio sRGB, ovvero il magenta color(display-p3 0.92 0.2 0.97).

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

Problemi di Chromium: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

UX migliorata per i punti di interruzione

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

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

• I punti di interruzione sono raggruppati per file, ordinati per numero di riga o colonna e sono comprimibili.

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

• Fai clic sul pulsante di modifica del 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 logpoint.

Consulta la guida al debug di JavaScript per scoprire come eseguire il debug con DevTools.

Problemi di Chromium: 1407586, 1402891, 1402893

Scorciatoie personalizzabili del Registratore

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

Lo strumento di registrazione 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 persino personalizzare queste scorciatoie tramite il menu Impostazioni.

Se stai lavorando in un altro riquadro e vuoi avviare la registrazione di un flusso utente, utilizza il comando Crea una nuova registrazione dal menu dei comandi in DevTools per iniziare.

Problema di Chromium: 1339771

Evidenziazione della sintassi migliore per Angular

Gli strumenti di sviluppo hanno migliorato l'evidenziazione della sintassi per i modelli HTML di Angular, semplificando la lettura del codice e il riconoscimento della sua struttura.

Problemi di Chromium: 1385374, 1385678

Riorganizzare le cache nel pannello Applicazione

Il riquadro Cache Storage ora si trova nella sezione Storage del riquadro Applicazione, mentre il riquadro Cache back-forward è stato spostato nella sezione Servizi in background.

Problema di Chromium: 1407166

Punti salienti vari

Di seguito sono riportate alcune correzioni degne di nota in questa release:

• DevTools è stato aggiornato per rispettare l'impostazione Disattiva cache durante il caricamento delle mappe di origine. (1407084)
• Il riquadro Elementi ora mette a fuoco automaticamente il primo elemento corrispondente nei risultati di ricerca. (1381853)
• Varie correzioni per migliorare l'affidabilità della mappa delle origini e dei punti di interruzione. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
• Per semplificare il debug, DevTools ora supporta la valutazione delle espressioni con i 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 funzionalità più recenti di DevTools, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

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

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

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.