Novità di DevTools (Chrome 88)

Jecelyn Yeen

Avvio più rapido di DevTools

L'avvio di DevTools ora è più veloce di circa il 37% in termini di compilazione JavaScript (da 6,9 secondi fino a 5 secondi). 🎉

Il team ha effettuato alcune ottimizzazioni per ridurre l'overhead delle prestazioni derivante dalla serializzazione, dall'analisi e dalla deserializzazione durante l'avvio.

Presto sarà disponibile un post del blog tecnico con una spiegazione dettagliata dell'implementazione. Torna presto a trovarci.

Problema relativo a Chromium: 1029427

Nuovi strumenti di visualizzazione angolare CSS

DevTools ora supporta meglio il debug dell'angolo CSS.

Angolo CSS

Quando a un elemento HTML della pagina è applicato un angolo CSS (ad es. background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)), accanto all'angolo nel riquadro Stili viene visualizzata l'icona di un orologio. Fai clic sull'icona dell'orologio per attivare o disattivare l'overlay. Fai clic in un punto qualsiasi dell'orologio o trascina l'ago per cambiare l'angolazione.

Esistono anche scorciatoie da tastiera e con il mouse per modificare il valore dell'angolo; consulta la nostra documentazione per saperne di più.

Problemi relativi a Chromium: 1126178, 1138633

Emula tipi di immagini non supportati

DevTools ha aggiunto due nuove emulazioni nella scheda Rendering, che ti consentono di disattivare i formati di immagine AVIF e WebP. Queste nuove emulazioni consentono agli sviluppatori di testare più facilmente diversi scenari di caricamento delle immagini senza dover cambiare browser.

Supponiamo di avere il seguente codice HTML per pubblicare un'immagine in AVIF e WebP per i browser più recenti, con un'immagine PNG di riserva per i browser meno recenti.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Apri la scheda Rendering, seleziona "Disattiva formato immagine AVIF" e aggiorna la pagina. Passa il mouse sopra l'img src. L'attuale immagine src (currentSrc) è ora l'immagine WebP di riserva.

Emula tipi di immagini

Problema relativo a Chromium: 1130556

Simula la dimensione della quota di archiviazione nel riquadro Spazio di archiviazione

Ora puoi eseguire l'override della dimensione della quota di archiviazione nel riquadro Spazio di archiviazione. Questa funzionalità ti offre la possibilità di simulare diversi dispositivi e di testare il comportamento delle tue app in scenari di disponibilità del disco ridotta.

Vai ad Applicazione > Spazio di archiviazione, seleziona la casella di controllo Simula quota di spazio di archiviazione personalizzata e inserisci un numero valido per simulare la quota di spazio di archiviazione.

Simula dimensione quota di archiviazione

Problemi relativi a Chromium: 945786, 1146985

Nuova corsia Web Vitals nelle registrazioni del riquadro Prestazioni

Per le registrazioni delle prestazioni è ora disponibile un'opzione per visualizzare le informazioni di Web Vitals.

Dopo aver registrato le prestazioni di caricamento, seleziona la casella di controllo Web Vitals nel riquadro Prestazioni per visualizzare la nuova corsia Web Vitals.

Al momento la corsia mostra informazioni Web Vitals come First Contentful Paint (FCP), Largest Contentful Paint (LCP) e Layout Shift (LS).

Visita il sito web.dev/vitals per scoprire di più su come ottimizzare l'esperienza utente con le metriche Web Vitals.

corsia Web Vitals

Problema relativo a Chromium: N/A

Segnala gli errori CORS nel riquadro Rete

DevTools ora mostra un errore CORS quando una richiesta di rete non va a buon fine a causa della condivisione delle risorse tra origini (CORS).

Nel riquadro Rete, osserva la richiesta di rete CORS non riuscita. La colonna dello stato mostra "Errore CORS". Passa il mouse sopra l'errore per visualizzare il codice di errore nella descrizione comando. In precedenza, DevTools mostrava solo lo stato generico "(non superato)" per gli errori CORS.

Questa è la base per i nostri prossimi miglioramenti, che ci permetteranno di fornire una descrizione più dettagliata dei problemi CORS.

Errori CORS

Problema relativo a Chromium: 1141824

Aggiornamenti della visualizzazione dei dettagli del frame

Informazioni sull'isolamento multiorigine nella visualizzazione Dettagli frame

Lo stato dell'isolamento multiorigine viene ora visualizzato nella sezione Sicurezza e isolamento.

La nuova sezione Disponibilità API mostra la disponibilità dei SharedArrayBuffer (SAB) e se possono essere condivisi utilizzando postMessage().

Verrà mostrato un avviso di ritiro se l'attività SAB e postMessage() sono attualmente disponibili, ma il contesto non è isolato multiorigine. Scopri di più sull'isolamento multiorigine e sul motivo per cui sarà necessario per funzionalità come SharedArrayBuffers in questo articolo.

Informazioni multiorigine

Problema relativo a Chromium: 1139899

Informazioni sui nuovi web worker nella visualizzazione dei dettagli del frame

DevTools ora mostra i worker web dedicati sotto il frame che li crea.

Nel riquadro Applicazione, espandi un frame con i worker web, quindi seleziona un worker sotto l'albero Worker per visualizzare i dettagli del worker web.

Informazioni sui web worker

Problemi relativi a Chromium: 1122507, 1051466

Mostra i dettagli della cornice di apertura per le finestre aperte

Ora puoi visualizzare i dettagli sul frame che ha causato l'apertura di un'altra finestra.

Seleziona una finestra aperta sotto l'albero Frame per visualizzare i dettagli della finestra. Fai clic sul link Frame di apertura per mostrare la finestra di apertura nel riquadro Elementi.

Dettagli frame di apertura

Problema relativo a Chromium: 1107766

Apri il riquadro Rete dal riquadro Service worker

Visualizza tutte le informazioni di routing delle richieste dei service worker (SW) con il nuovo link Richieste di rete. In questo modo, agli sviluppatori viene fornito un contesto aggiuntivo durante il debug del software.

Vai ad Applicazione > Service worker, fai clic su Richieste di rete di un software. Il riquadro Rete viene aperto nel riquadro inferiore che mostra tutte le richieste correlate ai service worker (le richieste di rete sono filtrate in base a "is:service-worker-intercepted").

Apri il riquadro Rete dai service worker

Problema relativo a Chromium: N/A

Nuove opzioni di copia nel riquadro Rete

Copia valore proprietà

La nuova opzione "Copia valore" nel menu contestuale ti consente di copiare il valore della proprietà di una richiesta di rete.

Copia valore proprietà

Nel riquadro Rete, fai clic su una richiesta di rete per aprire il riquadro Intestazioni. Fai clic con il tasto destro del mouse su una delle proprietà di queste sezioni: Parametri stringa di query dei dati del modulo Request payload (JSON) Intestazioni delle richieste di risposta Intestazioni della risposta

Poi puoi selezionare Copia valore per copiare il valore della proprietà negli appunti.

Problema relativo a Chromium: 1132084

Copia stacktrace per l'iniziatore di rete

Fai clic con il pulsante destro del mouse su una richiesta di rete, quindi seleziona Copia traccia stack per copiare l'analisi dello stack negli appunti.

Copia analisi dello stack

Problema relativo a Chromium: 1139615

Aggiornamenti sul debug di Wasm

Visualizza l'anteprima del valore della variabile Wasm al passaggio del mouse

Quando passi il mouse sopra una variabile nel disassemblaggio di WebAssembly (Wasm) mentre è in pausa su un punto di interruzione, DevTools mostra ora il valore attuale della variabile.

Nel riquadro Origini, apri un file Wasm, inserisci un punto di interruzione e aggiorna la pagina. Passa il mouse sopra una variabile per visualizzarne il valore.

Visualizza l&#39;anteprima della variabile Wasm al passaggio del mouse

Problemi relativi a Chromium: 1058836, 1071432

Valutare la variabile Wasm nella console

Ora puoi valutare la variabile Wasm nella console mentre sei in pausa su un punto di interruzione.

In questo esempio abbiamo inserito un punto di interruzione sulla riga local.get $input. Durante il debug, digita $input nella console per restituire il valore attuale della variabile, che in questo caso è 4.

Valutare la variabile Wasm nella console

Problema relativo a Chromium: 1127914

Unità di misura coerenti per dimensioni di file/memoria

DevTools ora utilizza costantemente i kB per visualizzare le dimensioni di file e memoria. In precedenza DevTools offre un mix di kB (1000 byte) e KiB (1024 byte). Ad esempio, in precedenza il riquadro Rete utilizzava etichette "kB", ma in realtà eseguiva calcoli utilizzando KiB, causando così un'inutile confusione.

Problema relativo a Chromium: 1035309

Evidenziare pseudo elementi nel riquadro Elementi

DevTools ha aumentato il contrasto di colore degli pseudoelementi per aiutarti a individuarli meglio.

Evidenzia gli pseudo elementi

Problema relativo a Chromium: 1143833

Funzionalità sperimentali

Strumenti di debug CSS Flexbox

Stanno arrivando gli strumenti di debug di Flexbox!

Per i principianti, DevTools ora mostra un badge flex nel riquadro Elementi per gli elementi a cui è applicato display: flex.

Inoltre, vengono aggiunte nuove icone di allineamento nelle seguenti proprietà della flexbox:

  • flex-direction
  • align-items
  • align-content
  • align-self
  • justify-items
  • justify-content

Inoltre, queste icone sono sensibili al contesto. La direzione dell'icona verrà regolata in base a:

  • flex-direction
  • direction
  • writing-mode

Queste icone hanno lo scopo di aiutarti a visualizzare meglio il layout flexbox della pagina.

Debug CSS Flex

Ecco il documento di progettazione delle funzionalità degli strumenti di Flexbox. A breve verranno aggiunte altre funzionalità.

Provala e facci sapere cosa ne pensi.

Problemi relativi a Chromium: 1144090, 1139945

Personalizza scorciatoie da tastiera per accordi

DevTools ha aggiunto il supporto sperimentale per la personalizzazione delle scorciatoie da tastiera dall'ultima release.

Ora puoi creare accordi (ovvero scorciatoie con più tasti) nell'editor delle scorciatoie.

Vai a Impostazioni > Scorciatoie, passa il mouse sopra un comando e fai clic sul pulsante Modifica (icona della penna) per personalizzare la scorciatoia degli accordi.

Scorciatoie da tastiera per accordi

Problema relativo a Chromium: 174309

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 ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di 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 usando Altre opzioni   Altre   > 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome - Guida introduttiva

Chrome - Guida introduttiva

Guida introduttiva di Chrome

Chrome 100

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 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome 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 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59