Novità di DevTools (Chrome 80)

Kayce Basques

Supporto per le rideclarazioni di let e class nella console

La console ora supporta le riconferme delle istruzioni let e class. L'impossibilità di ridefinire era un problema comune per gli sviluppatori web che utilizzano la Console per sperimentare con il nuovo codice JavaScript.

Ad esempio, in precedenza, quando si rideclarava una variabile locale con let, la Console generava un errore:

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

Ora la console consente la rideclarazione:

Uno screenshot della console in Chrome 80 che mostra che la rideclarazione di let è andata a buon fine.

Problema di Chromium #1004193

Debug di WebAssembly migliorato

DevTools ha iniziato a supportare lo standard di debug DWARF, il che significa un maggiore supporto per il superamento del codice, l'impostazione di breakpoint e la risoluzione delle tracce dello stack nei linguaggi di origine all'interno di DevTools. Per maggiori informazioni, consulta Miglioramento del debug di WebAssembly in Chrome DevTools.

Uno screenshot del nuovo debug di WebAssembly basato su DWARF.

Aggiornamenti del riquadro Rete

Richiedi catene iniziatore nella scheda Iniziatore

Ora puoi visualizzare gli iniziatori e le dipendenze di una richiesta di rete come elenco nidificato. In questo modo puoi 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 iniziatore richiesta nella scheda Iniziatore

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

  • La risorsa ispezionata è in grassetto. Nello screenshot riportato sopra, https://web.dev/default-627898b5.js è la risorsa ispezionata.
  • 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 perhttps://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 ispezionarla, il riquadro Rete ora applica un bordo blu alla risorsa in Panoramica. In questo modo puoi rilevare se la richiesta di rete avviene prima o dopo del previsto.

Uno screenshot del riquadro Panoramica che evidenzia la risorsa ispezionata.

Problema di Chromium #988253

Colonne URL e percorso nel riquadro Rete

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

Uno screenshot delle nuove colonne Percorso e URL nel riquadro 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 associata alle risorse di rete, nonché sul valore di navigator.userAgent.

Le stringhe user agent predefinite sono state aggiornate in base alle versioni dei browser moderni.

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

Interfaccia utente della nuova configurazione

L'interfaccia utente di configurazione ha un nuovo design responsive e le opzioni di configurazione della limitazione sono state semplificate. Per ulteriori informazioni sulle modifiche all'interfaccia utente per la 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 contiene un nuovo menu a discesa che consente di specificare se i dati sulla copertura del codice devono essere raccolti per funzione o per blocco. La copertura per blocco è più dettagliata, ma anche molto più costosa da raccogliere. DevTools ora utilizza la copertura per funzione per impostazione predefinita.

Il menu a discesa della modalità di copertura.

Ora la copertura deve essere avviata da una ricarica della pagina

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

Problema di Chromium #1004203

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.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.