Novità di DevTools (Chrome 112)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Aggiornamenti su Registratore

Supporto delle estensioni di riproduzione

Il Registratore introduce il supporto per 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.

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

Registra con selettori di pierce

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. Strafiga in Tipi di selettori da registrare. Registra la tua interazione con gli elementi nello shadow DOM ed esamina il passaggio corrispondente.

Impostazione dell'app Registratore in modo che utilizzi i selettori di pierce; selettore di pierce in azione.

Problema di Chromium: 1411188.

Esporta come script Puppeteer con l'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.

Scarica le estensioni

Esplora le opzioni per personalizzare l'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 Registratore. Non vediamo l'ora di includere il tuo canale nell'elenco.

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

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

Se conosci bene CSS, le descrizioni dei comandi potrebbero essere fastidiose. Per disattivarli tutti, seleziona Casella di controllo. Non mostrare.

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

Problema relativo a 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

Con un ulteriore miglioramento dell'UX migliorata dei punti di interruzione, nella console ora vengono contrassegnati i messaggi attivati da punti di interruzione:

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

La console ora fornisce link di ancoraggio corretti ai punti di interruzione nei file di origine anziché agli script VM<number> creati da Chrome per eseguire qualsiasi porzione di 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 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;ignoramento.

Tutti gli script e le cartelle inclusi nell'elenco di elementi da ignorare 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 Chrome 58, 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.

Invece di Profiler, utilizza il riquadro Performance per profilare la 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 come appare il tuo sito web alle persone con ridotta sensibilità al contrasto.

L&#39;opzione di contrasto ridotto selezionata nella funzionalità &quot;Esegui l&#39;emulazione di deficit visivi&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.

Faro 10

Nel riquadro Lighthouse ora è in esecuzione 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 ignora i gestori del recupero dei service worker inattivi (nessuna operazione) perché possono 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 > Punti di interruzione ora mostra i percorsi dei file differenziati accanto a 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 degli 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 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, 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.