Una serie di funzionalità aggiornate lo ha aggiunto in Chrome DevTools di recente alcune piccole, alcune grandi. Inizieremo con gli aggiornamenti del riquadro Elemento, poi passeremo a parlare di Console, Spostamenti e altro ancora.
Copia delle regole di stile disattivata come commentato
Copiando intere regole CSS nel riquadro Stili, ora saranno inclusi gli stili disattivati, che saranno disponibili negli appunti come commentato. [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 ai tuoi fogli di stile/JavaScript, ma possono anche essere alternative per le strategie di localizzazione nei test WebDriver. [crbug.com/277286]
Visualizza gli stili degli elementi DOM shadow
Ora è possibile esaminare gli stili degli elementi secondari di una radice shadow. [crbug.com/279390]
La funzione copy() della console funziona per gli oggetti
Il metodo copy() dell'API Command Line ora funziona per gli oggetti. Procedi, prova copy({foo:'bar'}) nel riquadro della console e nota come una versione stringa e formattata dell'oggetto è ora presente negli appunti. [crbug.com/289348]
Filtro regex per la console
Filtra i messaggi della console utilizzando espressioni regolari nel riquadro della console. crbug.com/318308]
Rimuovi facilmente i listener di eventi
Prova getEventListeners(document).mousewheel[0]; nel riquadro Console per recuperare il primo listener di eventi della rotellina del mouse nel documento. Proseguendo con questo, prova $_.remove() per rimuovere quel listener di eventi ($_ = valore dell'espressione valutata più di recente). crbug.com/309524
Rimozione degli avvisi CSS
Gli avvisi di tipo "Valore della proprietà CSS non valido" che potresti aver visualizzato sono stati rimossi. Sono in corso gli sforzi per rendere l'implementazione più efficace rispetto a CSS reali, incluse le violazioni dei browser. crbug.com/309982]
Operazioni della cronologia riassunte in un grafico a torta
Il riquadro Cronologia ora contiene un grafico a torta nel riquadro Dettagli che mostra visivamente l'origine dei costi di rendering. Questo ti aiuta a identificare a colpo d'occhio i colli di bottiglia.
Scoprirai che molte delle informazioni che un tempo venivano visualizzate nei popover sono state ora sponsorizzate in un riquadro dedicato. Per visualizzarla, avvia una registrazione di Spostamenti e seleziona un fotogramma, prendi nota del nuovo riquadro Dettagli che contiene un grafico a torta. Nella visualizzazione Frame puoi trovare statistiche interessanti, come la media dei f/s (1000ms/frame duration) per i fotogrammi selezionati. [crbug.com/247786]
Dettagli dell'evento di ridimensionamento delle immagini
Gli eventi di ridimensionamento e decodifica delle immagini nel riquadro Cronologia ora contengono un link al nodo DOM nel riquadro Elementi.
Il link URL immagine indirizza alla risorsa corrispondente nel riquadro Risorse. crbug.com/244159]
Frame GPU
I frame che si verificano nella GPU vengono ora mostrati in alto, sopra quelli nel thread principale. crbug.com/305863]
Ascolta gli ascoltatori 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 a scomparsa
L'apertura del riquadro a scomparsa ora mostra una serie di riquadri, uno dei quali è il riquadro Rendering; utilizzalo per mostrare rettangoli di disegno, misuratore FPS ecc. Questa opzione è abilitata per impostazione predefinita in Impostazioni > "Mostra visualizzazione 'Rendering' nel riquadro a scomparsa della console"
Copia immagine come URL dei dati
I contenuti degli asset immagine nel riquadro Risorse ora possono essere copiati come URI di dati (data:image/png;base64,iVBO...).
Per provarla, individua la risorsa per le immagini all'interno di Frame > [Risorsa] > Immagini, 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 dell'URI dei dati
Se non hai mai pensato che appartengano, ora gli URI dati possono essere filtrati ed esclusi dalla scheda Rete. Seleziona l'icona Filtro
Sono stati corretti i bug relativi ai tempi di rete
Se hai visto che il download della tua immagine richiede 300.000 anni, ci scusiamo per il disagio. ;) La sincronizzazione errata delle risorse di rete è stata corretta. 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 si comporta esattamente come ci si aspetta da Spostamenti o da un profilo CPU. Se ricarichi la pagina mentre DevTools è aperto, la registrazione di rete si avvia automaticamente. Verrà poi disattivata, quindi puoi attivarla se vuoi acquisire l'attività di rete dopo il caricamento pagina. In questo modo è più facile visualizzare la struttura a cascata senza che le ultime richieste di rete diminuiscano i risultati. crbug.com/325878]
Temi DevTools ora disponibili tramite le estensioni
I fogli di stile degli utenti sono ora disponibili tramite gli esperimenti DevTools (casella di controllo: "Consenti temi UI personalizzati") che consente a un'estensione di Chrome di applicare stili personalizzati a DevTools. Per un esempio, vedi Esempio di estensione del tema DevTools. crbug.com/318566]
È tutto per questa edizione del digest DevTools. Se non l'hai già fatto, dai un'occhiata alla versione di Novembre.