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.

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)), accanto all'angolo nel riquadro Stili 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 la lancetta per modificare l'angolo.

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 img src. L'attributo src dell'immagine attuale (currentSrc) ora è l'immagine WebP di riserva.

Problema di Chromium: 1130556

Simulare le dimensioni della quota di spazio di archiviazione nel riquadro Spazio di archiviazione

Ora puoi ignorare le dimensioni della quota di spazio 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 a Application (Applicazione) > Storage (Spazio di archiviazione), attiva la casella di controllo Simulate custom storage quota (Simula quota di spazio di archiviazione personalizzata) e inserisci un numero valido per simulare la quota di spazio di archiviazione.

Problemi di Chromium: 945786, 1146985

Nuova corsia Web Vitals nelle registrazioni del riquadro Rendimento

Le registrazioni del rendimento ora hanno 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 su 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.

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 "CORS error". 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.

Problema di Chromium: 1141824

Aggiornamenti alla visualizzazione dei dettagli della struttura

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.

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.

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 nella struttura ad albero Frame per visualizzarne i dettagli. Fai clic sul link Frame opener per visualizzare l'opener nel riquadro Elementi.

Problema di 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 Network 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").

Problema di Chromium: N/D

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.

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 la traccia dello stack per l'iniziatore di rete

Fai clic con il tasto destro del mouse su una richiesta di rete, quindi seleziona Copia traccia stack per copiare la traccia stack nell'area di scambio dati.

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.

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 nella riga local.get $input. Durante il debug, digita $input nella console per visualizzare il valore corrente della variabile, che in questo caso è 4.

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

Evidenzia gli pseudo elementi nel riquadro Elementi

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

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.

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

Provalo e facci sapere cosa ne pensi.

Problemi di Chromium: 1144090, 1139945

Personalizzare le scorciatoie da tastiera per gli accordi

DevTools ha aggiunto il supporto sperimentale per le scorciatoie da tastiera personalizzate 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.

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 i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
• Invia un tweet all'account @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.

Novità di DevTools

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