Novità di DevTools (Chrome 92)

Jecelyn Yeen

Editor griglia CSS

Una funzionalità molto richiesta. Ora puoi visualizzare l'anteprima e creare la griglia CSS con il nuovo editor della griglia CSS.

Editor griglia CSS

Quando a un elemento HTML della pagina viene applicato display: grid o display: inline-grid, nel riquadro Stili viene visualizzata un'icona accanto all'elemento. Fai clic sull'icona per attivare/disattivare l'editor della griglia CSS. Qui puoi visualizzare l'anteprima delle potenziali modifiche con le icone sullo schermo (ad es. justify-content: space-around) e creare l'aspetto della griglia con un solo clic.

Problema di Chromium: 1203241

Supporto per le ridichiarazioni di const nella Console

La Console ora supporta la nuova dichiarazione dell'istruzione const, oltre alle nuove dichiarazioni let e class esistenti. L'impossibilità di dichiarare nuovamente era un fastidio comune per gli sviluppatori web che utilizzano la Console per sperimentare con il nuovo codice JavaScript.

In questo modo, gli sviluppatori possono copiare e incollare il codice nella console DevTools per vedere come funziona o fare esperimenti, apportare piccole modifiche al codice e ripetere la procedura senza aggiornare la pagina. In precedenza, DevTools generava un errore di sintassi se il codice dichiarava nuovamente un'associazione const.

Fai riferimento all'esempio riportato di seguito. La nuova dichiarazione di const è supportata in script REPL separati (fai riferimento alla variabile a). Tieni presente che i seguenti scenari non sono supportati per progettazione:

  • La nuova dichiarazione const degli script di pagina non è consentita negli script REPL
  • La nuova dichiarazione di const all'interno dello stesso script REPL non è consentita (fai riferimento alla variabile b)

const redeclarations

Problema di Chromium: 1076427

Visualizzatore ordine del codice sorgente

Ora puoi visualizzare l'ordine degli elementi di origine sullo schermo per un'ispezione dell'accessibilità migliore.

Visualizzatore ordine del codice sorgente

L'ordine dei contenuti in un documento HTML è importante per l'ottimizzazione per i motori di ricerca e l'accessibilità. Le funzionalità CSS più recenti consentono agli sviluppatori di creare contenuti che hanno un aspetto molto diverso nell'ordine sullo schermo rispetto a quello del documento HTML. Si tratta di un grosso problema di accessibilità, in quanto gli utenti di screen reader avrebbero un'esperienza diversa, molto probabilmente confusa, rispetto agli utenti vedenti.

Problema di Chromium: 1094406

Nuova scorciatoia per visualizzare i dettagli del frame

Visualizza i dettagli dell'iframe facendo clic con il tasto destro del mouse sull'elemento iframe nel riquadro Elementi e seleziona Mostra dettagli frame.

Mostra dettagli frame

In questo modo, viene visualizzata una panoramica dei dettagli dell'iframe nel riquadro Applicazione, dove puoi esaminare i dettagli del documento, lo stato di sicurezza e isolamento, la policy sulle autorizzazioni e altro ancora per eseguire il debug di potenziali problemi.

Visualizzazione dei dettagli del frame

Problema di Chromium: 1192084

Supporto del debug CORS migliorato

Gli errori di condivisione delle risorse multiorigine (CORS) vengono ora visualizzati nella scheda Problemi. Esistono vari motivi che causano errori CORS. Fai clic per espandere ogni problema e comprendere le potenziali cause e soluzioni.

Problemi CORS nella scheda Problemi

Problema di Chromium: 1141824

Aggiornamenti del riquadro Rete

Rinomina l'etichetta XHR in Fetch/XHR

L'etichetta XHR è stata rinominata in Fetch/XHR. Questa modifica rende più chiaro che questo filtro include sia le richieste di rete XMLHttpRequest sia quelle dell'API Fetch.

Etichetta Fetch/XHR

Problema di Chromium: 1201398

Filtra il tipo di risorsa Wasm nel riquadro Rete

Ora puoi fare clic sul nuovo pulsante Wasm per filtrare le richieste di rete Wasm.

Filtra per Wasm

Problema di Chromium: 1103638

Client hint dello user agent per i dispositivi nella scheda Condizioni di rete

I client hint dello user agent ora vengono applicati ai dispositivi nel campo User agent nella scheda Condizioni di rete.

I client hint dello user agent sono una nuova espansione dell'API Client Hints, che consente agli sviluppatori di accedere alle informazioni sul browser di un utente in modo ergonomico e che tutela la privacy.

Client hint dello user agent per i dispositivi nella scheda Condizioni di rete

Problema di Chromium: 1174299

Segnala i problemi relativi alla modalità non standard nella scheda Problemi

DevTools ora segnala i problemi relativi alla modalità non standard e alla modalità non standard limitata.

La modalità non standard e la modalità non standard limitata sono modalità dei browser legacy precedenti alla creazione degli standard web. Queste modalità emulano i comportamenti di layout dell'era precedente agli standard, che spesso causano effetti visivi imprevisti.

Durante il debug dei problemi di layout, gli sviluppatori potrebbero pensare che siano causati da bug CSS o HTML creati dagli utenti, mentre il vero problema è la modalità di compatibilità in cui si trova la pagina. DevTools fornisce suggerimenti per risolverlo.

Segnala i problemi relativi alla modalità non standard nella scheda Problemi

Problema di Chromium: 622660

Includi Calcola intersezioni nel riquadro Prestazioni

Ora DevTools mostra Compute Intersections nel flame chart. Queste modifiche ti aiutano a identificare gli eventi degli osservatori di intersezione ed eseguire il debug dei potenziali overhead delle prestazioni.

Calcola intersezioni nel riquadro Prestazioni

Problema di Chromium: 1199137

Lighthouse 7.5 nel riquadro Lighthouse

Il pannello Lighthouse ora esegue Lighthouse 7.5. L'avviso "larghezza e altezza esplicite mancanti" è stato rimosso per le immagini con aspect-ratio definito nel CSS. In precedenza, Lighthouse mostrava avvisi per le immagini senza larghezza e altezza definite.

Consulta le note di rilascio per un elenco completo delle modifiche.

Problema di Chromium: 772558

Menu contestuale "Riavvia frame" deprecato nello stack di chiamate

L'opzione Riavvia frame è ora deprecata. Questa funzionalità richiede un ulteriore sviluppo per funzionare correttamente, al momento non funziona e spesso si arresta in modo anomalo.

Menu contestuale Riavvia frame deprecato

Problema di Chromium: 1203606

[Sperimentale] Monitoraggio del protocollo

Chrome DevTools utilizza il Chrome DevTools Protocol (CDP) per instrumentare, ispezionare, eseguire il debug e profilare i browser Chrome. Il monitoraggio del protocollo ti consente di visualizzare tutte le richieste e le risposte CDP effettuate da DevTools.

Sono state aggiunte due nuove funzioni per facilitare i test di CDP:

  • Il nuovo pulsante Salva ti consente di scaricare i messaggi registrati come file JSON.
  • Un nuovo campo che ti consente di inviare direttamente un comando CDP non elaborato

Monitoraggio del protocollo

Problemi di Chromium: 1204004, 1204466

[Sperimentale] Puppeteer Recorder

Il registratore di Puppeteer ora genera un elenco di passaggi in base alla tua interazione con il browser, mentre in precedenza DevTools generava direttamente uno script di Puppeteer. Viene aggiunto un nuovo pulsante Esporta per consentirti di esportare i passaggi come script Puppeteer.

Dopo aver registrato i passaggi, puoi utilizzare il nuovo pulsante Riproduci per riprodurli. Segui le istruzioni riportate qui per scoprire come iniziare a registrare.

Tieni presente che si tratta di un esperimento in fase iniziale. Prevediamo di migliorare ed espandere la funzionalità di Registratore nel tempo.

Puppeteer Recorder

Problema di Chromium: 1199787

Scarica i canali in 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 le API della piattaforma 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.