Novità di DevTools (Chrome 80)

Kayce Basques

Supporto per le ridichiarazioni let e class nella console

La console ora supporta le ridichiarazioni di istruzioni let e class. Incapacità di ridichiarare è stato un fastidio comune per gli sviluppatori web che usano la console per sperimentare nuove funzionalità JavaScript le API nel tuo codice.

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

Ora la console consente la ridichiarazione:

Problema di Chromium #1004193

Debug di WebAssembly migliorato

DevTools ha iniziato a supportare lo standard di debug DWARF, il che significa maggiore supporto per controllo del codice, impostazione dei punti di interruzione e risoluzione delle analisi dello stack nei linguaggi di origine all'interno DevTools. Scopri il debug di WebAssembly migliorato in Chrome DevTools per saperne di più.

Aggiornamenti del pannello Rete

Richiedi catene iniziatore nella scheda Iniziatore

Ora puoi visualizzare gli iniziatori e le dipendenze di una richiesta di rete come elenco nidificato. Questo può aiutano a capire perché è stata richiesta una risorsa o quale attività di rete è associata a una determinata risorsa (come come script).

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 richiesta dell'iniziatore:

• La risorsa ispezionata è in grassetto. Nello screenshot qui sopra, https://web.dev/default-627898b5.js è la risorsa ispezionata.
• Le risorse sopra la risorsa ispezionata sono gli iniziatori. Nello screenshot qui 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 al di sotto della risorsa ispezionata sono le dependencies. Nello screenshot qui sopra, https://web.dev/chunk-f34f99f7.js è una dipendenza di https://web.dev/default-627898b5.js. Nella 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 schermata Panoramica.

Dopo aver fatto clic su una risorsa di rete per ispezionarla, il riquadro Rete ora inserisce un bordo blu relative alla risorsa in Panoramica. Può aiutarti a rilevare se la richiesta di rete viene che avvenga prima o dopo il previsto.

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 completo URL di ogni risorsa di rete.

Fai clic con il pulsante 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 La stringa dello user agent influisce sull'intestazione HTTP User-Agent collegata alle risorse di rete, nonché sull'intestazione valore di navigator.userAgent.

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

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

Problema di Chromium #1029031

Aggiornamenti del pannello di controllo

Nuova UI di configurazione

L'interfaccia utente di configurazione ha un nuovo design reattivo, mentre le opzioni di configurazione della limitazione hanno semplificati. Per ulteriori informazioni sull'interfaccia utente per la limitazione, consulta la sezione Limitazione del riquadro dei controlli modifiche.

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 sono anche molto più costosi da collezionare. Al momento DevTools utilizza la copertura per funzione per impostazione predefinita.

La copertura deve ora essere avviata da un ricaricamento della pagina

L'attivazione/disattivazione della copertura del codice senza il ricaricamento della pagina è stata rimossa perché i dati relativi alla copertura erano inaffidabili. 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 ripulito.

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 in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

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

• Inviaci un suggerimento o un feedback tramite crbug.com.
• Segnala un problema di DevTools utilizzando Altre opzioni   > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet all'indirizzo @ChromeDevTools.
• Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

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