DevTools non funziona, modifica tramite @keyframe e un completamento automatico più intelligente

Paolo Bakaus
Paul Bakaus

Scopri in che modo DevTools ti aiuta a digitare meno testo grazie al completamento automatico della console più intelligente, come modificare le regole @keyframe direttamente nel riquadro Stili, come divertirti con le variabili personalizzate CSS e come entrare nel lato oscuro.

Un completamento automatico più intelligente nella tua console

Se sei come me e tanti altri, digiti un comando nella console per eseguire il debug della tua app, controlla che non funzioni, esegui l'iterazione e digitala di nuovo e ancora e ancora. Per aiutarti, ora completeremo automaticamente le frasi che hai digitato in precedenza, ad esempio:

Completamento automatico

Modificare direttamente le regole @keyframe nel riquadro Stili

Quando abbiamo introdotto lo strumento di controllo delle animazioni e l'editor di easing in DevTools, erano limitati alle transizioni perché non abbiamo mai mostrato animazioni CSS basate su @keyframe nel riquadro Stile. Sono felice di dire che questa è stata un ricordo del passato, quindi scatenati. Guarda il nostro video tweet per un'anteprima.

Supporto delle proprietà CSS personalizzate

Proprietà CSS personalizzate in DevTools

Sono in arrivo diverse novità in CSS, tra cui le variabili personalizzate, che verranno lanciate in Chrome 49. Abbiamo fatto in modo di includere il supporto completo in DevTools, quindi se in precedenza utilizzavi le variabili in Sass, prova quelle native, poiché ti consentono di modificare le proprietà all'istante nel riquadro Stili e aggiornare immediatamente gli elementi dipendenti.

Un tema scuro per DevTools

Tema scuro in azione

Alla fine abbiamo ceduto a una richiesta che abbiamo ricevuto decine di volte negli ultimi due anni: ora puoi scegliere il lato oscuro in DevTools. Vai alle impostazioni DevTools, imposta il tema su scuro e divertiti. Direi che questa versione è ancora in versione beta, poiché gran parte è generata automaticamente, quindi se noti aree che potrebbero migliorare, non esitare a contattarci.

Il meglio del resto

  • Il riquadro a scomparsa della console ora si comprime automaticamente quando fai clic sull'intera scheda della console.
  • La struttura dei file in Sorgenti è stata aggiornata con nuove icone e nuove funzionalità di raggruppamento

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