Ontdek hoe DevTools eerst mobiel gaat met een nieuwe, gestroomlijnde apparaatmodus die altijd aanstaat. Gebruik de kleurknoppen om snel kleuren aan uw selectors toe te voegen en ontdek wat er binnenkort naar DevTools komt.
Een kijkje in de toekomst van het schrijven
We komen net terug van de Chrome Dev Summit, waar ik je heb laten zien hoe het werken met DevTools er vandaag en in de toekomst uitziet. Normaal gesproken noem ik in deze samenvatting geen features die nog experimenten of zware vooruitgang zijn, maar deze keer maak ik een uitzondering. Als je geen tijd hebt om de hele lezing te bekijken, hier is de essentie:
Apparaatmodus versie 2
We werken nog steeds hard aan deze nieuwe, gedurfde versie van de apparaatmodus , maar we wilden iedereen de kans geven om het uit te proberen, dus hebben we het vandaag op je Canarische Eilanden ingeschakeld. Met de veranderingen duwen we DevTools naar een mobile-first toekomst waarin mobiele ontwikkeling de standaard is en desktopontwikkeling de “add-on”. Verwacht de komende weken meer herhaling met een uitgebreide blogpost als we klaar zijn.
Krachtige animatie-inspectie
De work-in-progress animatie-inspectie geeft u een volledig, gedetailleerd beeld van wat er gebeurt op alles wat beweegt. In plaats van u een overgang van één element tegelijk te laten zien, hebben we heuristieken toegevoegd die complexe animaties groeperen, zodat u zich kunt concentreren op alles wat u ziet. Kijk eens naar de video. We zullen een grotere, op zichzelf staande blogpost aanbieden wanneer we volledig gelanceerd zijn.
Indelingsmodus (voorproefje)
Nog niet helemaal klaar voor prime time, maar veelbelovend is de nieuwe Layout-modus, een functie die ik niet kan wachten om volledig uitgebouwd te zien. De lay-outmodus voegt WYSIWYG-bewerkingsmogelijkheden toe aan DevTools voor elk element op de pagina. Tot nu toe kunnen de hoogte, breedte, opvulling en marges in context worden bewerkt. Het zal iets langer duren voordat we je het kunnen laten proberen, maar we houden je op de hoogte.
Prestatieprofilering met het bijgewerkte tijdlijnpaneel
Als onderdeel van de grotere introductie van het nieuwe RAIL-prestatiemodel zijn er honderden kleinere en grotere wijzigingen aangebracht in het tijdlijnpaneel, en samen transformeren en verbeteren ze het prestatieprofileringsverhaal behoorlijk. Dus in plaats van elke individuele verandering afzonderlijk te laten zien, liet onze eigen Paul Irish ons zien hoe we de prestaties van een site, in dit geval de mobiele site van Hotel Tonight, live op het podium op de juiste manier kunnen debuggen. Tot de nieuw aangekondigde functies behoren de laad- en prestatiefilmstrips , de meegeleverde netwerkwaterval , de treeview-samenvatting en de mogelijkheid om de prestatiekosten per domein en bestand te bekijken.
Voeg eenvoudig voor- en achtergrondkleuren toe aan elk element
Wanneer u een achtergrondkleur of kleureigenschap aan uw element wilde toevoegen, kon u niet zomaar de kleurkiezer openen. In plaats daarvan typen de meesten van jullie iets in als “achtergrond: rood;” elke keer zodat het kleurkiezerpictogram verschijnt en kies vervolgens de gewenste kleur.
We dachten dat we dit konden vereenvoudigen. We hebben twee handige knoppen toegevoegd die verschijnen als u over de rechterbenedenhoek van een selector beweegt, zodat u met één klik een kleur kunt toevoegen en de kiezer kunt openen:
Het beste van de rest
- We hebben veel eerder onroerend goed in het deelvenster Stijl verspild door generieke mediatypen weer te geven. We verbergen dat spul nu voor uw selectors als het niet ongebruikelijk is!
- U kunt nu lang over een CSS-selector in het deelvenster Stijl bewegen om te zien op hoeveel elementen op de pagina deze van toepassing is.
- Heb je het printen nog niet opgegeven? Emulatie van gedrukte media bestaat nog steeds om te zien hoe uw pagina eruit zou zien als deze wordt afgedrukt. We hebben deze zojuist verplaatst naar de Rendering-instellingen.
- Wanneer we een element kiezen om te inspecteren, vouwen we nu automatisch de relevante DOM-subboom uit en sluiten we deze. Moeilijk uit te leggen, zien is geloven .
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