Novità di DevTools (Chrome 93)

Jecelyn Yeen

Query sui contenitori CSS modificabili nel riquadro Stili

Ora puoi visualizzare e modificare le query sui contenitori CSS nel riquadro Stili.

Le query sui contenitori offrono un approccio molto più dinamico al design responsivo. La regola @@container funziona in modo simile a una media query con @media. Tuttavia, anziché eseguire query sul riquadro e sullo user agent per ottenere informazioni, @container esegue query sul contenitore principale che corrisponde a determinati criteri.

Nel riquadro Elementi, fai clic su un elemento DOM con la regola at @container. DevTools ora mostra le informazioni @container nel riquadro Stili. Fai clic per modificare le dimensioni. Nel riquadro Stili vengono visualizzate anche le informazioni sul contenitore corrispondente. Passa il mouse sopra per evidenziare l'elemento contenitore nella pagina e controllare le dimensioni del contenitore. Fai clic per selezionare l'elemento contenitore.

Al momento la funzionalità delle query sui contenitori è sperimentale. Per testarlo, attiva il flag #enable-container-queries in chrome://flags.

Problema di Chromium: 1146422

Anteprima del pacchetto web nel riquadro Rete

Web Bundle è un formato di file per incapsulare una o più risorse HTTP in un unico file. Ora puoi visualizzare l'anteprima dei contenuti del web bundle nel riquadro Rete.

Al momento la funzionalità dei bundle web è sperimentale. Per testarlo, attiva il flag #enable-experimental-web-platform-features in chrome://flags.

Problema di Chromium: 1182537

Debug dell'API Attribution Reporting

Gli errori dell'API Attribution Reporting vengono ora segnalati nella scheda Problemi.

Attribution Reporting è una nuova API che ti aiuta a misurare quando un'azione dell'utente (ad esempio un clic o una visualizzazione dell'annuncio) porta a una conversione, senza utilizzare identificatori cross-site.

Problema di Chromium: 1190735

Migliore gestione delle stringhe nella console

Il nuovo menu contestuale nella console ti consente di copiare qualsiasi stringa come contenuto, valore letterale JavaScript o valore letterale JSON.

In Chrome 90, DevTools ha aggiornato la console in modo che formatti sempre gli output delle stringhe come valori letterali JSON validi. Abbiamo ricevuto feedback dagli sviluppatori secondo cui questa modifica potrebbe generare confusione. Alcuni ritengono che la quantità di caratteri di escape sia eccessiva e renda l'output illeggibile.

La console ora formatta gli output delle stringhe come valori letterali JavaScript validi e ti offre tre opzioni di copia delle stringhe. L'opzione Copia come valore letterale JavaScript esegue l'escape dei caratteri speciali appropriati e racchiude la stringa tra virgolette singole, virgolette doppie o apici inversi, a seconda del contenuto della stringa. L'opzione Copia contenuti stringa copia invece i contenuti della stringa non elaborati (inclusi i nuovi paragrafi e altri caratteri speciali) negli appunti. Infine, Copia come valore letterale JSON formatta la stringa come valore letterale JSON valido e la copia negli appunti.

Problema di Chromium: 1208389

Debug CORS migliorato

Gli errori TypeError correlati a CORS nella console ora sono collegati al riquadro Rete e alla scheda Problemi.

Fai clic sulle due nuove icone accanto al messaggio di errore relativo a CORS per visualizzare la richiesta di rete o comprendere meglio il messaggio di errore e ottenere potenziali soluzioni nella scheda Problemi.

Problema di Chromium: 1213393

Lighthouse 8.1

Il riquadro Lighthouse ora esegue Lighthouse 8.1.

Se il tuo sito espone le mappe di origine a Lighthouse, cerca il pulsante Visualizza mappa ad albero per visualizzare una suddivisione del JavaScript spedito, filtrabile per dimensioni e copertura al caricamento.

Il report include anche un nuovo filtro delle metriche (fai riferimento al filtro Mostra audit pertinenti a nello screenshot). Scegli una metrica su cui concentrarti per visualizzare le opportunità e i problemi di diagnostica più pertinenti per il miglioramento di quella metrica.

La categoria Rendimento ha subito una serie di modifiche al sistema di punteggio per allinearsi ad altri strumenti di rendimento e riflettere meglio lo stato del web.

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

Problema di Chromium: 772558

Visualizzare l'URL della nuova nota nel riquadro Manifest

Il riquadro Manifest ora mostra l'URL della nuova nota.

Attualmente su ChromeOS (CrOS), le app Chrome e le app per Android che dichiarano una funzionalità "new-note" possono essere selezionate come app per prendere appunti nelle impostazioni dello stilo (visualizzate se il dispositivo CrOS è stato utilizzato con uno stilo). Se selezionata come app per prendere appunti, l'app può essere avviata dal pulsante "Crea nota" della tavolozza della stilo. L'aggiunta del campo new-note-url nel manifest dell'applicazione fa parte dell'impegno per aggiungere funzionalità equivalenti alle app web.

Problema di Chromium: 1185678

Selettori di corrispondenza CSS corretti

Gli strumenti di sviluppo hanno corretto i selettori di corrispondenza CSS, che non funzionavano nell'ultima release.

I selettori separati da virgole nel riquadro Stili sono colorati in modo diverso a seconda che corrispondano al nodo DOM selezionato:

• La parte non corrispondente viene visualizzata in grigio chiaro.
• Una parte del selettore di corrispondenze viene visualizzata in nero.

Problema di Chromium: 1219153

Formattazione delle risposte JSON nel riquadro Rete

Ora puoi formattare le risposte JSON nel riquadro Rete.

Apri una risposta JSON nel riquadro Network, fai clic sull'icona {} per formattarla in modo leggibile.

Bug di Chromium: 998674

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.