Utilizza il nuovo menu contestuale del riquadro DOM per modificare i nodi in modo efficiente. Esegui il debug dei worker di servizi direttamente tramite il riquadro Risorse. Scegli tra tutte le tonalità di Material Design nel selettore colori. le librerie Blackbox JS più facilmente.
Il nuovo menu contestuale migliorato del riquadro DOM
Abbiamo analizzato le azioni più utilizzate nel riquadro DOM e abbiamo concluso che il menu contestuale con il tasto destro del mouse deve essere ordinato e riorganizzato.
Ora è molto più facile nascondere o eliminare rapidamente un elemento, attivare un determinato stato, ad esempio :active o :hover, oppure modificare il codice HTML. Se sei su un trackpad e non ti interessa fare clic con il tasto destro del mouse, fai clic sui tre puntini accanto all'elemento selezionato.
Esegui il debug dei service worker tramite il riquadro Risorse
I Service worker sono fantastici una volta che li hai configurati, ma possono essere difficili da comprendere fin da subito. Ciò è stato peggiorato dal fatto che per eseguirne il debug era necessario uscire dai DevTools e aprire chrome://serviceworker-internals/ in una nuova finestra del browser.
Ora non più! Ora puoi eseguire il debug dei service worker per il dominio corrente direttamente dal riquadro Risorse. È ancora in fase di sviluppo, ma è già un netto miglioramento rispetto allo status quo precedente.
Tutti i colori: tonalità di material design nel selettore colori
Qualche settimana fa abbiamo aggiunto la tavolozza di Material Design al selettore colori per offrire subito colori primari e audaci. Per progettare una pagina intera, inevitabilmente hai bisogno dell'accesso completo a tutte le tonalità di Material Design, quindi le abbiamo integrate.
Per visualizzare le tonalità, premi a lungo su uno dei colori primari e fai clic su una tonalità.
Librerie JavaScript Blackbox più facilmente nelle impostazioni
Il Blackboxing di JavaScript esiste da un po' di tempo, ma non era molto facile da scoprire. Si tratta di una funzionalità che ti consente di inserire nella lista nera uno script in una pagina per concentrarti solo sul codice creato (e nascondere tutto il codice di wrapping).
L'abbiamo spostata nelle Impostazioni. Provalo:
Il meglio del resto
- Non hai accesso ai pulsanti di attivazione/disattivazione del rendering? Le impostazioni di rendering sono state spostate nel menu principale di DevTools (nella sezione "Altri strumenti"). Oltre ai problemi più comuni (come il misuratore di FPS), abbiamo anche spostato la voce "Emula supporti di stampa".
- Non vuoi più digitare chrome://inspect nella omnibox? L'opzione Ispeziona dispositivi è ora disponibile anche nel nuovo menu principale in "Altri strumenti".
- Hai chiuso per sbaglio una di queste schede del riquadro a scomparsa chiudibili come Rendering o Ricerca? Ora puoi riaprirle con il nuovo menu a sinistra.
Come sempre, facci sapere cosa ne pensi tramite Twitter o segui i commenti riportati di seguito e invia i bug all'indirizzo crbug.com/new.
Al prossimo mese!
Paul Bakaus e il team DevTools