Novità di DevTools (Chrome 114)

Sofia Emelianova

Jecelyn Yeen

Supporto per il debug di WebAssembly

Per impostazione predefinita, DevTools attiva Impostazioni > Esperimenti > Debug WebAssembly: attiva il supporto DWARF. Per ulteriori informazioni, consulta Eseguire il debug di WebAssembly con strumenti moderni.

Questo esperimento ti consente di mettere in pausa l'esecuzione e di eseguire il debug del codice C e C++ nelle app Wasm, con tutte le informazioni di debug a tua disposizione:

• Il codice sorgente originale, mappato utilizzando le informazioni di debug DWARF.
• Nomi di funzioni comprensibili nello stack delle chiamate.
• Supporto dei punti di interruzione e altro ancora.

Per testare il debug di Wasm, installa l'estensione di supporto di DevTools per C/C++ (DWARF) ed esegui la procedura passo passo del codice nella demo di Mandelbrot.

Problema di Chromium: 1414289.

Miglioramento del comportamento dei passaggi nelle app Wasm

Esegui il passaggio nel codice originale ora evita la sospensione nello smontaggio (file .wasm). In precedenza, si fermava lì.

Tuttavia, l'esecuzione dei passaggi termina quando esce dalla funzione in cui è iniziata, ad esempio dopo il ritorno dalla funzione.

Questo comportamento è attivato per impostazione predefinita in Impostazioni > Preferenze > Origini.

Problema di Chromium: 1418938.

Eseguire il debug della compilazione automatica utilizzando il riquadro Elementi e la scheda Problemi

La compilazione automatica di Chrome compila automaticamente i moduli con le informazioni salvate, ad esempio i tuoi indirizzi o i tuoi dati di pagamento. Per consentirti di eseguire facilmente il debug dei problemi relativi alla compilazione automatica, il riquadro Elementi ora può evidenziarli con sottolineature ondulate rosse.

Per provare questa funzionalità, attiva Impostazioni > Sperimentali > Evidenzia un nodo o un attributo in violazione nella struttura DOM del riquadro Elementi ed esamina questa pagina di dimostrazione.

Passa il mouse sopra un problema evidenziato nella struttura DOM e fai clic su Visualizza problema per aprire la scheda Problemi, che elenca tutti i problemi rilevati e fornisce indizi su cosa non ha funzionato.

Problema di Chromium: 1399414.

Verifiche in Registratore

Il riquadro Registratore ora ti consente di aggiungere asserzioni direttamente durante la registrazione, con tutti i dati di runtime a tua disposizione.

Per aggiungere un'affermazione, avvia una nuova registrazione, interagisci con la pagina e fai clic su Aggiungi affermazione. Lo strumento Registratore inserisce un passaggio con il tipo waitForElement che puoi personalizzare al volo. Guarda il video per vedere le asserzioni in azione nella demo del carrello del caffè.

Questo video mostra come affermare:

• Attributi HTML, ad esempio class di un elemento.
• Proprietà JavaScript in JSON, ad esempio .innerText.

Puoi anche configurare i passaggi per verificare, ad esempio, le istruzioni condizionali in JavaScript, il numero di elementi secondari del nodo (count), la visibilità degli elementi e altro ancora. Per ulteriori informazioni, vedi Configurare i passaggi.

Inoltre, lo strumento di registrazione ora memorizza il formato dello script preferito nella visualizzazione del codice affiancato e nel menu del passaggio con il tasto destro del mouse.

Problema di Chromium: 1423624.

Lighthouse 10.1.1

Il riquadro Lighthouse ora esegue Lighthouse 10.1.1, con una modifica significativa introdotta nella versione 10.1.0. Tutti i controlli che riguardano gli URL ora sono raggruppati per entità e statistiche numeriche aggregate come dimensioni o durata. Anche le terze parti più utilizzate sono contrassegnate con la relativa categoria, in modo da identificare più facilmente la loro finalità nella pagina.

Per conoscere le nozioni di base sull'utilizzo del riquadro Lighthouse in DevTools, consulta Lighthouse: ottimizzare la velocità del sito web.

Problema di Chromium: 772558.

Miglioramenti delle prestazioni

performance.mark() mostra i tempi al passaggio del mouse in Rendimento > Tempi

Il metodo performance.mark() ora mostra la relativa temporizzazione quando passi il mouse sopra il segno corrispondente in Rendimento > Temporizzazioni. La data e l'ora qui sono un timestamp relativo all'evento di navigazione precedente.

Problema di Chromium: 1426762.

Il comando profile() compila Rendimento > Principale

I comandi profile() e profileEnd() nella console ora avviano e interrompono il profiling della CPU nel thread principale del riquadro Rendimento.

Problema di Chromium: 1429191.

Avviso per interazioni utente lente

Le interazioni utente più lunghe di 200 millisecondi generano un avviso Interaction to Next Paint (INP) nella scheda Rendimento > Riepilogo.

Inoltre, l'ID dell'interazione è stato spostato dalla descrizione comando a Riepilogo.

Problemi di Chromium: 1432512, 1432509.

Il monitoraggio Web Vitals è stato spostato

Nel riquadro Rendimento sono stati rimossi i seguenti canali:

• Il monitoraggio Web Vitals. Al passaggio del mouse, vengono visualizzati i tempi pertinenti nel canale Tempi.
• Il sottocanale Attività lunghe. Puoi già trovare queste attività nel canale principale sfumato in rosso e con un triangolo rosso.

Sia i canali Web Vitals che Attività lunghe contenevano informazioni duplicate altrove. Inoltre, non erano interattivi rispetto alle alternative più complete che forniscono informazioni più dettagliate quando si fa clic.

Inoltre, il canale Esperienza è stato rinominato in Variazioni di layout per rispecchiare in modo più preciso il suo utilizzo.

Scopri di più su Web Vitals.

Ritiro del profiler di JavaScript: terza fase

Fin dalla versione 58 di Chrome, il team di DevTools ha pianificato di ritirare il profilatore JavaScript e di chiedere agli sviluppatori di Node.js e Deno di utilizzare il riquadro Prestazioni per eseguire il profiling delle prestazioni della CPU di JavaScript.

La versione 114 di DevTools avvia la terza fase della deprecazione in quattro fasi del profiler di JavaScript. Durante questa fase, il riquadro Profiler JavaScript viene rimosso da DevTools, ma puoi comunque attivarlo temporaneamente tramite Impostazioni > Esperimenti e aprirlo dal menu con tre puntini .

Per creare un profilo delle prestazioni della CPU, utilizza il riquadro Prestazioni.

Problema di Chromium: 1428026.

Altri punti salienti

Di seguito sono riportate alcune correzioni importanti di questa release:

• Il selettore colori ora rileva i valori HWB fuori gamma quando vengono tagliati (1429271).
• Riquadro Origini:
  • È stata attivata l'evidenziazione della sintassi JSON per le mappe di origine (1385374).
  • Non vengono più visualizzati i messaggi "Mappa di origine rilevata" quando disattivi manualmente le mappe di origine (1423718).
• La console ora ti consente di valutare espressioni JavaScript incomplete con Ctrl + Invio e di visualizzare gli errori di sintassi (1314700).
• La finestra di dialogo di modifica dell'interruzione ora ha un pulsante di chiusura. In precedenza, era necessario premere Invio o annullare l'attivazione della finestra di dialogo (1412980).

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