Novità di DevTools (Chrome 80)

Kayce Basques
Kayce Basques
X GitHub

Supporto per le nuove dichiarazioni 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 Rete

Richiedere 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 Rete 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 n. 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.