Novità di DevTools (Chrome 92)

Editor di griglie CSS

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

Quando a un elemento HTML della pagina viene applicato display: grid o display: inline-grid, accanto all'elemento viene visualizzata un'icona 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 definire l'aspetto della griglia con un solo clic.

Problema di Chromium: 1203241

Supporto per le rideclarazioni di const nella console

La console ora supporta la ridefinizione dell'istruzione const, oltre alle redefinizioni di let e class esistenti. L'impossibilità di ridefinire era un problema 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 di nuovo una associazione const.

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

• La ridefinizione di const 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 dell'ordine delle origini

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 dall'aspetto molto diverso nell'ordine sullo schermo rispetto a quanto indicato nel documento HTML. Si tratta di un grave problema di accessibilità, in quanto gli utenti di screen reader avranno un'esperienza diversa e molto probabilmente più confusa rispetto agli utenti vedenti.

Problema di Chromium: 1094406

Nuova scorciatoia per visualizzare i dettagli del frame

Per visualizzare i dettagli dell'iframe, fai clic con il tasto destro del mouse sull'elemento iframe nel riquadro Elementi e seleziona Mostra dettagli frame.

Viene visualizzata 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 CORS

Gli errori di condivisione delle risorse tra origini (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.

Problema di Chromium: 1141824

Aggiornamenti del riquadro Rete

Rinominare l'etichetta XHR in Recupera/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

Filtrare 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

Suggerimenti client dello user agent 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 client hint 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 i problemi della modalità Quirks nella scheda Problemi

DevTools ora segnala i problemi relativi alla Modalità Quirks e alla Modalità Quirks limitata.

La modalità non standard e la modalità con limitazioni non standard sono modalità del browser precedenti alla creazione degli standard web. Queste modalità simulano i comportamenti di layout precedenti allo standard che spesso causano effetti visivi imprevisti.

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

Problema di Chromium: 622660

Includere Calcola intersezioni nel riquadro Rendimento

DevTools ora mostra Calcolo intersezioni nel grafico a forma di fiamma. Queste modifiche ti aiutano a identificare gli eventi degli osservatori di intersezione e a eseguire il debug dei relativi potenziali sovraccarichi di prestazioni.

Problema di Chromium: 1199137

Lighthouse 7.5 nel riquadro Lighthouse

Il riquadro Lighthouse ora esegue Lighthouse 7.5. L'avviso "Larghezza e altezza 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" ritirato nello stack chiamate

L'opzione Riavvia frame è stata ritirata. Questa funzionalità richiede ulteriore sviluppo per funzionare correttamente, al momento non è disponibile e spesso si arresta in modo anomalo.

Problema di Chromium: 1203606

[Sperimentale] Monitor di Protocol

Chrome DevTools utilizza il Chrome DevTools Protocol (CDP) per eseguire l'instrumentazione, ispezionare, eseguire il debug e creare il profilo dei 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 semplificare i test di CDP:

• Il nuovo pulsante Salva consente di scaricare i messaggi registrati come file JSON
• Un nuovo campo che 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 ripeterli. 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à Registratore nel tempo.

Problema di Chromium: 1199787

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.