Novità di DevTools (Chrome 88)

Avvio più rapido di DevTools

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

Il team ha eseguito alcune ottimizzazioni per ridurre il sovraccarico delle prestazioni legato alla serializzazione, all'analisi e alla deserializzazione durante l'avvio.

Presto sarà pubblicato un blog post tecnico con una spiegazione dettagliata dell'implementazione. Continua a seguirci.

Problema di Chromium: 1029427

Nuovi strumenti di visualizzazione angolare CSS

DevTools ora supporta meglio il debug degli angoli CSS.

Angolo CSS

Quando a un elemento HTML della tua 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/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. Per ulteriori informazioni, consulta la nostra documentazione.

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

Emula tipi di immagini

Problema di Chromium: 1130556

Simula le dimensioni della quota di spazio di archiviazione nel riquadro Archiviazione

Ora puoi sostituire la dimensione della quota di spazio di archiviazione nel riquadro Archiviazione. Questa funzionalità consente di simulare diversi dispositivi e testare il comportamento delle app in scenari di disponibilità del disco ridotta.

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

Simula dimensioni quota di spazio di archiviazione

Problemi di Chromium: 945786, 1146985

Nuova corsia Web Vitals nelle registrazioni del riquadro Prestazioni

Ora le registrazioni delle prestazioni hanno un'opzione per mostrare le informazioni di Web Vitals.

Dopo aver registrato le prestazioni di carico, attiva la casella di controllo Segnali web nel riquadro Prestazioni per visualizzare la nuova corsia Web Vitals.

La corsia attualmente mostra informazioni di 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 di WebVitals.

Corsia Web Vitals

Problema di Chromium: N/A

Segnala errori CORS nel riquadro Rete

DevTools ora 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 dello 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 riuscito)" per gli errori CORS.

Questa è la base per i prossimi miglioramenti che effettueranno una descrizione più dettagliata dei problemi di CORS.

Errori CORS

Problema di Chromium: 1141824

Aggiornamenti della visualizzazione dei dettagli del frame

Informazioni sull'isolamento multiorigine nella visualizzazione dei dettagli del frame

Lo stato con isolamento multiorigine è ora visualizzato nella sezione Sicurezza e isolamento.

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

Se l'attività al domicilio del cliente e postMessage() sono attualmente disponibili, ma il contesto non è con isolamento multiorigine, verrà visualizzato un avviso di ritiro. Scopri di più sull'isolamento multiorigine e perché sarà necessario per funzionalità come SharedArrayBuffers in questo articolo.

Informazioni multiorigine

Problema di Chromium: 1139899

Informazioni sui nuovi web worker nella visualizzazione dei dettagli del frame

DevTools ora mostra i web worker 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 visualizzare i relativi dettagli.

Informazioni sui web worker

Problemi di Chromium: 1122507, 1051466

Mostra dettagli del frame di apertura per le finestre aperte

Ora puoi visualizzare i dettagli del 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 visualizzare l'elemento di apertura nel riquadro Elementi.

Dettagli frame di apertura

Problema di Chromium: 1107766

Apri il riquadro Rete dal riquadro Lavoratori del servizio

Visualizza le informazioni di routing di tutte le richieste dei service worker (SW) con il nuovo link Richieste di rete. Ciò fornisce agli sviluppatori un contesto aggiuntivo durante il debug del software.

Vai ad Applicazione > Service worker, fai clic sulla scheda Richieste di rete di un software. Il riquadro Rete è aperto nel riquadro in basso e mostra tutte le richieste relative ai service worker (le richieste di rete sono filtrate in base a "is:service-worker-intercepted").

Apri il riquadro Rete da Service worker

Problema di Chromium: N/A

Nuove opzioni di copia nel riquadro Rete

Copia valore 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à in questa sezione: Richiedi payload (JSON) Form Data Query Parametri Stringa di Query Intestazioni della richiesta Intestazioni di risposta

A questo punto, puoi selezionare Copia valore per copiare il valore della proprietà negli appunti.

Problema di Chromium: 1132084

Copia analisi dello stack per l'iniziatore della rete

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

Copia analisi dello stack

Problema di Chromium: 1139615

Aggiornamenti di debug Wasm

Visualizza l'anteprima del valore della variabile Wasm al mouseover

Quando passi il mouse sopra una variabile in disassemblaggio di WebAssembly (Wasm) mentre è in pausa su un punto di interruzione, ora DevTools 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 su una variabile per visualizzare il valore.

Visualizza l&#39;anteprima della variabile Wasm al mouseover

Problemi di Chromium: 1058836, 1071432

Valuta la variabile Wasm nella console

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

In questo esempio, abbiamo inserito un punto di interruzione sulla riga local.get $input. Durante il debug, il tipo $input nella console restituirà il valore corrente della variabile, che in questo caso è 4.

Valuta la variabile Wasm nella console

Problema di Chromium: 1127914

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

DevTools ora utilizza regolarmente kB per visualizzare le dimensioni di file e memoria. In precedenza, DevTools, i kB misti (1000 byte) e KiB (1024 byte) Ad esempio, in precedenza il riquadro Network utilizzava le etichette "kB", ma in realtà eseguiva calcoli utilizzando KiB, il che causava confusione inutile.

Problema di Chromium: 1035309

Evidenzia gli pseudo elementi nel riquadro Elementi

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

Evidenzia pseudo elementi

Problema di Chromium: 1143833

Funzionalità sperimentali

Strumenti di debug CSS Flexbox

A breve saranno disponibili gli strumenti di debug per Flexbox.

Per i comandi iniziali, 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. La direzione dell'icona verrà regolata in base a:

  • flex-direction
  • direction
  • writing-mode

Lo scopo di queste icone è aiutarti a visualizzare meglio il layout flexbox della pagina.

Debug CSS Flex

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

Provalo e facci sapere cosa ne pensi.

Problemi di Chromium: 1144090, 1139945

Personalizzazione delle scorciatoie da tastiera per gli accordi

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

Ora puoi creare accordi (chiamati anche scorciatoie a più tasti) nell'editor di scorciatoie.

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

Scorciatoie da tastiera per gli accordi

Problema di Chromium: 174309

Scarica i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema DevTools utilizzando Altre opzioni   Altre   > Guida > Segnala i problemi di DevTools in DevTools.
  • Tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.

Chrome 123

Chrome 122

Guida introduttiva di Chrome

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Versione 115 di Chrome

Chrome 114

Chrome 113

Chrome 112

Guida introduttiva di Chrome

Versione 110 di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

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 versione 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

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

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59