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.

Presto sarà disponibile un post del blog tecnico con una spiegazione dettagliata dell'implementazione. 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 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

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 il formato immagine AVIF" e aggiorna la pagina. Passa il mouse sopra l'img src. L'attributo src dell'immagine attuale (currentSrc) ora è l'immagine WebP di riserva.

Emula tipi di immagini

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.

Simula le dimensioni della quota di spazio di archiviazione

Problemi relativi a 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.

Corsia Web Vitals

Problema relativo a Chromium: N/A

Segnalare 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 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 "(non superato)" 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 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().

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à obbligatorio per funzionalità come SharedArrayBuffers in questo articolo.

Informazioni cross-origin

Problema di 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 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 sul 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 di apertura per mostrare la finestra di apertura nel riquadro Elementi.

Dettagli frame di apertura

Problema di Chromium: 1107766

Apri il riquadro Rete dal riquadro Service worker

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

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

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

Visualizza l&#39;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 nella 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 etichette "kB", ma in realtà eseguiva calcoli utilizzando KiB, causando così un'inutile 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 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 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 della penna) per personalizzare la scorciatoia degli 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 di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.

Novità di DevTools

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