DevTools worden donker, @keyframe bewerken en slimmer automatisch aanvullen

Leer hoe u met DevTools minder hoeft te typen dankzij de slimmere automatische aanvulling van de Console, hoe u @keyframe regels rechtstreeks in het deelvenster Stijlen kunt bewerken, hoe u plezier kunt hebben met aangepaste CSS-variabelen en hoe u zich kunt aansluiten bij de duistere kant.

Een slimmere automatische aanvulling in uw console

Als je net als ik en vele anderen bent, typ je een commando in de console om fouten in je app op te sporen, zie je dat het niet werkt, herhaal je het en typ je het opnieuw, en opnieuw, en opnieuw. Om u daarbij te helpen, vullen we nu automatisch de volledige verklaringen aan die u eerder hebt getypt, zoals:

Automatisch aanvullen

Bewerk @keyframe-regels rechtstreeks in het deelvenster Stijlen

Toen we de animatie-inspecteur en de easing-editor in DevTools introduceerden, was deze beperkt tot overgangen, omdat we nooit @keyframe gebaseerde CSS-animaties in het stijlvenster lieten zien. Ik ben blij om te kunnen zeggen dat dat nu tot het verleden behoort, dus ga los! Bekijk onze videotweet voor een voorproefje.

Ondersteuning voor aangepaste CSS-eigenschappen

Aangepaste CSS-eigenschappen in DevTools

Er zit veel goeds in CSS, en een daarvan zijn aangepaste variabelen, die in Chrome 49 worden gelanceerd. We hebben ervoor gezorgd dat we volledige ondersteuning in DevTools hebben opgenomen, dus als je al eerder variabelen in Sass hebt gebruikt, probeer dan de native variabelen , omdat u hiermee eigenschappen direct in het deelvenster Stijlen kunt bewerken en afhankelijke elementen onmiddellijk kunt bijwerken.

Een donker thema voor DevTools

Donker thema in actie

Uiteindelijk hebben we toegegeven aan een verzoek dat we de afgelopen jaren tientallen keren hebben gehoord: je kunt nu de donkere kant kiezen in DevTools. Ga naar de DevTools-instellingen, stel het thema in op donker en geniet ervan. Ik zou zeggen dat dit nog in de bètafase is, omdat een groot deel ervan automatisch wordt gegenereerd, dus als je gebieden ziet waarop verbeteringen mogelijk zijn, laat het ons zeker weten !

Het beste van de rest

  • De consolelade klapt nu automatisch samen wanneer u op het volledige Console-tabblad klikt.
  • De bestandsboom in Bronnen heeft een mooie revisie gekregen met nieuwe pictogrammen en nieuwe groeperingsfunctionaliteit

Laat ons zoals altijd weten wat je ervan vindt via Twitter of de reacties hieronder, en stuur bugs naar crbug.com/new .

Tot volgende maand!
Paul Bakaus en het DevTools-team