Novità di DevTools (Chrome 112)

Sofia Emelianova

Jecelyn Yeen

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.

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 ombra.

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

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, seleziona la nuova opzione e salva il file .js.

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

Scaricare le 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 > Ottieni estensioni in una registrazione.

Puoi aggiungere la tua estensione all'elenco delle estensioni di registrazione. 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 contiene anche un link Scopri di più che ti indirizza 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 Non mostrare.

Per riattivarli, seleziona Impostazioni > Preferenze > Elementi > 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 corretti.

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:

• Chiamate console.* in punti di interruzione condizionali con un punto interrogativo arancione ?
• Messaggi Logpoint con due puntini rosa ..

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.

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'ignoramento. 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.

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

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

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 profilatore JavaScript e di invitare gli sviluppatori Node.js e Deno a utilizzare il pannello 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.

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

Scopri di più e fornisci 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.

Tieni presente che le opzioni dell'elenco sono state aggiornate per indicare a quale insensibilità al colore si riferiscono.

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 > > Navigazione precedente è ora disattivata per impostazione predefinita. Questa opzione utilizza la configurazione Lighthouse legacy in modalità Navigazione.

Lighthouse 10 ora utilizza Moto G Power come dispositivo di emulazione predefinito. DevTools ha aggiunto questo dispositivo a Impostazioni > 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.

Problema di Chromium: 1347319.

Punti salienti vari

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

• Il riquadro Origini > Punti di interruzione ora mostra i percorsi dei file differenziati accanto ai nomi di file ambigui (1403924).
• La sezione Principale nel flame chart del riquadro Prestazioni ora indica CpuProfiler::StartProfiling come Profiler Overhead (1358602).
• Completamento automatico migliorato di DevTools:
  • Fonti: completamenti coerenti di qualsiasi parola (1320204).
  • Console: Arrow down seleziona il primo suggerimento e i suggerimenti ricevono suggerimenti Tab (1276960).
• DevTools ha aggiunto un punto di interruzione del listener di eventi per consentirti di mettere in pausa l'apertura di una finestra Picture in picture del documento (1315352).
• Gli strumenti di sviluppo hanno configurato una soluzione alternativa che mostra correttamente gli artefatti webpack di Vue2 come JavaScript (1416562).
• Un'impostazione della console riceve un nome migliore: espandi automaticamente i messaggi console.trace(). (1139616).

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.