DevTools-nieuws, zo vers als maar kan
Het eerste nieuwsitem in dit bericht is een kleine meta – het is deze update zelf! Zo nu en dan, maar minstens één keer per maand, zal ik samenvatten wat er gebeurt in de wereld van Chrome DevTools, vers van de pers.
En als ik vers zeg, meen ik het: ik zal het hebben over nieuwe functies die zojuist in Chrome Canary zijn gearriveerd, dus als je liever in stabiel land blijft, is dat ook cool. Maar als je avontuurlijk bent en aan de top wilt blijven, dan zijn deze berichten iets voor jou. Naast de nieuwste functies en bugfixes, vind je aan het einde van elk bericht een Community Heartbeat -sectie, waarin de beste bijdrage wordt belicht die jullie, onze geliefde gebruikers, hebben bijgedragen.
Laten we zonder verder oponthoud in het actuele nieuws duiken.
Nieuw in DevTools
Filmstripachtige screenshots in Netwerk en Tijdlijn
Nog maar een week geleden hebben we een belangrijke nieuwe functie uit het experiment gehaald: de mogelijkheid om schermafbeeldingen van de pagina te maken op zowel het tabblad Netwerk als Tijdlijn.
Klik in het netwerkpaneel op het kleine camerapictogram om het vastleggen van frames in te schakelen en laad vervolgens de pagina opnieuw om de opname te activeren. Afgezien van schermafbeeldingen die zijn gemaakt met andere tools zoals WebPageTest , tonen we momenteel alleen frames die daadwerkelijk uit verf komen.
Terwijl dubbelklikken op een van de frames een ingezoomde weergave toont (gebruik vervolgens de pijlen naar links/rechts om te navigeren), worden er lijnen over het paneel en de tijdlijn weergegeven als u erover zweeft om precies te visualiseren wanneer het frame is vastgelegd, zodat u kunt correleren met de belasting reeks. Dit maakt het oplossen van veel voorkomende laadproblemen, zoals het blokkeren van weblettertypen, veel eenvoudiger.
In het Tijdlijnpaneel kunt u het maken van screenshots inschakelen door het selectievakje 'Screenshots' in de bovenste werkbalk in te schakelen. De dingen werken hier een beetje anders vergeleken met het netwerkpaneel: in dit geval proberen we zo vaak mogelijk vast te leggen – ongeacht de daadwerkelijke verven – om de genoemde schermafbeeldingen op een lineaire tijdschaal te kunnen plaatsen die correleert met de andere rijen in Tijdlijn. In plaats van te moeten dubbelklikken om een voorbeeld weer te geven, verschijnen ingezoomde frames bij het zweven.
Omdat de twee qua functionaliteit en UX een beetje uit de pas lopen, willen we je aanmoedigen om de functie(s) uit te proberen en eventuele feedback te geven via tickets op crbug.com/new of via tweet naar @ ChromeDevTools .
Netwerkbeperking in het netwerkpaneel
Netwerkbeperking , een functie die we hebben toegevoegd bij de introductie van onze Apparaatmodus , heeft zijn tweede thuis gevonden in de werkbalk van het Netwerkpaneel, zodat u zich op één plek kunt concentreren op netwerkoptimalisaties.
Dit nieuwe huis is echter slechts een spiegel: het is nog steeds beschikbaar vanuit de apparaatmodus, omdat het simuleren van slechte connectiviteit nog steeds van groot belang is bij het werken aan het responsief maken van uw site.
Tot slot, ben jij een van die arme zielen die zich hebben afgevraagd waarom je internetverbinding verbroken wordt na een lange dag op het werk, om er vervolgens achter te komen dat je vergeten bent netwerkbeperking uit te schakelen? Op het tabblad Netwerkpaneel wordt nu een waarschuwingspictogram weergegeven wanneer netwerkbeperking is ingeschakeld.
Diverse weetjes
- Haatte je die rare cirkels op de netwerktijdlijn? Wij ook. Dit zijn de tijdstippen waarop een frame (in de nieuwe filmstrook) werd vastgelegd . Nu verschijnen ze als lijnen als u met de muis beweegt .
- Apparaatmodus behoudt nu de oriëntatie wanneer u tussen apparaten schakelt
Gemeenschapshartslag
Down and dirty met Chrome DevTools
Bret Little heeft deze leuke kleine walkthrough-cursus uitgebracht die je kennis laat maken met de basisfunctionaliteit van DevTools, maar ook veel diepgaande tips en trucs biedt. Absoluut nuttige informatie daar, en meer DevTools-documenten kunnen nooit kwaad!
Een DevTools-IDE...?!
Kenneth Auchenberg, webontwikkelaar en DevTools-liefhebber, ontwikkelde een paar maanden geleden een proof-of-concept standalone DevTools-app, en op de een of andere manier haalde zijn blogpost deze week opnieuw (hacker)nieuws.
Het omzetten van DevTools in een volwaardige IDE is een leuk idee, waar veel van onze teamleden al eerder van hebben gedroomd, maar het zou ook een project van epische proporties zijn.
Wat denk je? Is de DevTools IDE een droom of kun je het zien uitkomen? Hoe zou het eruit moeten zien? Laat het ons weten in de reacties!
Tot snel!
Paul Bakaus en het DevTools-team