Di recente, in DevTools di Chrome sono state introdotte diverse funzionalità aggiornate, alcune piccole, altre grandi. Inizieremo con gli aggiornamenti del riquadro Elementi e poi parleremo di Console, Sequenza temporale e altro ancora.
Le regole di stile disattivate vengono copiate come commentate
La copia di intere regole CSS nel riquadro Stili ora includerà gli stili disattivati, che verranno visualizzati nella clipboard come commentati. [crbug.com/316532]
Copia come percorso CSS
"Copia come percorso CSS" è ora disponibile come voce di menu per i nodi DOM nel riquadro Elementi (simile alla voce di menu Copia XPath).
La generazione di selettori CSS non deve essere limitata agli stili CSS/JavaScript, ma può essere anche un'alternativa per le strategie di locator nei test WebDriver. [crbug.com/277286]
Visualizzare gli stili degli elementi shadow DOM
Ora è possibile ispezionare gli stili degli elementi secondari di un elemento radice ombra. [crbug.com/279390]
La funzione copy() della console funziona per gli oggetti
Il metodo copy() dell'API a riga di comando ora funziona per gli oggetti. Prova a digitare copy({foo:'bar'}) nel riquadro della console e noterai che una versione in stringa e formattata dell'oggetto è ora nella clipboard. [crbug.com/289348]
Filtro regex per la console
Filtra i messaggi della console utilizzando espressioni regolari nel riquadro della console. crbug.com/318308]
Rimuovere facilmente i listener di eventi
Prova getEventListeners(document).mousewheel[0]; nel riquadro della console per recuperare il primo ascoltatore di eventi della rotellina del mouse nel documento. A questo punto, prova $_.remove(); per rimuovere l'ascoltatore di eventi ($_ = valore dell'espressione valutata più di recente). crbug.com/309524]
Rimozione degli avvisi CSS
Gli avvisi di tipo "Valore proprietà CSS non valido" che potresti aver visto sono stati rimossi. Sono in corso sforzi per rendere l'implementazione più solida contro i CSS reali, inclusi gli hack del browser. crbug.com/309982]
Operazioni della cronologia riassunte in un grafico a torta
Il riquadro Spostamenti ora contiene un grafico a torta nel riquadro Dettagli che mostra visivamente l'origine dei costi di rendering, consentendoti di identificare immediatamente i colli di bottiglia.
Scoprirai che molte delle informazioni che in precedenza venivano visualizzate nei popup ora sono state promosse in un riquadro dedicato. Per visualizzare, avvia una registrazione di Spostamenti e seleziona un fotogramma. Tieni presente il nuovo riquadro Dettagli che contiene un grafico a torta. Nella visualizzazione Frame, vengono visualizzate statistiche interessanti, come i fotogrammi al secondo (FPS) medi(1000ms/frame duration) per i fotogrammi selezionati. [crbug.com/247786]
Dettagli evento di ridimensionamento delle immagini
Gli eventi di ridimensionamento e decodifica delle immagini nel riquadro Spostamenti ora contengono un link al nodo DOM nel riquadro Elementi.
Il link all'URL immagine ti reindirizza alla risorsa corrispondente nel riquadro Risorse. crbug.com/244159]
Frame GPU
I frame che si verificano sulla GPU ora vengono visualizzati in alto, sopra i frame del thread principale. crbug.com/305863]
Interruzioni sui listener popstate
'popstate' è ora disponibile come punto di interruzione del listener di eventi nella barra laterale del riquadro Origini. [crbug.com/88112]
Impostazioni di rendering disponibili nel riquadro laterale
L'apertura del riquadro ora presenta una serie di riquadri, uno dei quali è il riquadro di rendering, che puoi utilizzare per mostrare rettangoli di pittura, misuratore FPS e così via. Questa opzione è attivata per impostazione predefinita in Impostazioni > "Mostra la visualizzazione "Rendering" nel riquadro della console"
Copia immagine come URL di dati
Ora è possibile copiare i contenuti degli asset immagine nel riquadro Risorse come URI di dati (data:image/png;base64,iVBO...).
Per provare questa funzionalità, individua la risorsa immagine in Frame > [Risorsa] > Immagini e fai clic con il tasto destro del mouse sull'anteprima dell'immagine per accedere al menu contestuale, quindi seleziona "Copia immagine come URL dati". crbug.com/321132]
Filtro degli URI dei dati
Se non avevi mai pensato che appartenessero a questa categoria, ora gli URI dati possono essere esclusi dalla scheda Rete. Seleziona l'icona Filtro
Correzione di bug relativi alla temporizzazione della rete
Se hai notato che il download della tua immagine sembrava richiedere 300.000 anni, ci scusiamo. ;) Questi tempi errati per le risorse di rete sono stati corretti. crbug.com/309570]
Il comportamento della registrazione di rete offre un maggiore controllo
Il comportamento della rete di registrazione è leggermente diverso. Innanzitutto, il pulsante di registrazione funziona come ci si aspetterebbe da Spostamenti o da un profilo della CPU. Come previsto, se ricarichi la pagina mentre DevTools è aperto, la registrazione della rete inizierà automaticamente. Verrà disattivata, quindi se vuoi acquisire l'attività di rete dopo il caricamento della pagina, riattivala. In questo modo è più facile visualizzare la struttura a cascata senza che le richieste di rete in ritardo alterino i risultati. crbug.com/325878]
I temi di DevTools ora sono disponibili tramite le estensioni
Le stylesheet utente sono ora disponibili tramite gli esperimenti di DevTools (casella di controllo "Consenti temi dell'interfaccia utente personalizzati"), che consente a un'estensione di Chrome di applicare stili personalizzati a DevTools. Per un esempio, consulta Sample DevTools Theme Extension. crbug.com/318566]
Questo è tutto per questa edizione del digest di DevTools. Se non l'hai ancora fatto, dai un'occhiata all'edizione di novembre.