Digest DevTools - Modifiche efficienti degli elementi, debug dei service worker e tonalità del material design

Paul Bakaus
Paul Bakaus

Utilizza il nuovo menu contestuale del riquadro DOM per modificare i nodi in modo efficiente. Esegui il debug dei worker dei servizi direttamente tramite il riquadro Risorse. Scegli tra tutte le tonalità di Material Design nel selettore dei colori. Blackbox le librerie JS più facilmente.

Il nuovo menu contestuale migliorato del riquadro DOM

Il nuovo menu contestuale 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 stai utilizzando un trackpad e non vuoi preoccuparti di 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.

Service worker nelle risorse

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 dei 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 effettivamente una pagina intera, hai inevitabilmente bisogno dell'accesso completo a tutte le tonalità Material Design, quindi le abbiamo integrate.

Per visualizzare le tonalità, tieni premuto uno dei colori primari e fai clic su una tonalità.

Librerie JavaScript Blackbox più facilmente nelle impostazioni

Il black box 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:

Blackboxing

Il meglio del resto

  • Manca l'accesso 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? L'opzione 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 nei commenti qui sotto e invia i bug a crbug.com/new.

Al prossimo mese!
Paul Bakaus e il team di DevTools