Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 92)

Jecelyn Yeen

Editor griglia CSS

Una funzione molto richiesta. Ora puoi visualizzare in anteprima e creare la griglia CSS con il nuovo editor CSS Grid.

Editor griglia CSS

Quando a un elemento HTML della tua pagina sono applicati display: grid o display: inline-grid, puoi vedere un'icona visualizzata 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 relativo a Chromium: 1203241

Supporto per le ridichiarazioni `const` nella console

La Console ora supporta la ridichiarazione dell'istruzione const, oltre alle dichiarazioni let e class esistenti. L'impossibilità di ripetere la dichiarazione è stata un problema comune per gli sviluppatori web che utilizzano la console per sperimentare il nuovo codice JavaScript.

In questo modo, gli sviluppatori possono copiare e incollare il codice nella console DevTools per vedere come funziona o sperimentare, 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 un'associazione const.

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

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

ridichiarazioni const

Problema relativo a Chromium: 1076427

Visualizzatore ordine di origine

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

Visualizzatore ordine di origine

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

Problema relativo a 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.

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 di isolamento, i criteri di autorizzazione e altro ancora per eseguire il debug di potenziali problemi.

Visualizzazione dei dettagli del frame

Problema relativo a Chromium: 1192084

Supporto avanzato del debug CORS

Gli errori di condivisione delle risorse tra origini (CORS) vengono ora visualizzati nella scheda Problemi. Gli errori CORS sono dovuti a vari motivi. Fai clic per espandere ciascun problema e comprenderne le cause e le soluzioni potenziali.

Problemi CORS nella scheda Problemi

Problema relativo a Chromium: 1141824

Aggiornamenti del pannello Rete

Rinomina l'etichetta XHR in Fetch/XHR

L'etichetta XHR è ora rinominata Fetch/XHR. Questa modifica chiarisce che questo filtro include sia le richieste di rete XMLHttpRequest che l'API Fetch.

Etichetta Fetch/XHR

Problema relativo a Chromium: 1201398

Filtra il tipo di risorsa Wasm nel riquadro Rete

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

Filtra per Wasm

Problema relativo a Chromium: 1103638

Suggerimenti client dello user agent per i dispositivi nella scheda Condizioni di rete

Ora i client hint dello user agent vengono applicati ai dispositivi nel campo User agent della 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 incentrato sulla tutela della privacy.

Suggerimenti client dello user agent per i dispositivi nella scheda Condizioni di rete

Problema relativo a Chromium: 1174299

Segnalare i problemi relativi alla modalità Non standard nella scheda Problemi

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

La modalità non standard e la modalità limitata limitata sono modalità del browser precedenti rispetto a prima che venissero creati gli standard web. Queste modalità emulano comportamenti di layout dell'era pre-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 dall'utente, mentre il problema reale è la modalità di compatibilità della pagina. DevTools fornisce suggerimenti per risolvere il problema.

Segnalare i problemi relativi alla modalità Non standard nella scheda Problemi

Problema relativo a Chromium: 622660

Includi intersezioni di calcolo nel riquadro Rendimento

DevTools ora mostra le intersezioni di calcolo nel grafico a fiamme. Queste modifiche ti aiutano a identificare gli eventi di osservatori degli incroci ed eseguire il debug dei potenziali overhead delle prestazioni.

Calcola intersezioni nel riquadro Rendimento

Problema relativo a Chromium: 1199137

Lighthouse 7.5 nel riquadro Lighthouse

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 7.5. L'avviso "Larghezza e altezza mancanti espliciti" viene ora rimosso per le immagini con aspect-ratio definito in CSS. In precedenza, Lighthouse mostrava avvisi per le immagini per le quali non erano state definite la larghezza e l'altezza.

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

Problema relativo a Chromium: 772558

Menu contestuale "Riavvia frame" deprecato nello stack di chiamate

L'opzione Riavvia frame è stata ritirata. 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 relativo a Chromium: 1203606

[Sperimentale] Monitoraggio del protocollo

Chrome DevTools utilizza il protocollo DevTools (CDP) di Chrome per instrumentare, ispezionare, eseguire il debug e profilare i browser Chrome. Protocol Monitoring 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 consente di inviare direttamente un comando CDP non elaborato

Monitoraggio del protocollo

Problemi relativi a Chromium: 1204004, 1204466

[Sperimentale] Registratore di burattini

Il registratore 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 ripetere i passaggi. Segui queste istruzioni per scoprire come iniziare a registrare.

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

Registratore di burattini

Problema relativo a 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 ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

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

Inviaci un suggerimento o un feedback tramite crbug.com.
Segnala un problema di DevTools usando Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
Invia un tweet all'indirizzo @ChromeDevTools.
Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.