Novità di DevTools (Chrome 112)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Aggiornamenti di Registratore

Supporto delle estensioni di replay

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

Prova l'estensione di esempio. Seleziona la nuova opzione di ripetizione personalizzata per aprire l'interfaccia utente della ripetizione personalizzata.

Interfaccia utente di riproduzione personalizzata.

Per personalizzare il Registratore in base alle tue esigenze e integrarlo con i tuoi strumenti, ti consigliamo di sviluppare la tua estensione: esplora l'API chrome.devtools.recorder e dai un'occhiata ad altri esempi di estensioni.

Problema di Chromium: 1400243.

Registrazione con i selettori di foratura

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

Avvia una nuova registrazione in una pagina con DOM ombra e seleziona Casella di controllo. Scavalla in Tipi di selettori da registrare. Registra la tua interazione con gli elementi nello shadow DOM ed esamina il passaggio corrispondente.

Impostazione del Registratore per l'utilizzo dei selettori di aggiramento; selettore di aggiramento 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 la tua esperienza di registrazione, ad esempio con opzioni di esportazione personalizzate. Per ottenere estensioni per Registratore, fai clic su Esporta. Esporta > Ricevi estensioni in una registrazione.

L'opzione Ricevi estensioni nel menu a discesa Esporta.

Non esitare ad aggiungere la tua estensione all'elenco delle Estensioni di Registratore. Non vediamo l'ora di includere il tuo canale nell'elenco.

Problemi di Chromium: 1417104, 1413168.

Elementi > Aggiornamenti 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 di una proprietà CSS.

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

Se conosci bene il CSS, le descrizioni comando potrebbero risultare fastidiose. Per disattivarli tutti, seleziona Casella di controllo. Non mostrare.

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

Problema di Chromium: 1401107.

Supporto per il nidificazione CSS

Il riquadro Elementi > Stili ora riconosce la sintassi di nidificazione CSS e applica gli stili nidificati agli elementi corretti.

Problema di Chromium: 1172985.

Marcatura di punti di log e punti di interruzione condizionali nella console

Per migliorare ulteriormente l'esperienza utente avanzata dei breakpoint, Console ora contrassegna i messaggi attivati dai breakpoint:

Modifiche alla modalità di visualizzazione dei messaggi attivati dai punti di interruzione nella console: con icone e link alla fonte appropriato.

La console ora fornisce link di ancoraggio appropriati ai punti di interruzione nei file di origine anziché agli script VM<number> creati da Chrome per eseguire qualsiasi frammento di codice JavaScript su V8.

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

Il link di ancoraggio accanto a un messaggio del punto di log che apre l&#39;editor del punto di interruzione.

Problema di Chromium: 1027458.

Ignorare gli script irrilevanti durante il debug

Per aiutarti a concentrarti sulle parti più importanti del codice, ora puoi aggiungere script non pertinenti all'elenco di ignorati direttamente dalla struttura ad 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 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;ignoramento.

Tutti gli script e le cartelle nell'elenco di ignorati non sono selezionabili nella struttura ad albero dei file.

Gli script e le cartelle nell&#39;elenco ignorato non sono selezionabili, ma 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 ignora. Puoi anche nascondere le origini ignorate dall'albero dei file con Menu con tre puntini. > Nascondi origini nell'elenco di elementi da ignorare Sperimentale..

Problema di Chromium: 883325.

È iniziata la ritiro del Profiler di JavaScript

Fin dalla versione 58 di Chrome, il team di DevTools ha pianificato di ritirare il profilatore JavaScript e di chiedere agli sviluppatori di Node.js e Deno di utilizzare il riquadro Prestazioni per eseguire il profiling delle prestazioni della CPU di JavaScript.

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

Banner di ritiro nella parte superiore del Profiler.

Anziché Profiler, utilizza il riquadro Prestazioni per creare il profilo della CPU.

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

Problema di Chromium: 1417647.

Emula contrasto ridotto

La scheda Rendering aggiunge una nuova opzione all'elenco Emula deficienze visive: Contrasto ridotto. Con questa opzione puoi scoprire l'aspetto del tuo sito web per le persone con ridotta sensibilità al contrasto.

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

Tieni presente che le opzioni dell'elenco sono state aggiornate per indicare la sensibilità al colore che rappresentano.

Con DevTools puoi trovare e correggere tutti i problemi di contrasto contemporaneamente. Per ulteriori informazioni, consulta Rendere il sito web più leggibile.

Problemi di Chromium: 1412719, 1412721.

Lighthouse 10

Il pannello Lighthouse ora esegue Lighthouse 10.0.1. Per maggiori dettagli, consulta Novità di Lighthouse 10.0.1.

Per conoscere 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. la navigazione precedente è ora disattivata per impostazione predefinita. Questa opzione utilizza la configurazione di Lighthouse precedente in modalità di 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 Dispositivi.

Problema di Chromium: 772558.

Un avviso della console per rimuovere il gestore di recupero del servizio worker senza operazioni

Chrome 112 salta i gestori di recupero dei service worker no-op (senza operazioni) perché potrebbero rallentare la navigazione, ma non hanno uno scopo. Questi gestori non sono più necessari per la classificazione del 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 rimuoverla.

Un gestore di recupero no-op e l&#39;avviso corrispondente nella console.

Problema di Chromium: 1347319.

Altri punti salienti

Di seguito sono riportate alcune correzioni importanti di questa release:

  • Il riquadro Origini > Breakpoint ora mostra i percorsi file distinti accanto ai nomi di file ambigui (1403924).
  • La sezione Principale nel grafico a forma di fiamma del riquadro Rendimento ora indica CpuProfiler::StartProfiling come Profiler Overhead (1358602).
  • DevTools ha migliorato la compilazione automatica:
    • Origini: completamenti coerenti di qualsiasi parola (1320204).
    • Console: Arrow down seleziona il primo suggerimento e i suggerimenti ricevono Tab suggerimenti (1276960).
  • DevTools ha aggiunto un breakpoint di gestore di eventi per consentirti di mettere in pausa quando apri una finestra Picture in picture del documento (1315352).
  • DevTools ha configurato una soluzione alternativa che mostra correttamente gli elementi Vue2 webpack come JavaScript (1416562).
  • Un'impostazione della console riceve un nome migliore: Espandi automaticamente i messaggi console.trace(). (1139616).

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