Novità di DevTools (Chrome 112)

Sofia Emelianova
Sofia Emelianova

Aggiornamenti di Registratore

Supporto delle estensioni di replay

Il Registratore introduce il supporto per le opzioni di riproduzione personalizzate che puoi incorporare in DevTools con un'estensione.

Prova l'estensione di esempio. Seleziona la nuova opzione di replay personalizzato per aprire la relativa UI.

UI di replay personalizzata.

Per personalizzare il Registratore in base alle tue esigenze e integrarlo con i tuoi strumenti, valuta la possibilità di sviluppare una tua estensione: esplora l'API chrome.devtools.recorder e consulta altri esempi di estensioni.

Problema di Chromium: 1400243.

Registrare con i selettori di foratura

Oltre ai selettori personalizzati, CSS, ARIA, di testo e XPath, ora puoi registrare utilizzando i selettori pierce. Questi selettori si comportano come quelli CSS, ma possono anche attraversare le radici shadow.

Avvia una nuova registrazione su una pagina con DOM ombra e seleziona Casella di controllo. Pierce in Tipi di selettori per la registrazione. Registra la tua interazione con gli elementi nel DOM ombra ed esamina il passaggio corrispondente.

Impostazione del registratore per l'utilizzo dei selettori di penetrazione; selettore di penetrazione in azione.

Problema di Chromium: 1411188.

Esporta come script Puppeteer con analisi Lighthouse

Registratore introduce una nuova opzione di esportazione: Puppeteer (inclusa l'analisi di Lighthouse). Con Puppeteer, puoi automatizzare e controllare Chrome. Con Lighthouse, puoi acquisire e migliorare il rendimento del tuo sito web.

Apri la registrazione, fai clic su Esporta. Esporta, seleziona la nuova opzione e salva il file .js.

Esporta Puppeteer (inclusa l'analisi di Lighthouse).

Esegui lo script Puppeteer per ottenere un report Lighthouse in un file flow.report.html.

Il report Lighthouse si è aperto in Chrome.

Scaricare estensioni

Esplora le opzioni per personalizzare l'esperienza di registrazione, ad esempio con opzioni di esportazione personalizzate. Per ottenere le estensioni per il Registratore, fai clic su Esporta. Esporta > Ottieni estensioni in una registrazione.

L'opzione Scarica estensioni nel menu a discesa Esporta.

Puoi aggiungere la tua estensione all'elenco delle estensioni di Registratore. Non vediamo l'ora di vedere il tuo nome nella lista.

Problemi di Chromium: 1417104, 1413168.

Elementi > Aggiornamenti degli stili

Documentazione CSS

Quante volte al giorno consulti la documentazione sulle proprietà CSS? Il riquadro Elementi > Stili ora mostra una breve descrizione quando passi il mouse sopra una proprietà.

La descrizione comando con la documentazione su una proprietà CSS.

La descrizione comando contiene anche un link Scopri di più che rimanda a un riferimento CSS MDN su questa proprietà.

Se hai una buona conoscenza di CSS, potresti trovare fastidiose le descrizioni comando. Per disattivarli tutti, seleziona Casella di controllo. Non mostrare.

Per riattivarli, seleziona Impostazioni. Impostazioni > Preferenze > Elementi > Casella di controllo. Mostra descrizione comando documentazione CSS.

Problema di Chromium: 1401107.

Supporto per l'annidamento CSS

Il riquadro Elementi > Stili ora riconosce la sintassi CSS Nesting e applica gli stili nidificati agli elementi giusti.

Problema di Chromium: 1172985.

Contrassegnare i logpoint e i punti di interruzione condizionali nella console

Migliorando ulteriormente l'esperienza utente dei punti di interruzione avanzati, la console ora contrassegna i messaggi attivati dai punti di interruzione:

Modifiche al modo in cui la console ora mostra i messaggi attivati dai punti di interruzione: con icone e link all'origine corretti.

La Console ora fornisce link di ancoraggio appropriati ai punti di interruzione nei file di origine anziché script VM<number> che Chrome crea per eseguire qualsiasi parte di JavaScript su V8.

Fai clic sul link accanto al messaggio del punto di interruzione per passare direttamente all'editor dei punti di interruzione.

Il link di ancoraggio accanto a un messaggio di logpoint che apre l&#39;editor dei punti di interruzione.

Problema di Chromium: 1027458.

Ignora gli script irrilevanti durante il debug

Per concentrarti sulle parti più importanti del codice, ora puoi aggiungere script non pertinenti all'elenco Ignora direttamente dall'albero dei file nel riquadro Origini > Pagina.

Fai clic con il tasto destro del mouse su uno script o una cartella e seleziona una delle opzioni relative all'ignoranza. Potresti visualizzare le opzioni per aggiungere o rimuovere lo script o la cartella dall'elenco. Il debugger ignora gli script aggiunti all'elenco e li omette nello stack di chiamate.

Menu contestuali di una cartella e di uno script con opzioni relative all&#39;ignoranza.

Tutti gli script e le cartelle inclusi nell'elenco degli elementi da ignorare sono visualizzati in grigio nella struttura ad albero dei file.

Gli script e le cartelle ignorati sono visualizzati in grigio e puoi nasconderli con un&#39;opzione sperimentale nel menu a discesa Altre opzioni.

Se selezioni uno script ignorato, il pulsante Configura ti reindirizza a Impostazioni. Impostazioni > Elenco ignorati. Puoi anche nascondere le origini ignorate dalla struttura ad albero dei file con Menu con tre puntini. > Nascondi origini nell'elenco di elementi da ignorare Sperimentale..

Problema di Chromium: 883325.

Ritiro del Profiler di JavaScript avviato

Già a partire da Chrome 58, il team di DevTools aveva pianificato di ritirare il profiler JavaScript e di invitare gli sviluppatori Node.js e Deno a utilizzare il riquadro Prestazioni per profilare le prestazioni della CPU JavaScript.

Questa versione di DevTools (112) avvia la deprecazione in quattro fasi del profiler JavaScript. Il riquadro Profiler di JavaScript ora mostra il banner di avviso corrispondente.

Banner di ritiro nella parte superiore di Profiler.

Anziché Profiler, utilizza il riquadro Prestazioni per profilare la CPU.

Scopri di più e fornisci un feedback nelle RFC e in crbug.com/1354548 corrispondenti.

Problema di Chromium: 1417647.

Emula contrasto ridotto

La scheda Rendering aggiunge una nuova opzione all'elenco Emula disabilità visive: Contrasto ridotto. Con questa opzione, puoi scoprire come appare il tuo sito web alle persone con sensibilità al contrasto ridotta.

L&#39;opzione di contrasto ridotto selezionata nella funzionalità &quot;Simula carenze visive&quot;.

Tieni presente che le opzioni dell'elenco sono state aggiornate per indicare il tipo di insensibilità al colore che rappresentano.

Con DevTools, puoi trovare e risolvere tutti i problemi di contrasto contemporaneamente. Per saperne di più, consulta la sezione Rendere più leggibile il tuo sito web.

Problemi di Chromium: 1412719, 1412721.

Faro 10

Il riquadro Lighthouse ora esegue Lighthouse 10.0.1. Per maggiori dettagli, vedi Novità di Lighthouse 10.0.1.

Per scoprire le nozioni di base sull'utilizzo del riquadro Lighthouse in DevTools, consulta Lighthouse: ottimizzare la velocità del sito web.

Lighthouse > Impostazioni. > Casella di controllo vuota. Navigazione precedente è ora disattivata per impostazione predefinita. Questa opzione utilizza la configurazione Lighthouse legacy in modalità Navigazione.

Navigazione precedente disattivata.

Lighthouse 10 ora utilizza Moto G Power come dispositivo di emulazione predefinito. DevTools ha aggiunto questo dispositivo a Impostazioni. Impostazioni > Dispositivi.

Moto G Power nell&#39;elenco dei dispositivi.

Problema di Chromium: 772558.

Un avviso della console per rimuovere il gestore di recupero del service worker no-op

Chrome 112 ignora i gestori di recupero dei service worker no-op (nessuna operazione) perché potrebbero rallentare la navigazione, ma non hanno uno scopo. Questi gestori non sono più necessari per qualificare il tuo sito web come app web progressiva.

La console ora mostra un avviso se rileva un gestore di recupero no-op sul tuo sito web. Valuta la possibilità di rimuoverlo.

Un gestore di recupero no-op e il relativo avviso nella console.

Problema di Chromium: 1347319.

Punti salienti vari

Di seguito sono riportate alcune correzioni degne di nota in questa release:

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.