Novità di DevTools (Chrome 88)

Jecelyn Yeen

Avvio più rapido di DevTools

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

Il team ha eseguito alcune ottimizzazioni per ridurre l'overhead delle prestazioni della serializzazione, dell'analisi e della deserializzazione durante l'avvio.

A breve verrà pubblicato un post del blog dedicato all'engineering che spiegherà l'implementazione in dettaglio. Continua a seguirci.

Problema di Chromium: 1029427

Nuovi strumenti di visualizzazione degli angoli CSS

DevTools ora offre un supporto migliore per il debug degli angoli CSS.

Angolo CSS

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

Esistono anche scorciatoie da mouse e tastiera per modificare il valore dell'angolo. Consulta la nostra documentazione per scoprire di più.

Problemi di Chromium: 1126178, 1138633

Emulare tipi di immagini non supportati

Strumenti per gli sviluppatori ha aggiunto due nuove emulazioni nella scheda Rendering, che consentono di disattivare i formati di immagini 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 il 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.

Emulare i tipi di immagini

Problema di Chromium: 1130556

Simulare le dimensioni della quota di spazio 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 consente di simulare diversi dispositivi e testare il comportamento delle tue app in scenari di bassa disponibilità del disco.

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 le dimensioni della quota di spazio di archiviazione

Problemi relativi a Chromium: 945786, 1146985

Nuova corsia Web Vitals nelle registrazioni del riquadro Rendimento

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

Dopo aver registrato il rendimento in fase di caricamento, attiva la casella di controllo Web Vitals nel riquadro Rendimento 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 la pagina web.dev/vitals per scoprire di più su come ottimizzare l'esperienza utente con le metriche Web Vitals.

Corsia Web Vitals

Problema di Chromium: N/D

Segnalare gli errori CORS nel riquadro Rete

Ora DevTools mostra l'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 Stato mostra "Errore CORS". Passa il mouse sopra l'errore: la descrizione comando ora mostra il codice di errore. In precedenza, DevTools mostrava solo lo stato generico "(failed)" per gli errori CORS.

Questo getta le basi per i nostri prossimi miglioramenti per 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 con 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().

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

Informazioni cross-origin

Problema di Chromium: 1139899

Nuove informazioni sui worker web nella visualizzazione Dettagli 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 nella struttura ad albero Worker per visualizzarne i dettagli.

Informazioni sui web worker

Problemi di Chromium: 1122507, 1051466

Mostrare i dettagli del riquadro dell'apri per le finestre aperte

Ora puoi visualizzare i dettagli relativi al 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

Aprire il riquadro Rete dal riquadro Service Workers

Visualizza tutte le informazioni sul routing delle richieste del servizio worker (SW) con il nuovo link Richieste di rete. In questo modo, gli sviluppatori hanno a disposizione un contesto aggiuntivo durante il debug del software.

Vai ad Application (Applicazione) > Service Workers (Worker di servizio), fai clic su Network requests (Richieste di rete) di un SW. Il riquadro Rete viene aperto nel riquadro inferiore e mostra tutte le richieste relative ai worker di servizio (le richieste di rete vengono 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 il valore della proprietà

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

Copia il valore della 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à in queste sezioni: Dati modulo della richiesta (JSON) Parametri della stringa di query Intestazioni della richiesta Intestazioni di risposta

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

Problema di 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 di 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 nello smontaggio di WebAssembly (Wasm) mentre è in pausa su un punto di interruzione, DevTools ora mostra il valore corrente 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.

Anteprima della variabile Wasm al passaggio del mouse

Problemi di Chromium: 1058836, 1071432

Valutare la variabile Wasm nella console

Ora puoi valutare la variabile Wasm nella console 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 visualizzare il valore corrente della variabile, che in questo caso è 4.

Valutare la variabile Wasm nella console

Problema di Chromium: 1127914

Unità di misura coerenti per le dimensioni dei file/della memoria

DevTools ora utilizza in modo coerente i kB per la visualizzazione delle dimensioni di file/memoria. In precedenza, DevTools mescolava kB (1000 byte) e KiB (1024 byte). Ad esempio, in precedenza il riquadro Rete utilizzava le etichette "kB", ma in realtà eseguiva i calcoli utilizzando KiB, il che causava confusione.

Problema di Chromium: 1035309

Evidenziare gli elementi pseudo nel riquadro Elementi

In DevTools è stato aumentato il contrasto dei colori degli elementi pseudo per aiutarti a individuarli meglio.

Evidenzia pseudo elementi

Problema di Chromium: 1143833

Funzionalità sperimentali

Strumenti di debug CSS Flexbox

Gli strumenti di debug di Flexbox sono in arrivo.

Per iniziare, 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à flexbox:

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

Inoltre, queste icone sono sensibili al contesto. L'orientamento dell'icona verrà modificato in base a:

  • flex-direction
  • direction
  • writing-mode

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

Debug di CSS Flex

Ecco la documentazione di progettazione delle funzionalità degli strumenti Flexbox. A breve verranno aggiunte altre funzionalità.

Provala e facci sapere cosa ne pensi.

Problemi di 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ù pressioni dei tasti) nell'editor delle scorciatoie.

Vai a Impostazioni > Scorciatoie, passa il mouse sopra un comando e fai clic sul pulsante Modifica (icona a forma di matita) per personalizzare la scorciatoia per gli accordi.

Scorciatoie da tastiera per gli accordi

Problema di Chromium: 174309

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 gli utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altra cosa relativa a DevTools.

Novità di DevTools

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