Share
Ansvarsfraskrivelse: Jeg jobber for Microsoft Corporation.
Tilbake i januar gikk jeg deg gjennom funksjonene i Internet Explorer 10s F12 Developer Tools. Microsofts nylig utgivelse av Windows 8.1 Preview bringer med seg, ikke bare en oppdatering til Internet Explorer (nå på v11), men også en velkommen oppdatering til F12 Developer Tools. Sistnevnte er spesielt viktig siden utviklere er avhengige av dem for å feilsøke nettstedrelaterte problemer fra IE. Frem til nå har verktøyene løst de fleste feilsøkingsbrukene, men det er klart at siden nettsteder blir mer komplekse, trenger utviklere rikere verktøy for å jobbe med. Denne oppdateringen tar sikte på å gi et nytt utseende og utvidede muligheter for utviklere med sterkt fokus på følgende:
Noen oppdateringer er rett og slett praktiske funksjoner som er ment å strømlinjeforme utviklerens arbeidsflyt (for eksempel: elementbrødkrummer), mens noen vil ha en dramatisk innvirkning på å forbedre ytelsen og gjengivelsen av webapper.
I dette innlegget går vi gjennom noen av de nyeste oppdateringene og funksjonene til IE11 F12 Developer Tools, og i noen tilfeller vil jeg vise deg de klare forskjellene i funksjoner fra tidligere utgaver.
Siden starten har F12-verktøyene holdt et forholdsvis konsistent brukergrensesnitt ved hjelp av rullegardinmenyer og en tabbasert metafor for å presentere de ulike alternativene som er tilgjengelige. Men noen nits som alltid syntes å komme i veien, var ting som verktøyene dukket opp i eget vindu under en feilsøking og fanene tok dyrebar vertikal eiendom. Med IE11 har F12-verktøyene blitt kraftig redesignet for å gjøre brukergrensesnittet mer intuitivt til å utnytte et grafikkbasert navigasjonssystem som er plassert som et rullebånd på venstre side av debuggerruten:
Menyene som brukes til å linse toppen av verktøyene, er fjernet for å gi større klarhet til feilsøkingsgrensesnittet, samt å frigjøre fast eiendom til å jobbe med. I tillegg har utformingen av debuggeren i seg selv blitt svært forfrisket, bryte seg bort fra en Windows 7 UI-stil til en mer moderne Windows 8 look-and-feel. Du kan se den store forskjellen nedenfor:
Det nye brukergrensesnittet er tydeligere i samsvar med de moderne elementene som ble introdusert i Windows 8.
Mens det originale DOM inspektørverktøyet ga en anstendig opplevelse, manglet det noen viktige funksjoner. Hovedpinepunktene for meg var mangelen på live DOM-oppdatering, skjermordren til CSS-stiler og manglende evne til å se hendelser knyttet til DOM-elementer. Heldigvis har disse nå blitt tatt opp i denne oppdateringen.
Siden jeg fokuserer så mye på JavaScript, var det spesielt frustrerende å finne mye konsollbasert feilsøkingskode og prøve-og-feil for å spikre ned den kalt hendelsen / metoden combo. Ser på skjermbildet under, kan du se hvordan jeg kan klikke på et bestemt element, se hendelsen som er knyttet til den og metoden som vil bli kalt når hendelsen blir sparket. Dette er en stor timesaver fra et feilsøkingsperspektiv.
Og mens det kan virke åpenbart, har en liten, men viktig endring i måten verktøyene viser CSS påført på et element, nettopp gjort ting vesentlig enklere. Før denne oppdateringen vil F12-verktøyene vise arvede stiler som først tvinger deg til å rulle ned i stilruten for å komme til den faktiske brukte stilen for elementet.
Teamet har oppdatert skjermen slik at de nyeste stilene vises først som etter min mening gir mye mer mening, spesielt fra et feilsøkingsperspektiv:
Noen andre flotte nye funksjoner som definitivt er hyggelige å ha er:
Tidligere måtte du åpne F12-verktøyene, klikke på DOM-inspektørpilen og klikke på et element. Dette strømlinjeformer ting ganske mye og bringer den opplevelsen på linje med andre feilsøkingsverktøy.
The breadcrumb gir en intuitiv måte å sile gjennom den hierarkiske strukturen til et DOM-element, slik at du enkelt kan klikke på hvilken som helst del av breadcrumb for å trekke opp det enkelte foreldreelementet:
Med den nye Intellisense-stilfunksjonen, når du redigerer en stil eller legger til en ny regel, presenteres du umiddelbart med en popup som gir deg rask tilgang til CSS-regler og verdier. Mens noen av dere kan være CSS-encyklopedi, vil jeg sette pris på at dere ikke må huske dem alle. :)
Til slutt, med DnD i DOM Explorer, kan du interaktivt teste hvordan elementene dine vil se ut og reagere når du skifter posisjon i sidelayout. Endringene gjøres levende, så du mottar umiddelbar tilbakemelding når du reposisjonerer elementet ditt.
Det er mye mer kode plassert på klientsiden enn noen gang før. Rammer som Ember.js og Angular gjør det vesentlig lettere for utviklere å bygge websider på en side, og utviklere bruker HTML5-baserte funksjoner for å bygge nedsenkende spill som krever høye rammepriser og responstider. Med det kommer et helt nytt sett av hensyn til sideytelsen, og de nye F12-verktøyene tilbyr et nytt verktøy som hjelper deg med å profilere og måle responsiviteten til brukergrensesnittet. UI-responsivitetsverktøyet er en profiler som lar deg måle framerater og CPU-bruk for å fastslå eventuelle UI-ytelsesproblemer.
Ved å sparke profiler, kan jeg spore hvordan CPU'en reagerer på siden min og hva den visuelle gjennomstrømningen (AKA rammer per sekund) er som forskjellige punkter i sidens belastningsperiode.
Tidslinjedetaljerpanelet gir meg enda finere detaljer om hvordan bestemte hendelser eller nettverksforespørsler påvirket sidens ytelse, slik at jeg kan grave dypere inn i eventuelle problemer og gjøre justeringer for å forbedre ytelsen til nettstedet mitt.
Ved å se på hvert element i tidslinjen kan du se hvordan bestemte handlinger, for eksempel styling, kan påvirke gjengivelsesytelsen.
Du kan forestille deg hvor uvurderlig disse dataene er, spesielt for spillutviklere som ønsker å utnytte innfødte nettleserversjoner for spill og er vant til å ha robust feilsøkingsverktøy i andre pluginbaserte utviklingsverktøy som Flash.
Av alle endringene har de mest innflytelsesrike for meg vært dem til skriptet debugger, hovedsakelig fordi de bidro til å forhindre raseri jeg følte da jeg ville bruke den. Det var først og fremst et UX problem ved at i det øyeblikket du valgte å kjøre debuggeren, ville hele verktøypanelet skryte av nettleservisporten og inn i sitt eget frittstående popup-vindu. Det var en grusom opplevelse å si mildt. Denne oppdateringen løser det og sikrer at debuggeren holder seg fast på plass.
En annen stor forbedring er bruken av en tabemetfor for å vise hver åpen fil du feilsøker. Den forrige versjonen av verktøyet tvang deg til å gjenåpne hver fil du trengte å feilsøke. Den nye versjonen viser en fane for hver fil du arbeider med å gjøre navigasjonen vesentlig enklere.
I tillegg er alternativer som vanligvis ble begravet i kontekstmenyer nå godt uthevet og lett å finne. Det er utrolig hvor mange ganger utviklere har blitt overrasket da jeg viste dem den flotte utskriftsfunksjonen for formatering av JavaScript, selv om det hadde vært der siden IE8. Funksjonen er nå uthevet via et ikon øverst i feilsøkingsruten sammen med wordwrap-ikonet.
Sist men ikke minst, glem det console.log (). De nye verktøyene støtter nå Tracepoints, slik at du enkelt kan overvåke bestemte verdier på samme måte som du vil via console.log ().
Pegging minne problemer har alltid vært en dra, spesielt hvis det er et sakte minne nedbrytning problemet. De nye F12-verktøyene tar sikte på å takle dette med sin nye minneprofil. Verktøyet lar deg ta øyeblikksbilder av nettstedet ditt eller appens minnebruk over en periode slik at du kan finne ut hvilke handlinger eller områder av appen din som kan være årsaken til problemet.
Ved å opprette et grunnleggende øyeblikksbilde av minnesfotavtrykket etterfulgt av etterfølgende snapshots, kan du sammenligne dataene som er samlet for å bestemme antallet aktive objekter og hvilke typer objekter som er vedvarende. Dette inkluderer HTML-elementer, DOM-noder og JavaScript-objekter, og du kan bore inn i sammenligningene av stillbildene for å se endringen i minnet mellom dem for individuelle objekter.
Du er sannsynligvis altfor kjent med komplekse dropdowns kalt "Browser Mode" og "Document Mode". De var ment å hjelpe utviklere med å feilsøke problemer relatert til ikke-moderne versjoner av Internet Explorer. I virkeligheten var de litt forvirrende å bruke og tilbød bare marginale teststøtte for ikke-moderne IE. Med denne nye oppdateringen har F12-verktøyene strømlinjeformet dette for å hjelpe utviklere med å fokusere testing på den mest kompatible versjonen av IE, spesielt hvis nettstedet deres kjører i noen kompatibilitetsmodus.
Ved å endre dokumentmodus til "Edge", kan en utvikler tvinge sitt nettsted til å gjengi i den nyeste standardmodusen som støttes av den versjonen av IE, og arbeide for å gjøre de nødvendige standardbaserte endringene for å få deres nettsted til å gjengis kryssbrowser. I tillegg leveres en informasjonslink direkte i verktøyet som tar utviklere direkte til modern.IE, en online ressurs som tilbyr en skanner for vanlige kompatibilitetsproblemer, virtuelle maskiner for de forskjellige versjonene av Internet Explorer, og best practices for å sikre nettstedet kompatibilitet i moderne versjoner av IE.
En ny funksjon som eksplisitt retter seg mot mobil- og nettbrett-enheter, er Geolocation-simulering. Dette gjør at du kan utnytte Geolocation API selv om enheten ikke er koblet til.
Dette er en flott oppdatering til en pakke med verktøy som har tjent oss bra, men var definitivt behov for noen sprucing opp. Det var et tydelig fokus på å tilby verktøy som hjalp deg med å feilsøke ytelsesrelaterte problemer, noe som er utrolig viktig, spesielt med trender som går mot enkeltsidede apper fra hjemmet.
.
Accentsconagua