Novità di DevTools (Chrome 80)

Kayce Basques
Kayce Basques

Supporto per le rideclarazioni di let e class nella console

La console ora supporta le nuove dichiarazioni delle istruzioni let e class. L'impossibilità di dichiarare nuovamente era un problema comune per gli sviluppatori web che utilizzano la console per sperimentare nuovo codice JavaScript.

Ad esempio, in precedenza, quando si dichiarava nuovamente una variabile locale con let, la console generava un errore:

Uno screenshot della console in Chrome 78 che mostra che la nuova dichiarazione di let non va a buon fine.

Ora la console consente la nuova dichiarazione:

Uno screenshot della console in Chrome 80 che mostra che la nuova dichiarazione di let è riuscita.

Problema di Chromium #1004193

Debug di WebAssembly migliorato

Gli strumenti per sviluppatori hanno iniziato a supportare lo standard di debug DWARF, il che significa un maggiore supporto per l'esecuzione passo passo del codice, l'impostazione di punti di interruzione e la risoluzione delle analisi dello stack nei linguaggi sorgente all'interno degli strumenti per sviluppatori. Per saperne di più, consulta l'articolo Debug migliorato di WebAssembly in Chrome DevTools.

Uno screenshot del nuovo debug di WebAssembly basato su DWARF.

Aggiornamenti del riquadro Network

Richiedi catene iniziatore nella scheda Iniziatore

Ora puoi visualizzare gli iniziatori e le dipendenze di una richiesta di rete come un elenco nidificato. Questo può aiutarti a capire perché è stata richiesta una risorsa o quale attività di rete ha causato una determinata risorsa (ad esempio uno script).

Uno screenshot di una catena di richiesta iniziatore nella scheda Iniziatore

Dopo aver registrato l'attività di rete nel riquadro Rete, fai clic su una risorsa e poi vai alla scheda Iniziatore per visualizzare la catena di iniziatore della richiesta:

  • La risorsa esaminata è in grassetto. Nello screenshot riportato sopra, https://web.dev/default-627898b5.js è la risorsa esaminata.
  • Le risorse sopra la risorsa ispezionata sono gli iniziatori. Nello screenshot riportato sopra, https://web.dev/bootstrap.js è l'iniziatore di https://web.dev/default-627898b5.js. In altre parole, https://web.dev/bootstrap.js ha causato la richiesta di rete per https://web.dev/default-627898b5.js.
  • Le risorse sotto la risorsa ispezionata sono le dipendenze. Nello screenshot riportato sopra, https://web.dev/chunk-f34f99f7.js è una dipendenza di https://web.dev/default-627898b5.js. In altre parole, https://web.dev/default-627898b5.js ha causato la richiesta di rete per https://web.dev/chunk-f34f99f7.js.

Problema di Chromium #842488

Evidenzia la richiesta di rete selezionata nella panoramica

Dopo aver fatto clic su una risorsa di rete per esaminarla, il riquadro Rete ora inserisce un bordo blu intorno alla risorsa nella Panoramica. Questo può aiutarti a rilevare se la richiesta di rete si verifica prima o dopo del previsto.

Uno screenshot del riquadro Panoramica che evidenzia la risorsa esaminata.

Problema di Chromium #988253

Colonne URL e percorso nel riquadro Rete

Utilizza le nuove colonne Percorso e URL nel riquadro Network per visualizzare il percorso assoluto o l'URL completo di ogni risorsa di rete.

Uno screenshot delle nuove colonne Percorso e URL nel pannello Rete.

Fai clic con il tasto destro del mouse sull'intestazione della tabella Cascata e seleziona Percorso o URL per visualizzare le nuove colonne.

Problema di Chromium #993366

Stringhe user agent aggiornate

DevTools supporta l'impostazione di una stringa user agent personalizzata tramite la scheda Condizioni di rete. La stringa User-Agent influisce sull'intestazione HTTP User-Agent allegata alle risorse di rete e anche sul valore di navigator.userAgent.

Le stringhe user agent predefinite sono state aggiornate per riflettere le versioni moderne dei browser.

Uno screenshot del menu User agent nella scheda Condizioni di rete.

Per accedere a Condizioni di rete, apri il menu Comando ed esegui il comando Show Network Conditions.

Problema di Chromium #1029031

Aggiornamenti del riquadro Controlli

Nuova UI di configurazione

La UI di configurazione ha un nuovo design reattivo e le opzioni di configurazione della limitazione delle richieste sono state semplificate. Per ulteriori informazioni sulle modifiche all'interfaccia utente di limitazione, consulta Limitazione del riquadro Controlli.

La nuova UI di configurazione.

Aggiornamenti della scheda Copertura

Modalità di copertura per funzione o per blocco

La scheda Copertura ha un nuovo menu a discesa che ti consente di specificare se i dati di copertura del codice devono essere raccolti per funzione o per blocco. La copertura per isolato è più dettagliata, ma anche molto più costosa da raccogliere. Ora DevTools utilizza per impostazione predefinita la copertura per funzione.

Il menu a discesa della modalità di copertura.

La copertura ora deve essere avviata ricaricando la pagina

L'attivazione/disattivazione della copertura del codice senza ricaricare la pagina è stata rimossa perché i dati di copertura non erano affidabili. Ad esempio, una funzione può essere segnalata come inutilizzata se la sua esecuzione è avvenuta molto tempo fa e il Garbage Collector di V8 l'ha ripulita.

Problema di Chromium #1004203

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.

Novità di DevTools

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