Novità di DevTools (Chrome 112)

Sofia Emelianova
Sofia Emelianova

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 riproduzione personalizzata per aprire l'interfaccia utente di riproduzione personalizzata.

UI di riproduzione personalizzata.

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

Problema relativo a Chromium: 1400243.

Registra con selettori di pierce

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

Avvia una nuova registrazione su una pagina con shadow DOM e seleziona Casella di controllo. Pierce in Tipi di selettore da registrare. Registra l'interazione con gli elementi nello shadow DOM e ispeziona il passaggio corrispondente.

Impostando l'app Registratore in modo che utilizzi i selettori di pierce; Selettore Pierce in azione.

Problema relativo a Chromium: 1411188.

Esporta come script Puppeteer con l'analisi Lighthouse

Il Registratore introduce una nuova opzione di esportazione: Puppeteer (inclusa l'analisi 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 Lighthouse).

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

Il report Lighthouse aperto in Chrome.

Scarica le estensioni

Esplorare le opzioni per personalizzare la tua esperienza di registrazione, ad esempio con opzioni di esportazione personalizzate. Per scaricare le estensioni per il Registratore, fai clic su Esporta. Esporta > Recuperare le estensioni in una registrazione.

L'opzione Ottieni estensioni nel menu a discesa Esporta.

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

Problemi relativi a Chromium: 1417104, 1413168.

Elementi > Aggiornamenti degli stili

documentazione CSS

Quante volte al giorno cerchi la documentazione sulle proprietà CSS? Elementi > Il riquadro 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 conosci bene CSS, le descrizioni dei comandi potrebbero essere fastidiose. Per disattivarli tutti, seleziona Casella di controllo. Non mostrare.

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

Problema relativo a Chromium: 1401107.

Supporto della nidificazione dei CSS

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

Problema relativo a Chromium: 1172985.

Contrassegnare i punti di log e i 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é gli script VM<number> creati da Chrome per eseguire qualsiasi porzione 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 del punto di log che apre l&#39;editor dei punti di interruzione.

Problema relativo a Chromium: 1027458.

Ignora gli script non pertinenti durante il debug

Per concentrarti sulle parti più importanti del codice, ora puoi aggiungere script non pertinenti all'Elenco di persone da ignorare direttamente dalla struttura di file in Origini > Riquadro Pagina.

Fai clic con il pulsante destro del mouse su qualsiasi script o cartella e seleziona una delle opzioni relative a Ignora. Potresti visualizzare opzioni per aggiungere o rimuovere lo script o la cartella da e verso l'elenco. Il Debugger ignora gli script aggiunti all'elenco e li omette nello stack di chiamate.

Menu contestuali di una cartella e uno script con opzioni relative a Ignora.

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

Le cartelle e gli script inseriti nell&#39;elenco di elementi da ignorare non sono selezionabili. Puoi nasconderli con un&#39;opzione sperimentale nel menu a discesa Altre opzioni.

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

Problema relativo a Chromium: 883325.

Ritiro di Profiler JavaScript avviato

Già nel Chrome 58, il team DevTools aveva pianificato di ritirare JavaScript Profiler e chiedere agli sviluppatori Node.js e Deno di utilizzare il riquadro Prestazioni per la profilazione delle prestazioni della CPU JavaScript.

Questa versione di DevTools (112) avvia il ritiro di Profilo JavaScript in quattro fasi. Il riquadro Profilo JavaScript ora mostra il banner di avviso corrispondente.

Banner sul ritiro nella parte superiore di Profiler.

Invece di Profiler, utilizza il riquadro Performance per profilare la CPU.

Scopri di più e fornisci il tuo feedback nel documento RFC corrispondente e in crbug.com/1354548.

Problema relativo a Chromium: 1417647.

Emula contrasto ridotto

La scheda Rendering aggiunge una nuova opzione all'elenco Emula carenze visive: Contrasto ridotto. Con questa opzione, puoi scoprire come il tuo sito web viene visualizzato dagli utenti riducendo la sensibilità al contrasto.

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

Tieni presente che le opzioni dell'elenco sono state aggiornate per indicare l'insensibilità ai colori rappresentata dalle opzioni.

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

Problemi relativi a Chromium: 1412719, 1412721.

Faro 10

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 10.0.1. Per maggiori dettagli, vedi Novità di Lighthouse 10.0.1.

Per apprendere 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 relativo a Chromium: 772558.

Un avviso della console che richiede la rimozione del gestore di recupero del service worker autonomo

Chrome 112 ignora i gestori del recupero dei service worker inattivi (nessuna operazione) perché possono rallentare la navigazione, ma non hanno uno scopo. Per consentire al tuo sito web di essere quializzabile come app web progressiva, questi gestori non sono più tenuti a farlo.

Ora la console mostra un avviso se trova un gestore di recupero autonomo sul tuo sito web. Valuta la possibilità di rimuoverlo.

Un gestore di recupero autonomo e l&#39;avviso corrispondente nella console.

Problema relativo a Chromium: 1347319.

Varie in evidenza

Di seguito sono riportate alcune importanti correzioni di 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 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.