Parannuksia Internet Explorer 11:n F12-kehittäjätyökaluihin

Muutokset F12-käyttöliittymään

Uudet kuvakkeet ja ilmoituksetMuisti- ja profiloijatyökalujen kuvakkeet ovat muuttuneet.

Kuvakepalkissa on nyt ilmaisimia konsolin virheille, emulointiasetusten muutoksille sekä aktiiviselle profilointiistunnolle Muisti-, Profilointi- ja Käyttöliittymän reagointitoiminnot -työkaluissa. Seuraavassa kuvassa näkyvät uudet kuvakkeet, joissa on ilmoituksia konsoli- ja muistityökalujen kuvakkeissa, mikä ilmaisee, että näkyvissä on kaksi konsolivirhettä ja että muistiprofilointiistunto on käynnissä:

F6 superset -siirtyminen työkaluissa F6:n käyttäminen on kuin käyttäisi sarkainta työkalussa siirtymiseen, mutta se "välilehtiä" käy läpi työkaluruudun useimmin käytetyistä elementeistä valitun joukon eikä kaikkien valittavien kohteiden läpi. Tämä on osa yleistä puhdistusjärjestelmää työkalujen välillä siirtymiseen näppäimistön avulla.

Siirry edestakaisin viimeksi käytettyjen työkalujen välillä näppäimistön avullaVoit siirtyä taaksepäin työkalun siirtymishistoriassa ctrl + [ -näppäinyhdistelmällä ja ctrl + ] -näppäinyhdistelmällä, joka vastaa selattaessasi eteen- ja taaksepäin osoittavia nuolia.

Tiedostotilan pikakäyttö Käyttöliittymän yläreunaan lisätään uusi avattava luettelo, jonka avulla voit käyttää tiedostotilaa millä tahansa työkalulla, joten sinun ei tarvitse vaihtaa työkaluja.

Konsolin muutokset

Console.timeStamp()Kun konsolista tai koodista soitetaan, Console.timeStamp() siirtää konsoliin nykyisen selainvälilehden millisekunteja. Jos sitä kutsutaan profilointiistunnon suorittamisen aikana käyttöliittymän reagointitoiminnon työkalulla, se luo käyttäjämerkin istunnon aikajanalle ja aikaleiman istunnon alkamisajan perusteella.

Ctrl + L tyhjentää kaikkien viestien konsolin

Tarkka automaattinen täydennysKonsolin automaattinen täydennys ei enää sisällä indeksoijan ominaisuuksia. Tämä johtaa selkeämpään ja tarkempaan automaattisen täydennyksen ehdotusten valintaan.

$, $, $, $x, $0-$5 ja $_ on lisätty konsolin automaattisen täydennyksen luetteloon, jotta konsolin toiminta olisi yhdenmukaisempaa muiden selainten kanssa.

Vanhentuneen viestin ilmaisinJos olet valinnut Poista siirtymisessä -asetuksen käytöstä, vanhempien konsolin viestien kuvakkeet näkyvät harmaina, jotta aktiivisen sivun viestit ja historiasi aiemmilta sivuilta tulevat viestit voidaan erottaa toisistaan.

DOM Explorerin muutokset

Palkkien muuttaminen Laskettu-ruudussaMuuta palkkeja (eri värejä muuttuneissa ominaisuuksissa, lisätyissä ominaisuuksissa ja poistetuissa ominaisuuksissa), joita käyttäjät ovat nauttineet Tyylit-ruudusta, näkyvät nyt Lasketut tyylit -ruudussa.

Virheenkorjauksen muutokset

Lähdekarttojen määritysTapsauta asiakirjan välilehteä Virheenkorjaus-kohdassa, niin voit määrittää lähdekartan. Tämä mahdollistaa lähdekarttojen käyttämisen yhdessä lähetetyn koodin kanssa, jonka lähdekarttakommentin on poistettu.

Automaattinen täydennys WatchNow-sovelluksessa, kun lisäät kellon, sinulle ehdotetaan automaattisen täydennyksen asetuksia.

Palautusarvon tarkistusKun katkaiset funktion, jolla on palautusarvo, siirry funktioon, kunnes olet astunut loppusulkeeseen. Palautusarvo näkyy Kellot-ruudun Paikalliset-osassa. Vaihe uudelleen, ja arvo palautetaan koodiin, joka sitä vaati.

Jos haluat lyhyen esittelyn, kokeile seuraavaa koodia konsolissa:

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

Se kutsuu funktiota, katkaisee virheenkorjauksen ja voit astua siihen nähdäksesi palautusarvon.

Keskeytyskohtien monivalintaCtrl + napsautus, Vaihto + napsautus ja Ctrl + A voidaan käyttää useiden keskeytyskohtien valitsemiseen Keskeytyspisteet-ruudussa.

Jatka ja ohita vaihdotPress F5 jatkaaksesi seuraavaan taukoon. Pidä F5-näppäintä painettuna, jos haluat jatkaa useiden taukojen yli, kunnes vapautat F5:n.

Tapahtuman keskeytyskohdat ja seurantapisteetTämä toiminta muistuttaa F12-työkaluissa jo olevia keskeytyskohtia ja seurantapisteitä, mutta sen sijaan, että ne käynnistyvät, kun tietty koodilohko suoritetaan, ne käynnistyvät, kun tietty tapahtuma käynnistyy. Jokaisessa on valinnainen ehdollinen suodatin, jonka avulla voit rajata niiden laajuuden tarkasteltavan tapahtuman tiettyyn esiintymään. Ne voidaan lisätä käyttämällä Lisää tapahtuman seurantapiste- ja Lisää tapahtuman keskeytyskohta -kuvakkeita korostettuina seuraavassa kuvassa:

Käyttöliittymän reagointitoiminnon työkalun muutokset

Suorituskykyistuntojen tuominen tai vieminen Sinun ei tarvitse toistaa testitapausta joka kerta, kun haluat analysoida sen tuottamia tietoja tai jakaa tietoja työtoverin kanssa. Käyttöliittymän reagoivuus -työkalun kuvakepalkissa olevien tuonti- (kansio) ja vientikuvakkeiden (levykuvakkeiden) avulla voit tallentaa muistin tilannevedokset tiedostoon, joka voidaan tuoda myöhemmin.

Kuvan esikatseluJos olet nähnyt KUVAN HTTP-pyynnön ja miettinyt, mikä kuva se oli, kuvaa esikatsellaan nyt tapahtuman tiedoissa.

Tapahtumien suodattaminenSuodatustapahtumat-painike on pieni mutta tehokas. Tämän painikkeen takana on valikko, jonka avulla voit suodattaa tapahtumia monin tavoin, ja kullakin tavalla on merkittävä vaikutus:

• Tapahtuman nimisuodatin: Suodata kaikki tapahtuman nimet, jotka sisältävät suodatintekstin vastineen.

• Käyttöliittymän toimintasuodatin: Valintaruutujen avulla voit jättää pois suuria tapahtumaluokkia, jotta keskittyminen tutkittavaan alueeseen on helpompaa. Jos esimerkiksi olet kiinnostunut vain verkon toiminnasta, voit suodattaa pois kaiken käyttöliittymän ja roskan keräämisen melun.

• Aikarajasuodatin: Tämä toiminto suodattaa pois ylimmän tason tapahtumat, jotka ovat kestoltaan alle millisekunteja. Monissa tilanteissa tämä yksinkertaistaa merkittävästi vesiputousnäkymää ja auttaa keskittymään vaikuttavampiin tapahtumiin.
  

HTML5-komentosarjatapahtumatJos käytät mediakyselyn kuuntelijoita tai MutationObserver-taulukoita, voit nyt tunnistaa niiden kustannukset, kun suoritat suorituskyvyn profilointiistunnon.

Kehyksen ryhmittelyValikkoluettelon ja Suodata tapahtumat -valikon välillä oleva painike vaihtaa Kehyksen ryhmittelyn. Tämä ryhmittelee ylimmän tason tapahtumat vastaavaksi työyksikökseen (eli kehykseen) ajanjaksoina, jolloin animaatioita tai visuaalisia päivityksiä esiintyi. Kehyksiä käsitellään muiden tapahtumien tavoin, joten ne voidaan lajitella ja suodattaa, ja ne tarjoavat osallistavan ajan yhteenvedon.

Käyttäjän mitatJos käytät performance.mark() -ohjelmointirajapintaa kolmioiden lisäämiseen aikajanalle osoittamaan, missä tietyt tapahtumat tapahtuivat, performance.measure() -ohjelmointirajapinta laajentaa suorituskykymerkkien hyödyllisyyttä. Performance.measure() -toiminnolla voit luoda Käyttäjän mittayksikkötapahtuman, joka sisältää kahden performance.mark()-tapahtuman välisen ajan. Napsauta sitten tapahtumaa hiiren kakkospainikkeella ja valitse sitten kahden merkin väliset tapahtumat Suodata tapahtumaan -vaihtoehdon avulla.

DOM:n väritysTätäominaisuus lisää värityksen DOM-elementteihin, merkkijonoliteraaliin ja lukuliteraaliin. Sen lisäksi, että se saa eri F12-työkalujen sisällön näyttämään ja käyttäytymään paremmin samalla tavalla, se lisää käyttöliittymän reagointitoiminnon työkalun visuaalista kiinnostavuutta.

ValintayhteenvetoKun valitset aikajanan osan, Tapahtuman tiedot -ruudussa näkyy yhteenveto valinnasta. Pidä hiiren osoitinta kehäkaavion eri osien päällä, jos haluat työkaluvihjeen, jossa on segmentin tapahtumaluokka.

Console.timeStamp()Konsoli.timeStamp() -menetelmän käyttäminen koodissa tai konsolissa profilointiistunnon aikana luo aikajanalle käyttäjämerkin, jolla on aikaa profilointiistunnon alkamiseen.

Muistityökalun muutokset

Dominator foldingDominator folding helps simple the contents of a snapshot by removing objects from the top-level views that are logically components of another object (esimerkiksi <BR> within a <DIV>, a Scope held on a Function) and tend to be extra details that don't improve your insight into the data, mutta se voi hukata aikaasi. 

Esimerkiksi seuraavasta kuvasta näkyy ennen ja jälkeen näkymiä, mikä osoittaa, miten dominator-taittaminen parantaa työkalun kertomaa "tarinaa". Taitettu näkymä näyttää 30 HTML-<JAKO-> elementtiä, joiden muistin koko on 15,64 megatavua (Mt) ja jotka pitävät kiinni irronutta DOM-solmua. Monissa tapauksissa ei ole tärkeää tietää objektin koostumusta, niin kuin vain tietää, että se on liian suuri tai että se vuotaa (erityisesti käytettäessä kolmannen osapuolen kirjastoja).

Domin, merkkijonon & lukuliteraalien väritysTätäominaisuus lisää värityksen DOM-elementteihin, merkkijonoliteraaliin ja lukuliteraaliin. Sen lisäksi, että eri F12-työkalujen sisältö näyttää ja käyttäytyy paremmin, se tekee muistianalyysistä visuaalisesti mielenkiintoisempaa.

Roots cycle filteringWant to able to investigate the composition of a object without getting unkwingly lost in a circular reference path? Tämä toiminto havaitsee aliviittaukset, jotka ovat ympyrän muotoisia, ja rajaa ne niin, että et sekoita niitä siirtymällä äärettömyyteen. Lisäksi se lisää nämä viittaukset niin, että on selvää, kun viittaus on "leikattu".

Tuonti- ja vientiistunto Sinun ei pitäisi joutua toistamaan testitapausta joka kerta, kun haluat analysoida sen tuottamia tietoja tai jakaa tietoja työtoverin kanssa. Muistityökalun kuvakepalkissa olevien tuonti- (kansio) ja vientikuvakkeiden (levy) avulla voit tallentaa muistin tilannevedokset tiedostoon, joka voidaan tuoda myöhemmin.

Emulointityökalun muutokset

Asetusten sinnikkyys ja nollausA Pysyvä emulointiasetukset -kuvake lisätään Emulointityökaluun. Tämä säilyttää nykyiset emulointiasetuksesi, kunnes ne on erityisesti poistettu käytöstä. Näin voit työskennellä, sulkea selaimen ja palata sitten emulointiasetusten kanssa ennalleen. Tämän kuvakkeen oikealla puolella on Palauta emulointiasetukset -kuvake, joka palauttaa työkalun nopeasti takaisin oletusarvoihin.