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 forniscono 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 container corrispondenti. Passa il mouse sopra per evidenziare l'elemento contenitore nella pagina e controllare le dimensioni del contenitore. Fai clic per selezionare l'elemento contenitore.

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

Query sui contenitori CSS modificabili nel riquadro Stili

Problema di Chromium: 1146422

Anteprima del web bundle 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 web bundle è sperimentale. Per testarlo, attiva il flag #enable-experimental-web-platform-features in chrome://flags.

anteprima del bundle web

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.

Errori dell'API Attribution Reporting nella scheda Problemi

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.

Nuovo menu contestuale nella console

In Chrome 90, DevTools ha aggiornato la console per formattare 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 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 stringa 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.

Icone accanto al messaggio di errore relativo a CORS

Problema di Chromium: 1213393

Lighthouse 8.1

Il riquadro Lighthouse ora esegue Lighthouse 8.1.

Faro

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 la diagnostica più pertinenti per migliorare solo quella metrica.

La categoria Rendimento ha subito una serie di modifiche al sistema di punteggio per allinearsi ad altri strumenti per il 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.

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

URL nuova nota nel riquadro Manifest

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 corrispondenza viene visualizzata in nero.

Selettori CSS corrispondenti

Problema di Chromium: 1219153

Formattazione delle risposte JSON nel riquadro Rete

Ora puoi stampare in modo leggibile le risposte JSON nel riquadro Rete.

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

Formattazione delle risposte JSON nel riquadro Rete

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.

Novità di DevTools

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