F12 kūrėjo įrankių patobulinimai naršyklėje "Internet Explorer 11"

F12 vartotojo sąsajos pakeitimai

Naujos piktogramos ir pranešimaiPakeitė atminties ir profilio įrankių piktogramos.

Dabar piktogramų juostoje yra klaidų konsolėje indikatorių, emuliavimo parametrų pakeitimų ir aktyvių profiliavimo seansų atminties, "Profiler" ir vartotojo sąsajos reagavimas įrankiuose. Toliau pavaizduotos naujos piktogramos su pranešimais konsolėje ir atminties įrankio piktogramose, nurodančios, kad rodomos dvi konsolės klaidos ir kad šiuo metu vykdomas atminties profiliavimo seansas:

F6 superset navigation within toolsUsing F6 is like using the Tab key to navigate around a tool, but it "tabs" through a selected set of the most used elements in a tool pane rather than through every selectable item. Tai dalis bendro švaresnio sistemos naudojant klaviatūrą naršyti ir tarp įrankių.

Judėti pirmyn ir atgal tarp neseniai naudotų įrankių naudojant klaviatūrąGalite naudoti Ctrl + [, kad pereitumėte atgal įrankių naršymo retrospektyvoje ir CTRL + ] ir naršydami eiti pirmyn, panašiai kaip rodyklės atgal ir pirmyn.

Sparčioji prieiga prie dokumento režimoSąsajos viršuje įtraukiamas naujas išplečiamasis sąrašas, kuris leidžia pasiekti dokumento režimą naudojant bet kurį įrankį, todėl įrankių perjungti nereikia.

Konsolės pakeitimai

Console.timeStamp()Iškvietus konsolėje arba kode, Console.timeStamp() pateikia konsolei, kiek milisekundžių atidarytas dabartinis naršyklės skirtukas. Jei jis iškviečiamas vykdant profiliavimo seansą naudojant vartotojo sąsajos atsako įrankį, jis sukuria vartotojo žymę seanso laiko planavimo juostoje kartu su laiko žyma, atsižvelgiant į laiką nuo seanso pradžios.

Ctrl + L išvalo visų pranešimų konsolę

Tikslus automatinis užbaigimasĮ konsolės automatinio užbaigimo funkcija nebeįrodo indekso kūrimo priemonės ypatybių. Tai lemia švaresnį ir tikslesnį automatinio užbaigimo pasiūlymų pasirinkimą.

$, $$, $x, $0-$5 ir $_ buvo įtraukti į konsolės automatinio užbaigimo sąrašą, kad būtų patogiau, ir kad konsolės veikimas būtų nuoseklesnis su kitomis naršyklėmis.

Pasenusių laiškų indikatoriusJei pasirinkote išjungti parinktį Valyti naršant, senesnių konsolės pranešimų piktogramos yra pilkos, kad būtų lengviau atskirti aktyvaus puslapio pranešimus ir pranešimus nuo ankstesnių retrospektyvos puslapių.

DOM naršyklės pakeitimai

Srities Apskaičiuojamuoju atveju juostų keitimasApskaičiuotų stilių srityje keisti juostas (skirtingas pakeistų ypatybių, įtrauktų ypatybių ir panaikintų ypatybių spalvas), kurias vartotojai mėgavosi sritimi Stiliai, dabar rodomos srityje Apskaičiuojami stiliai.

Derintuvės pakeitimai

Šaltinio žemėlapių priskyrimasSpustelėkite dokumento skirtuką derintuvėje ir galite nurodyti šaltinio schemą. Tai leidžia naudoti šaltinio žemėlapius kartu su išsiųstu kodu, kuriame buvo pašalintas šaltinio schemos komentaras.

Automatinio užbaigimo funkcija "WatchesNow", kai įtraukiate laikrodį, siūlomos automatinio užbaigimo parinktys.

Grąžinamos reikšmės patikraKas nutraukia funkciją su grąžinama reikšme, pereikite į funkciją, kol pereisite į uždaromą riestinį skliaustą. Grąžinama reikšmė bus rodoma srities Laikrodžiai dalyje Vietiniai. Dar kartą atlikite veiksmą ir reikšmė bus grąžinta į kodą, iškviestą jai.

Norėdami greitai demonstruoti, išbandykite šį kodą konsolėje:

function showval() { var x = 0; x++; debugger; return x; } showval(); 

Funkcija bus iškviesta, nutraukta derintuvė ir galėsite į ją įtraukti grąžinamą reikšmę.

Kelių taškų pasirinkimas"Ctrl" + spustelėjimas, "Shift" + spustelėjimas ir "Ctrl" + A gali būti naudojami pažymėti kelis stabdos taškus srityje Stabdos taškai.

Continue and ignore breaksPress F5 to continue to the next break. Laikykite F5, kad tęstumėte kelis lūžius, kol atleisite F5.

Įvykių stabdos taškai ir sekimo taškaiŠis veikia panašiai kaip F12 įrankiuose jau esantys stabdos taškai ir sekimo taškai, bet užuot paleidęs, kai vykdomas konkretus kodo blokas, jie paleidžiami, kai sužadinamas konkretus įvykis. Kiekvienas iš jų turi pasirinktinį sąlyginį filtrą, kuris padės jums susiaurinti aprėptį iki konkretaus įvykio, kurį norite patikrinti, egzemplioriaus. Jas galima įtraukti naudojant įtraukti įvykio sekimo tašką ir įtraukti įvykio stabdos taško piktogramas, pažymėtas šiame paveikslėlyje:

Vartotojo sąsajos reagavimas įrankio pakeitimai

Importavimo / eksportavimo našumo seansaiNereikės atkurti bandomojo atvejo kiekvieną kartą, kai norite analizuoti duomenis, kuriuos ji sukuria, arba bendrinti tuos duomenis su kolega. Importavimo (aplankas) ir eksportavimo (disko) piktogramos vartotojo sąsajos atsako įrankio piktogramų juostoje leidžia įrašyti atminties momentines kopijas į failą, kurį galima importuoti vėliau.

Vaizdo peržiūraJei matėte HTTP vaizdo užklausą ir svarstote, koks vaizdas buvo, vaizdas dabar peržiūrimas įvykio informacijoje.

Įvykių filtravimasFiltravimo įvykių mygtukas yra mažas, bet galingas. Paslėpta už šio mygtuko yra meniu, kuris leidžia filtruoti įvykius keliais būdais, o kiekvienas būdas turi didelį poveikį:

• Įvykio pavadinimo filtras: filtruokite bet kurio įvykio pavadinimą, kuriame yra filtro teksto atitikmuo.

• Vartotojo sąsajos veiklos filtras: naudodami žymės langelius galite neįtraukti didelių įvykių kategorijų, kad būtų lengviau sutelkti dėmesį į tiriamą sritį. Pavyzdžiui, jei jus domina tik tinklo veikla, galite filtruoti visą vartotojo sąsajos ir šiukšlių kolekcijos triukšmą.

• Laiko ribinės reikšmės filtras: ši funkcija filtruoja aukščiausio lygio įvykius, mažesnius nei viena milisekundė trukmės. Daugelyje scenarijų tai labai supaprastina krioklio rodinį ir padeda sutelkti dėmesį į paveikesnius įvykius.
  

HTML5 scenarijų įvykiaiJei naudojate medijos užklausų klausytojus arba MutationObservers, dabar galite nustatyti atitinkamas išlaidas, kai vykdote našumo profiliavimo seansą.

Grupavimas pagal rėmelius Mygtukas tarp išplečiamojo sąrašo Rikiuoti pagal ir meniu Filtruoti įvykius perjungia rėmelių grupavimą. Aukščiausio lygio įvykiai sugrupuojami į atitinkamą darbo vienetą (arba "kadrą") per laikotarpius, kuriais įvyko animacijos ar vaizdiniai naujinimai. Kadrai laikomi panašiais į kitus įvykius, todėl juos galima rūšiuoti ir filtruoti bei pateikti suvestinę imtinai.

Vartotojo mataiJei naudojate performance.mark() API, kad įtrauktumėte trikampių į laiko planavimo juostą, kad nurodytumėte, kur įvyko konkretūs įvykiai, performance.measure() API išplečia efektyvumo žymių naudingumą. Naudokite performance.measure(), kad sukurtumėte vartotojo mato įvykį, apimantį laiką tarp dviejų performance.mark() įvykių, tada dešiniuoju pelės mygtuku spustelėkite įvykį, tada naudokite parinktį Filtruoti įvykiui, kad pasirinktumėte tik įvykius tarp dviejų ženklų.

DOM spalvų nustatymasŠi funkcija prideda DOM elementų, eilučių raidžių ir skaičių raidžių spalvų. Be to, kad įvairių F12 įrankių turinys atrodo ir veikia panašiai, jis suteikia daugiau vizualinio patrauklumo vartotojo sąsajos reagavimas įrankis.

Pasirinkimo suvestinėKai pasirenkate laiko planavimo juostos dalį, srityje Išsami įvykio informacija bus rodoma pažymėtos srities suvestinė. Palaikykite žymiklį virš skirtingų žiedinės diagramos segmentų, kad atitiktų segmento įvykio kategoriją.

Console.timeStamp()Using the console.timeStamp() method in your code or in the console during a profiling session creates a user mark on the timeline that has the time since the profiling session began.

Atminties įrankio pakeitimai

Dominator lankstymoDominator lankstymo padeda supaprastinti momentinės kopijos turinį pašalinant objektus iš aukščiausio lygio rodinių, kurie yra logiškai komponentai kito objekto (pvz., <BR> <DIV>, aprėptis, kurią turi funkcija) ir paprastai yra papildoma informacija, kuri nepatobulina jūsų įžvalgų į duomenis, bet gali eikvoti jūsų laiką. 

Pvz., toliau pavaizduotas vaizdas prieš ir po rodinių, parodant, kaip dominator lankstymo pagerėja "istorija", kurią nurodo įrankis. Sulenktas rodinys rodo 30 HTML <DIV> elementų, kurie sudaro 15,64 megabaitų (MB) atminties ir laiko atsietus DOM mazgus. Daugeliu atvejų nėra svarbu žinoti objekto sudėtį, taip pat tiesiog žinant, kad jis yra per didelis arba kad jis nutekėjo (ypač naudojant trečiųjų šalių bibliotekas).

DOM, eilučių & skaičių literalų spalvinimasŠi funkcija prideda DOM elementų, eilučių raidžių ir skaičių literalų spalvų. Be to, kad per įvairių F12 įrankiai atrodo ir elgiasi panašiai turinys, todėl atminties analizė vizualiai įdomiau.

Šaknų ciklo filtravimasWant, kad būtų galima tirti objekto sudėtį, kai ciklinės nuorodos kelyje sąmoningai neprarandama? Ši funkcija aptinka antrinių nuorodų, kurios yra ciklinės, ir "apkarpo", kad jų nepainiotumėte pereidami į begalybę. Be to, jis komentuoja šias nuorodas, kad būtų aišku, kai nuoroda buvo "apkarpyta".

Importavimo / eksportavimo seansasNereikės atkurti bandomojo atvejo kaskart, kai norite analizuoti savo sukurtus duomenis arba bendrinti šiuos duomenis su kolega. Importavimo (aplankas) ir eksportavimo (disko) piktogramos atminties įrankio piktogramų juostoje leidžia įrašyti atminties momentines kopijas į failą, kurį galima importuoti vėliau.

Imitavimo įrankio pakeitimai

Parametrų pastovumas ir resetA nuolatinio emuliavimo parametrų piktograma įtraukiama į emuliavimo įrankį. Tai išlaikys jūsų dabartinius imitavimo parametrus, kol nebus specialiai išjungti. Taip galėsite dirbti, uždaryti naršyklę ir grįžti prie emuliavimo parametrų. Šios piktogramos dešinėje yra piktograma Iš naujo nustatyti emuliacijos parametrus, kuri greitai iš naujo nustato įrankį į numatytąsias reikšmes.