Novità di DevTools (Chrome 93)

Jecelyn Yeen

Query modificabili dei contenitori CSS nel riquadro Stili

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

Le query contenitore offrono un approccio molto più dinamico al design responsive. La regola at @container funziona in modo simile a una query sui contenuti multimediali con @media. Tuttavia, anziché eseguire query sul viewport e sull'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 su @container nel riquadro Stili. Fai clic per modificare le dimensioni. Il riquadro Stili mostra anche le informazioni del contenitore corrispondenti. Passa il mouse sopra l'elemento contenitore nella pagina per evidenziarlo e controllane le dimensioni. Fai clic per selezionare l'elemento contenitore.

La funzionalità delle query dei contenitori è attualmente sperimentale. Attiva il flag #enable-container-queries in chrome://flags per testarlo.

Query modificabili dei contenitori CSS nel riquadro Stili

Problema di Chromium: 1146422

Anteprima del pacchetto web nel riquadro Rete

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

La funzionalità del pacchetto web è attualmente sperimentale. Attiva il flag #enable-experimental-web-platform-features in chrome://flags per testarlo.

anteprima del pacchetto 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 una visualizzazione o un clic sull'annuncio) genera 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 in modo da formattare sempre le uscite di stringa come letterali JSON validi. Abbiamo ricevuto feedback dagli sviluppatori che ci segnalano che questa modifica potrebbe creare confusione. Alcuni ritengono che la quantità di escape sia eccessiva e renda il risultato illeggibile.

La console ora formatta le uscite di stringa come letterali JavaScript validi e, inoltre, offre tre opzioni per copiare le stringhe. L'opzione Copia come valore letterale JavaScript eseguirà l'escape dei caratteri speciali appropriati e inserirà la stringa tra virgolette singole, virgolette doppie o barre verticali, a seconda dei contenuti della stringa. L'opzione Copia contenuti stringa, invece, copia i contenuti non elaborati della stringa (incluse le nuove righe 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 relativi 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 per comprendere meglio il messaggio di errore e trovare 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 un'analisi dettagliata del codice JavaScript inviato, filtrabile per dimensioni e copertura al caricamento.

Il report include anche un nuovo filtro delle metriche (fai riferimento al filtro Mostra controlli pertinenti per nello screenshot). Scegli una metrica per concentrarti sulle opportunità e sulla diagnostica più pertinenti per migliorare solo quella metrica.

La categoria di rendimento ha subito una serie di modifiche al 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

Mostrare 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 Android che dichiarano una funzionalità "nuova nota" possono essere selezionate come app per prendere appunti nelle impostazioni dello stilo (viene visualizzata 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 dello 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

Sono stati corretti i selettori di corrispondenza CSS

In DevTools sono stati corretti 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 o meno al nodo DOM selezionato:

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

Selettori di corrispondenza CSS

Problema di Chromium: 1219153

Stampa in formato leggibile 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 visualizzarla in un formato leggibile.

Stampa in formato leggibile delle risposte JSON nel riquadro Rete

Bug di Chromium: 998674

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.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.