Novità di DevTools (Chrome 80)

Supporto per le ridichiarazioni let e class nella console

La console ora supporta le ridichiarazioni delle istruzioni let e class. L'impossibilità di presentare di nuovo la dichiarazione era un fastidio comune per gli sviluppatori web che usano la console per sperimentare il nuovo codice JavaScript.

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

Uno screenshot della console in Chrome 78 che mostra che la ridichiarazione allow non va a buon fine.

Ora la console consente la ridichiarazione:

Uno screenshot della console in Chrome 80 che mostra che la ridichiarazione di tipo allow è andata a buon fine.

Problema di Chromium #1004193

Debug di WebAssembly migliorato

DevTools ha iniziato a supportare lo standard di debug DWARF, il che comporta un maggiore supporto per il passaggio al codice, l'impostazione dei punti di interruzione e la risoluzione delle analisi dello stack nei linguaggi di origine all'interno di DevTools. Per tutta la storia, consulta Debug di WebAssembly migliorato in Chrome DevTools.

Uno screenshot del nuovo debug WebAssembly basato su DWARF.

Aggiornamenti del riquadro Network

Richiedi catene iniziali nella scheda Iniziatore

Ora puoi visualizzare le parti iniziali e le dipendenze di una richiesta di rete come 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 avvio della richiesta nella scheda Iniziatore

Dopo aver registrato l'attività di rete nel riquadro Rete, fai clic su una risorsa e vai alla scheda Iniziatore per visualizzare la relativa catena di avvio delle richieste:

  • La risorsa ispezionata è in grassetto. Nello screenshot in alto, https://web.dev/default-627898b5.js è la risorsa ispezionata.
  • Le risorse al di sopra della risorsa ispezionata sono gli iniziatori. Nello screenshot in alto, https://web.dev/bootstrap.js è l'autore 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 pagina Panoramica

Dopo aver fatto clic su una risorsa di rete per ispezionarla, il riquadro Rete inserisce un bordo blu intorno a tale risorsa nella sezione Panoramica. Questo può aiutarti a rilevare se la richiesta di rete viene eseguita prima o dopo il 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 Struttura a cascata e seleziona Percorso o URL per visualizzare le nuove colonne.

Problema di Chromium #993366

Stringhe dello user agent aggiornate

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

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

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

Per accedere alle 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

L'interfaccia utente di configurazione ha un nuovo design adattabile e le opzioni di configurazione della limitazione sono state semplificate. Per ulteriori informazioni sulle modifiche alla UI di limitazione, consulta la sezione Limitazione del riquadro di controllo.

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 consente di specificare se i dati relativi alla copertura del codice devono essere raccolti per funzione o per blocco. La copertura per blocco è più dettagliata, ma anche molto più costosa da raccogliere. Ora DevTools utilizza la copertura per funzione per impostazione predefinita.

Il menu a discesa della modalità di copertura.

La copertura deve ora essere avviata dopo il ricaricamento della pagina

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

Problema di Chromium #1004203

Scarica i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema DevTools utilizzando Altre opzioni   Altre   > Guida > Segnala i problemi di DevTools in DevTools.
  • Tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.

Novità di DevTools

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

Chrome 123

Chrome 122

Guida introduttiva di Chrome

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Versione 115 di Chrome

Chrome 114

Chrome 113

Chrome 112

Guida introduttiva di Chrome

Versione 110 di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome versione 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome versione 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome versione 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59