Share
varning: Jag arbetar för Microsoft Corporation.
Tillbaka i januari gick jag igenom funktionerna i Internet Explorer 10: s F12 Developer Tools. Microsofts senaste release av Windows 8.1 Preview tar med det, inte bara en uppdatering till Internet Explorer (nu på v11), men också en välkommen uppdatering till F12 Developer Tools. Det senare är särskilt viktigt eftersom utvecklare är beroende av dem för att felsöka webbplatsrelaterade problem inom IE. Hittills har verktygen löst de flesta felsökningsfall men det är uppenbart att som webbplatser blir mer komplexa behöver utvecklarna rikare verktyg att arbeta med. Den här uppdateringen syftar till att få ett nytt utseende och utökad kapacitet för utvecklare med ett starkt fokus på följande:
Några av uppdateringarna är helt enkelt bekvämlighetsfunktioner som är avsedda att effektivisera utvecklarens arbetsflöde (t ex: elementbrödsmulor), medan vissa kommer att ha en dramatisk inverkan på att förbättra prestanda och rendering av webbapps.
I det här inlägget går vi igenom några av de senaste uppdateringarna och funktionerna i IE11 F12 Developer Tools och i vissa fall visar jag de klara skillnaderna i funktioner från tidigare versioner.
Sedan dess har F12-verktygen hållit ett ganska konsekvent användargränssnitt med hjälp av rullgardinsmenyer och en flikbaserad metafor för att presentera de olika alternativen som finns tillgängliga. Men några nits som alltid tycktes komma i vägen var saker som verktygen som dyker ut i sitt eget fönster under en felsökning och flikarna tar värdefulla vertikala fastigheter. Med IE11 har F12-verktygen utvecklats kraftigt för att göra användargränssnittet mer intuitivt utnyttjande av ett grafikbaserat navigationssystem som är placerat som ett rullningsband på vänster sida av debuggerpanelen:
Menyerna som används för att linja överst i verktygen har tagits bort för att ge större tydlighet i felsökningsgränssnittet, samt att frigöra fastigheter att arbeta med. Dessutom har designen av debuggeren själv blivit mycket uppfriskad och går bort från en Windows 7-användargränssnitt till en mer modern Windows 8 look-and-feel. Du kan se den stora skillnaden nedan:
Det nya användargränssnittet överensstämmer tydligt med de moderna elementen som introducerades i Windows 8.
Medan det ursprungliga DOM-inspektionsverktyget gav en anständig upplevelse saknade den några nyckelfunktioner. De viktigaste smärtpunkterna för mig var bristen på live DOM-uppdatering, visningsordningen för CSS-format och oförmågan att se händelser som fogades till DOM-element. Tack och lov har dessa nu tagits upp i denna uppdatering.
Eftersom jag fokuserar så mycket på JavaScript, var det särskilt frustrerande att hitta bifogade händelser som kräver mycket konsolbaserad debugging-kod och försök-och-fel att spika ner den kallade händelsen / metodkombinationen. Titta på skärmdumpen nedan kan du se hur jag kan klicka på ett visst element, se händelsen som är kopplad till den och metoden som kommer att ringas när händelsen är avfyrade. Detta är en enorm timesaver från ett felsökningsperspektiv.
Och medan det kan tyckas uppenbart, har en liten men viktig förändring av hur verktygen visar CSS tillämpad på ett element bara gjort saker väsentligt enklare. Före denna uppdatering skulle F12-verktygen visa arvade stilar som först tvingar dig att rulla ner i rutan för att komma till den faktiska brukade stilen för elementet.
Teamet har uppdaterat bildskärmen så att de senaste stilarna visas först vilket enligt min mening är mycket mer meningsfullt, särskilt från ett felsökningsperspektiv:
Några andra bra nya funktioner som definitivt är trevliga att ha är:
Tidigare behövde du öppna F12-verktygen, klicka på DOM inspektörspilen och klicka på ett element. Detta effektiviserar sakerna ganska mycket och ger den erfarenheten i nivå med andra felsökningsverktyg.
Brödcrumben ger ett intuitivt sätt att sikta genom den hierarkiska strukturen hos ett DOM-element, så att du enkelt kan klicka på någon del av brödkorgen för att dra upp det enskilda moderelementet:
Med den nya Intellisense-stilfunktionen, när du redigerar en stil eller lägger till en ny regel visas du omedelbart med en popup som ger dig snabb tillgång till CSS-regler och värden. Medan vissa av er kanske CSS-encyklopedi, uppskattar jag för att jag inte behöver komma ihåg dem alla. :)
Slutligen, med DnD inom DOM Explorer, kan du interaktivt testa hur dina element kommer att se ut och reagera när du flyttar sin position inom sidlayouten. Ändringarna görs live, så du får omedelbar feedback när du flyttar ditt element.
Det finns mycket mer kod placerad på klientsidan än någonsin tidigare. Ramar som Ember.js och Angular gör det väsentligt lättare för utvecklare att bygga webbsidor på en sida och utvecklare använder sig av HTML5-baserade funktioner för att bygga omhändertagna spel som kräver höga bildhastigheter och svarstider. Med det kommer en helt ny uppsättning överväganden kring sidprestanda och de nya F12-verktygen erbjuder ett nytt verktyg för att hjälpa dig att profilera och mäta ditt användargränssnitt. Verktyget UI Responsiveness är en profiler som gör att du kan mäta framerates och CPU-användning för att identifiera problem med användargränssnittet..
Genom att sparka bort profiler kan jag spåra hur min CPU reagerar på min sida och vad den visuella genomströmningen (AKA-ramar per sekund) är som olika punkter i sidladdningscykeln.
I panelen Tidslinjepanel ger jag mig ännu bättre detaljer om hur specifika händelser eller nätverksförfrågningar påverkar sidprestandan så att jag kan gräva djupare in i eventuella problem och göra anpassningar för att förbättra min webbplatss prestanda.
Genom att titta på varje element i tidslinjen kan du se hur specifika åtgärder, till exempel styling, kan påverka renderingens prestanda.
Du kan tänka dig hur ovärderlig denna data är, särskilt för spelutvecklare som vill utnyttja inbyggda webbläsarfunktioner för spel och brukar ha robusta felsökningsverktyg i andra pluginbaserade utvecklingsverktyg som Flash.
Av alla förändringar har de mest effektiva för mig varit de som fanns i skriptfelsökaren, främst för att de hjälpte till att förhindra den raseri jag kände när jag skulle använda den. Det var främst ett UX-problem, eftersom det för tillfället du valde att köra debuggeren, skulle hela verktygspanelen popa upp webbläsarens visningsport och till sitt eget fristående popup-fönster. Det var minst en skrynkande upplevelse. Den här uppdateringen löser det och ser till att felsökaren hålls fast på plats.
En annan stor förbättring är användningen av en flikmetafor för visning av varje öppen fil du debuggar. Den tidigare versionen av verktyget tvingade dig att öppna alla filer du behöver för att felsöka. Den nya versionen visar en flik för varje fil du arbetar med att göra navigationen väsentligt enklare.
Dessutom är alternativ som generellt begravdes i kontextmenyer nu tydligt markerade och lätt att upptäcka. Det är fantastiskt hur många utvecklare som har blivit överraskad när jag visade dem den fina utskriftsfunktionen för att formatera JavaScript trots att det hade varit där sedan IE8. Funktionen är nu markerad via en ikon högst upp i felsökningsrutan bredvid ikonen för wordwrap.
Sist men inte minst, glöm det console.log (). De nya verktygen stöder nu Tracepoints så att du kan övervaka specifika värden på samma sätt som du skulle via console.log ().
Pegging Memory-problem har alltid varit en dra, särskilt om det är ett problem med långsam minneförminskning. De nya F12-verktygen syftar till att ta itu med detta med sin nya minnesprofil. Med verktyget kan du ta bilder av din webbplats eller appens minnesanvändning under en tidsperiod så att du kan fastställa vilka åtgärder eller områden i din app som kan vara orsaken till problemet.
Genom att skapa en grundlinjesbild av ditt minnesfotavtryck följt av efterföljande snapshots kan du jämföra data som samlats för att bestämma antalet aktiva objekt och vilka typer av objekt som kvarstår. Detta inkluderar HTML-element, DOM-noder och JavaScript-objekt och du kan träna i jämförelserna av ögonblicksbilderna för att se förändringen i minnet mellan dem för enskilda objekt.
Du är förmodligen alltför bekant med de komplexa dropdownerna som heter "Browser Mode" och "Document Mode". De var avsedda att hjälpa utvecklare att felsöka problem relaterade till icke-moderna versioner av Internet Explorer. I själva verket var de lite förvirrande att använda och erbjöd endast marginalt teststöd för icke-moderna IE. Med den här nya uppdateringen har F12-verktygen effektiviserat detta för att hjälpa utvecklare att fokusera testning på den mest standardkompatibla versionen av IE, särskilt om deras webbplats körs för närvarande i något kompatibilitetsläge.
Genom att ändra dokumentläget till "Edge" kan en utvecklare tvinga sin webbplats att göra i det senaste standardläget som stöds av den versionen av IE och arbeta för att göra nödvändiga standardbaserade ändringar för att få sin webbplats att göra cross-browser. Dessutom tillhandahålls en informationslänk direkt i verktyget som tar utvecklare direkt till modern.IE, en online-resurs som erbjuder en skanner för vanliga kompatibilitetsproblem, virtuella maskiner för olika versioner av Internet Explorer och bästa metoder för att säkerställa webbplatsen kompatibilitet i moderna versioner av IE.
En ny funktion som explicit avser mobila enheter och surfplattor är Geolocation-simulering. Det här låter dig använda Geolocation API även om enheten inte är ansluten.
Det här är en bra uppdatering till en serie verktyg som har tjänat oss bra, men var definitivt i behov av lite sprucing upp. Det fanns ett tydligt inriktning på att erbjuda verktyg som hjälpte dig att felsöka prestationsrelaterade problem, något som är oerhört viktigt, särskilt med trender som riktar sig mot enkelsidiga, inhemska appar.
.
Accentsconagua