Share
ontkenning: Ik werk voor Microsoft Corporation.
In januari heb ik de functies van de F12-ontwikkelaarstools van Internet Explorer 10 doorgenomen. De recente release van Windows 8.1 Preview van Microsoft brengt niet alleen een update van Internet Explorer (nu bij v11) met zich mee, maar ook een welkome vernieuwing van de F12 Developer Tools. Dit laatste is vooral belangrijk omdat ontwikkelaars afhankelijk zijn van hen om sitegerelateerde problemen binnen IE op te lossen. Tot nu toe hebben de hulpprogramma's de meeste gevallen van foutopsporing opgelost, maar het is duidelijk dat naarmate sites complexer worden, ontwikkelaars rijkere tools nodig hebben om mee te werken. Deze update heeft tot doel een frisse blik en uitgebreide mogelijkheden voor ontwikkelaars te bieden met een sterke focus op het volgende:
Sommige van de updates zijn eenvoudigere functies die bedoeld zijn om de ontwikkelaarsworkflow te stroomlijnen (bijvoorbeeld element breadcrumbs), terwijl sommige updates een dramatisch effect hebben op het verbeteren van de prestaties en weergave van web-apps..
In dit bericht zullen we enkele van de nieuwste updates en functies van de IE11 F12 Developer Tools doornemen en in sommige gevallen laat ik je de duidelijke verschillen in functies van vorige releases zien.
Sinds het begin hebben de F12-tools een redelijk consistente gebruikersinterface behouden met behulp van vervolgkeuzemenu's en een op tabs gebaseerde metafoor om de verschillende beschikbare opties te presenteren. Maar sommige neten die altijd in de weg leken te liggen, waren dingen zoals de tools die tijdens een foutopsporingssessie in hun eigen venster tevoorschijn kwamen en de tabbladen die kostbaar verticaal onroerend goed innamen. Met IE11 zijn de F12-hulpmiddelen sterk opnieuw ontworpen om de gebruikersinterface intuïtiever te maken met een op grafische weergave gebaseerd navigatiesysteem dat als een bladerend lint aan de linkerkant van het foutopsporingsvenster is geplaatst:
De menu's die werden gebruikt om de bovenkant van het gereedschap te omlijnen, zijn verwijderd om meer duidelijkheid te bieden in de interface voor foutopsporing en om onroerend goed vrij te maken om mee te werken. Bovendien is het ontwerp van de debugger zelf sterk vernieuwd, weg van het breken van een Windows 7 UI-stijl naar een meer moderne Windows 8-look-and-feel. U ziet het grote verschil hieronder:
De nieuwe gebruikersinterface is duidelijk meer consistent met de moderne elementen die in Windows 8 zijn geïntroduceerd.
Hoewel de originele DOM-inspectietool een aardige ervaring bood, ontbrak het enkele belangrijke functies. De belangrijkste pijnpunten voor mij waren het gebrek aan live DOM-updates, de weergavevolgorde van CSS-stijlen en het onvermogen om gebeurtenissen te zien die zijn gekoppeld aan DOM-elementen. Gelukkig zijn deze nu behandeld in deze update.
Omdat ik me zo veel concentreer op JavaScript, was het bijzonder frustrerend om gekoppelde gebeurtenissen te vinden die veel op console gebaseerde foutopsporingscode en trial-and-error vereisten om de geclaimde event / methode-combinatie vast te leggen. Als u naar de onderstaande schermafbeelding kijkt, kunt u zien hoe ik op een specifiek element kan klikken, de gebeurtenis kan bekijken die eraan is gekoppeld en de methode die wordt aangeroepen wanneer de gebeurtenis wordt gestart. Dit is een enorme tijdwinst vanuit het oogpunt van foutopsporing.
En hoewel het misschien voor de hand liggend lijkt, heeft een kleine maar belangrijke wijziging in de manier waarop de tools de CSS weergeven die op een element is toegepast, de dingen alleen maar aanzienlijk eenvoudiger gemaakt. Voorafgaand aan deze update zouden de F12-tools eerst overerfde stijlen weergeven, waardoor je naar beneden moet scrollen in het deelvenster met stijlen om naar de daadwerkelijk gebruikte stijl voor het element te gaan.
Het team heeft de weergave bijgewerkt, zodat de meest recente stijlen eerst worden weergegeven, wat naar mijn mening een stuk logischer is, vooral vanuit het oogpunt van foutopsporing:
Enkele andere geweldige nieuwe functies die zeker leuk zijn om te hebben zijn:
Eerder moest u de F12-hulpmiddelen openen, op de DOM-inspectiepijl klikken en op een element klikken. Dit stroomlijnt de dingen een beetje en brengt die ervaring op een lijn met andere tools voor foutopsporing.
Het breadcrumb biedt een intuïtieve manier om de hiërarchische structuur van een DOM-element te doorzoeken, zodat u eenvoudig op elk onderdeel van het breadcrumb kunt klikken om het individuele bovenliggende element op te roepen:
Met de nieuwe Intellisense-stijlfunctie krijgt u bij het bewerken van een stijl of het toevoegen van een nieuwe regel onmiddellijk een pop-up die u snel toegang geeft tot CSS-regels en -waarden. Hoewel sommigen van jullie CSS-encyclopedieën zijn, waardeer ik dat ik ze niet allemaal hoef te onthouden. :)
Als laatste, met DnD in de DOM-verkenner, kunt u interactief testen hoe uw elementen er uitzien en reageren wanneer u hun positie binnen de pagina-indeling verplaatst. De wijzigingen worden live doorgevoerd, zodat u onmiddellijk feedback ontvangt terwijl u uw element herpositioneert.
Er is VEEL meer code aan de clientzijde dan ooit tevoren. Frameworks zoals Ember.js en Angular maken het voor ontwikkelaars aanzienlijk eenvoudiger om webapps met één pagina te bouwen en ontwikkelaars maken gebruik van op HTML5 gebaseerde functies om meeslepende games te bouwen die hoge framesnelheden en reactietijden vereisen. Daarmee komen een hele reeks overwegingen rond de paginaprestaties en de nieuwe F12-tools bieden een nieuw hulpmiddel om de responsiviteit van uw gebruikersinterface te profileren en te meten. De UI-reactiviteitstool is een profiler waarmee u framerates en CPU-gebruik kunt meten om problemen met de UI-prestaties op te sporen.
Door de profiler te starten, kan ik bijhouden hoe mijn CPU reageert op mijn pagina en wat de visuele doorvoer (AKA-frames per seconde) is als verschillende punten in de laadcyclus van de pagina.
Het paneel met details over de tijdlijn biedt me nog fijnere details over hoe specifieke gebeurtenissen of netwerkverzoeken van invloed waren op de prestaties van de pagina, waardoor ik dieper op problemen kon ingaan en aanpassingen kon maken om de prestaties van mijn site te verbeteren.
Door naar elk element van de tijdlijn te kijken, kunt u zien hoe specifieke acties, bijvoorbeeld styling, de weergaveprestaties kunnen beïnvloeden.
Je kunt je voorstellen hoe onschatbaar deze gegevens zijn, in het bijzonder voor game-ontwikkelaars die gebruik willen maken van native browsermogelijkheden voor gaming en gewend zijn aan robuuste foutopsporingstools in andere op plug-ins gebaseerde ontwikkeltools zoals Flash.
Van alle veranderingen waren de meest impactvolle die voor de script-debugger, vooral omdat ze me hielpen de woede te voorkomen die ik voelde toen ik die wilde gebruiken. Het was in de eerste plaats een UX-probleem, omdat op het moment dat u ervoor koos om de debugger uit te voeren, het hele gereedschapspaneel van het browservenster zou verdwijnen en in zijn eigen onafhankelijke pop-upvenster zou verschijnen. Het was op zijn zachtst gezegd een lastige ervaring. Deze update lost dat op en zorgt ervoor dat de debugger goed op zijn plaats blijft.
Een andere geweldige verbetering is het gebruik van een tabmetafoor voor het weergeven van elk geopend bestand dat u wilt debuggen. De vorige versie van de tool dwong je om elk bestand dat je nodig had om te debuggen opnieuw te openen. De nieuwe versie toont een tabblad voor elk bestand waarmee u werkt, waardoor het navigeren aanzienlijk eenvoudiger wordt.
Bovendien zijn opties die over het algemeen begraven lagen in contextmenu's nu duidelijk gemarkeerd en gemakkelijk vindbaar. Het is verbazingwekkend hoe vaak ontwikkelaars verrast waren toen ik hen de mooie afdrukfunctie liet zien voor het formatteren van JavaScript, hoewel het daar sinds IE8 al in zat. De functie wordt nu gemarkeerd via een pictogram boven in het foutopsporingsvenster naast het pictogram voor woordomslag.
Last but not least, vergeet het maar console.log (). De nieuwe tools ondersteunen Tracepoints nu eenvoudig, zodat u specifieke waarden kunt controleren op dezelfde manier als via console.log ().
Pegging-geheugenproblemen zijn altijd een rem geweest, vooral als het een traag geheugenverliesprobleem is. De nieuwe F12-tools willen dit aanpakken met zijn nieuwe geheugenprofiler. Met dit hulpprogramma kunt u momentopnamen maken van het geheugengebruik van uw site of app gedurende een bepaalde periode, zodat u kunt vaststellen welke acties of gebieden van uw app mogelijk de oorzaak van het probleem zijn..
Door een basislijnopname van uw geheugenvoetafdruk te maken, gevolgd door daaropvolgende momentopnamen, kunt u de verzamelde gegevens vergelijken om het aantal actieve objecten te bepalen en welke typen objecten aanhouden. Dit omvat HTML-elementen, DOM-knooppunten en JavaScript-objecten en u kunt een drill-down maken in de vergelijkingen van de snapshots om de verandering in het geheugen ertussen te zien voor afzonderlijke objecten.
Je bent waarschijnlijk maar al te bekend met de complexe vervolgkeuzes "Browser Mode" en "Document Mode". Ze waren bedoeld om ontwikkelaars te helpen problemen op te lossen met betrekking tot niet-moderne versies van Internet Explorer. In werkelijkheid waren ze een beetje verwarrend om te gebruiken en bieden ze slechts marginale testondersteuning voor niet-moderne IE's. Met deze nieuwe update hebben de F12-hulpprogramma's dit gestroomlijnd om ontwikkelaars te helpen bij het testen van de meest standaardversie van IE, vooral als hun site momenteel wordt uitgevoerd in een compatibiliteitsmodus.
Door de documentmodus te wijzigen in 'Rand', kan een ontwikkelaar zijn site dwingen om te renderen in de meest recente standaardenmodus die wordt ondersteund door die versie van IE en werken om de noodzakelijke, op standaarden gebaseerde wijzigingen aan te brengen om de site te laten weergeven in verschillende browsers. Bovendien is er een informatieve link rechtstreeks in de tool, die ontwikkelaars rechtstreeks naar modern.IE brengt, een online hulpbron die een scanner biedt voor algemene compatibiliteitsproblemen, virtuele machines voor de verschillende versies van Internet Explorer en best-practices voor het garanderen van de site compatibiliteit in moderne versies van IE.
Een nieuwe functie die expliciet op mobiele apparaten en tablets is gericht, is Geolocation-simulatie. Hiermee kunt u gebruikmaken van de Geolocation-API, zelfs als uw apparaat niet is verbonden.
Dit is een geweldige update voor een reeks tools die ons goed hebben gediend, maar die zeker wat verfraaiing nodig hadden. Er was een duidelijke focus op het aanbieden van tools die u hielpen bij het oplossen van problemen met de prestaties, iets dat ongelooflijk belangrijk is, vooral met trends die op weg zijn naar apps met een native page van één pagina.
.
Accentsconagua