Novità di DevTools (Chrome 93)

Query sul contenitore CSS modificabili nel riquadro Stili

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

Le query container offrono un approccio molto più dinamico al responsive design. La regola at @container funziona in modo simile a una query multimediale con @media. Tuttavia, invece di eseguire query sull'area visibile e sullo user agent per ottenere informazioni, @container esegue una query sul contenitore predecessore che corrisponde a determinati criteri.

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

La funzionalità delle query contenitore è al momento sperimentale. Attiva il flag #enable-container-queries sotto chrome://flags per testarlo.

Query sul contenitore CSS modificabili nel riquadro Stili

Problema relativo a Chromium: 1146422

Anteprima del bundle web nel riquadro Rete

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

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

anteprima bundle web

Problema relativo a 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 consente di misurare quando un'azione dell'utente (come un clic su un annuncio o una visualizzazione) genera una conversione, senza utilizzare identificatori cross-site.

Errori dell'API Attribution Reporting nella scheda Problemi

Problema relativo a Chromium: 1190735

Migliore gestione delle stringhe nella console

Il nuovo menu contestuale nella console ti consente di copiare qualsiasi stringa come contenuto, letterale JavaScript o 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 creare confusione, alcuni ritengono che il numero di caratteri di escape sia eccessivo e renda l'output illeggibile.

La console ora formatta gli output delle stringhe come valori letterali JavaScript validi e offre inoltre tre opzioni di copia per le stringhe. L'opzione Copia come valore letterale JavaScript esegue l'interpretazione letterale 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 non elaborati della stringa (inclusi nuove righe e altri caratteri speciali) parola per parola negli appunti. Infine, Copia come valore letterale JSON formatta la stringa come valore letterale JSON valido e la copia negli appunti.

Problema relativo a Chromium: 1208389

Debug CORS migliorato

Gli errori TypeError relativi a CORS nella console sono ora 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 relativo a Chromium: 1213393

Lighthouse 8.1

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 8.1.

Faro

Se il tuo sito espone 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 a nello screenshot). Scegli una metrica per concentrarti sulle opportunità e sulla diagnostica più pertinenti per migliorare quella metrica.

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

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

Problema relativo a Chromium: 772558

Visualizza l'URL della nuova nota nel riquadro Manifest

Nel riquadro Manifest ora viene visualizzato il nuovo URL della nota.

Attualmente su ChromeOS (CrOS), app di Chrome e app per Android che dichiarano una "nuova nota" può essere selezionata come app per creare note nelle impostazioni dello stilo (viene visualizzata se il dispositivo ChromeOS è stato utilizzato con uno stilo). Quando è selezionata come app per creare note, l'app può essere lanciata da "Crea nota" della tavolozza dello stilo . L'aggiunta del campo new-note-url nel file manifest dell'applicazione rientra nell'ambito dell'impegno per aggiungere una funzionalità equivalente alle app web.

URL della nuova nota nel riquadro Manifest

Problema relativo a Chromium: 1185678

Selettori di corrispondenza CSS corretti

DevTools ha corretto i selettori di corrispondenza CSS. Non funzionava nell'ultima release.

I selettori separati da virgole nel riquadro Stili hanno un colore diverso a seconda che corrispondano o meno al nodo DOM selezionato:

  • Una parte senza corrispondenza viene mostrata in grigio chiaro.
  • Una parte del selettore corrispondente è mostrata in nero.

Selettori di corrispondenza CSS

Problema relativo a Chromium: 1219153

Stampa delle risposte JSON nel riquadro Network

Ora puoi stampare il codice delle risposte in formato JSON nel riquadro Rete.

Apri una risposta JSON nel riquadro Network, fai clic sull'icona {} per stamparla.

 Stampa delle risposte JSON nel riquadro Network

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 in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e 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 utilizzando Altre opzioni   Altro > 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.

Novità di DevTools

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