Novità di DevTools (Chrome 92)

Jecelyn Yeen

Editor griglia CSS

Una funzionalità molto richiesta. Ora puoi visualizzare l'anteprima e creare griglie CSS con il nuovo editor di griglie CSS.

Quando a un elemento HTML della pagina vengono applicati display: grid o display: inline-grid, viene visualizzata un'icona accanto nel riquadro Stili. 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 nuove dichiarazioni di const nella console

La console ora supporta la nuova dichiarazione dell'istruzione const, oltre alle dichiarazioni esistenti di let e class. L'impossibilità di dichiarare nuovamente una variabile era un problema comune per gli sviluppatori web che utilizzano la console per sperimentare 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 binding const.

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

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

Problema di Chromium: 1076427

Visualizzatore ordine origine

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

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 grave problema di accessibilità, in quanto gli utenti di screen reader avrebbero un'esperienza diversa e 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 selezionando Mostra dettagli frame.

Si apre una visualizzazione dei dettagli dell'iframe nel riquadro Applicazione, dove puoi esaminare i dettagli del documento, lo stato di sicurezza e isolamento, le norme relative alle autorizzazioni e altro ancora per eseguire il debug di potenziali problemi.

Problema di Chromium: 1192084

Supporto avanzato per il debug di CORS

Gli errori di condivisione delle risorse tra origini (CORS) vengono ora visualizzati nella scheda Problemi. Esistono vari motivi per cui si verificano errori CORS. Fai clic per espandere ogni problema e comprendere le potenziali cause e soluzioni.

Problema di Chromium: 1141824

Aggiornamenti del riquadro Rete

Rinomina l'etichetta XHR in Recupero/XHR

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

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.

Problema di Chromium: 1103638

User-Agent Client Hints per i dispositivi nella scheda Condizioni di rete

I client hint User-Agent vengono ora applicati ai dispositivi nel campo User-Agent della scheda Condizioni di rete.

I suggerimenti client 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 nel rispetto della privacy.

Problema di Chromium: 1174299

Segnalare problemi della modalità Quirks nella scheda Problemi

Ora DevTools segnala i problemi relativi alla modalità Quirks e alla modalità Quirks limitata.

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

Quando eseguono 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 la correzione.

Problema di Chromium: 622660

Includere Calcola intersezioni nel riquadro Prestazioni

DevTools ora mostra Compute Intersections nel grafico a fiamme. Queste modifiche ti aiutano a identificare gli eventi Intersection Observer e a eseguire il debug dei potenziali sovraccarichi delle prestazioni.

Problema di Chromium: 1199137

Lighthouse 7.5 nel riquadro Lighthouse

Il riquadro Lighthouse ora esegue Lighthouse 7.5. L'avviso "larghezza e altezza esplicite mancanti" è stato rimosso per le immagini con aspect-ratio definito in 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.

Problema di Chromium: 1203606

[Sperimentale] Monitor di Protocol

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

Sono state aggiunte due nuove funzioni per facilitare il 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

Problemi di Chromium: 1204004, 1204466

[Sperimentale] Registratore Puppeteer

Lo strumento di registrazione Puppeteer ora genera un elenco di passaggi in base alla tua interazione con il browser, mentre in precedenza DevTools generava direttamente uno script Puppeteer. È stato 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. Abbiamo intenzione di migliorare ed espandere la funzionalità Registratore nel tempo.

Problema di Chromium: 1199787

Scaricare i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

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

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

Novità di DevTools

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