Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 92)

Jecelyn Yeen

Editor griglia CSS

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

Editor griglia CSS

Quando a un elemento HTML della tua pagina è applicato display: grid o display: inline-grid, accanto all'elemento nel riquadro Stili viene visualizzata un'icona. Fai clic sull'icona per attivare/disattivare l'editor della griglia CSS. Qui puoi visualizzare l'anteprima delle potenziali modifiche utilizzando 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 `const` nella console

La console ora supporta la ridichiarazione dell'istruzione const, oltre alle ridichiarazioni let e class esistenti. L'impossibilità di presentare una dichiarazione era un fastidio comune per gli sviluppatori web che utilizzavano 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 il processo senza aggiornare la pagina. In precedenza, DevTools generava un errore di sintassi se il codice dichiarava nuovamente un'associazione const.

Fai riferimento all'esempio 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 fin dalla progettazione:

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

ridichiarazioni cost

Problema di 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'accessibilità e l'ottimizzazione per i motori di ricerca. Le più recenti funzionalità CSS consentono agli sviluppatori di creare contenuti che appaiono sullo schermo in modo molto diversi rispetto a quelli presenti nel documento HTML. Si tratta di un grosso problema di accessibilità, in quanto gli utenti di screen reader otterranno un'esperienza diversa e molto probabilmente poco chiara 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.

Mostra dettagli frame

In questo modo potrai accedere ai dettagli dell'iframe nel riquadro Applicazione, dove puoi esaminare i dettagli del documento, lo stato di sicurezza e isolamento, i criteri di autorizzazione e altro ancora per eseguire il debug di potenziali problemi.

Visualizzazione dei dettagli della cornice

Problema di Chromium: 1192084

Supporto avanzato del debug CORS

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

Problemi relativi a CORS nella scheda Problemi

Problema di Chromium: 1141824

Aggiornamenti del riquadro Network

Rinomina l'etichetta XHR in Fetch/XHR

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

Etichetta recupero/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 user agent per i dispositivi nella scheda Condizioni di rete

I client client hint dello 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 incentrato sulla tutela della privacy.

Client hint 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.

Le modalità non standard e non standard limitate sono modalità del browser precedenti a quelle precedenti agli standard web. Queste modalità emulano comportamenti di layout dell'era precedente 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à Comppat 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 intersezioni di calcolo nel riquadro Prestazioni

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

Calcola le intersezioni nel riquadro Prestazioni

Problema di Chromium: 1199137

Lighthouse 7.5 nel pannello Lighthouse

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 7.5. L'avviso "altezza e larghezza 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" obsoleto nello stack di chiamate

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

Menu contestuale di Riavvia frame obsoleto

Problema di Chromium: 1203606

[Sperimentale] Monitoraggio del protocollo

Chrome DevTools utilizza il protocollo CDP (Chrome DevTools) per analizzare, ispezionare, eseguire il debug e profilare i browser Chrome. Monitoraggio del protocollo 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 consente di scaricare i messaggi registrati come file JSON
Un nuovo campo che consente di inviare direttamente un comando CDP non elaborato

Monitor di protocollo

Problemi di Chromium: 1204004, 1204466

[Sperimentale] Registratore Puppeteer

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 che ti consente di esportare i passaggi come script Puppeteer.

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

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

Registratore di burattini

Problema di Chromium: 1199787

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 > 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.