Utilizza il nuovo menu contestuale del riquadro DOM per modificare in modo efficiente i nodi. Esegui il debug dei worker dei servizi direttamente tramite il riquadro Risorse. Scegli tra tutte le tonalità di Material Design nel selettore dei colori. Librerie JS blackbox 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 del tasto destro del mouse deve essere sgombrato e riorganizzato.
Ora è molto più facile nascondere o eliminare rapidamente un elemento, attivare un determinato stato come :active o :hover o modificarne il codice HTML. Se utilizzi un trackpad e non vuoi fare clic con il tasto destro del mouse, fai clic sui tre puntini accanto all'elemento selezionato.
Eseguire il debug dei service worker tramite il riquadro Risorse
I worker di servizio sono fantastici una volta configurati, ma all'inizio possono essere complicati da capire. Il problema è stato aggravato dal fatto che per il debug era necessario uscire da DevTools e aprire chrome://serviceworker-internals/ in una nuova finestra del browser.
Non più. Ora puoi eseguire il debug dei worker di servizio per il dominio corrente direttamente dal riquadro Risorse. È ancora in fase di sviluppo, ma rappresenta già un notevole miglioramento rispetto allo status quo precedente.
Tutti i colori: tonalità di Material Design nel selettore di colori
Alcune settimane fa, abbiamo aggiunto la tavolozza Material Design al selettore di colori per offrire colori primari e audaci pronti all'uso. Per progettare una pagina completa, devi inevitabilmente avere accesso completo a tutte le tonalità di Material Design, quindi le abbiamo integrate.
Per visualizzare le tonalità, tieni premuto uno dei colori primari e fai clic su una tonalità.
Eseguire il blackbox delle librerie JavaScript più facilmente nelle impostazioni
Il black boxing di JavaScript è in circolazione da un po' di tempo, ma non era molto facile da rilevare. Si tratta di una funzionalità che ti consente di eseguire il blackbox di uno script in una pagina per concentrarti solo sul codice creato (e nascondere tutto il codice di wrapping).
Ora è stata spostata in Impostazioni. Prova:
Il meglio del resto
- Non riesci ad accedere ai pulsanti di attivazione/disattivazione di rendering? Le impostazioni di rendering sono state spostate nel menu principale di DevTools (in "Altri strumenti"). Oltre ai soliti strumenti (ad es. il misuratore FPS), abbiamo spostato anche "Esegui l'emulazione di supporti di stampa".
- Non vuoi più digitare chrome://inspect nell'Omnibox? Ispeziona dispositivi ora è disponibile anche nel nuovo menu principale in "Altri strumenti".
- Hai chiuso accidentalmente una di queste schede del riquadro a scomparsa, ad esempio Rendering o Ricerca? Ora puoi riaprirle con il nuovo menu a sinistra.
Come sempre, facci sapere cosa ne pensi tramite Twitter o i commenti di seguito e invia i bug all'indirizzo crbug.com/new.
A presto!
Paul Bakaus e il team di DevTools