DevTools Showdown Edgen F12 vs Firefox vs. Chrome

Microsoft Edgen kehittäjätyökalut, Windows 10: n uusi oletusselain, saivat modernin muotoilun ja muutamia uusia ominaisuuksia edeltäjäänsä verrattuna, Internet Explorer 11: n F12 Dev -työkalut.

Kysymys siitä, mitkä Microsoft Edgen dev-työkalut mittaavat niiden suosittuja kilpailijoita - dev-työkaluja muissa nykyaikaisissa selaimissa, kuten Mozilla Firefoxissa ja Google Chromeissa, syntyy luonnollisesti monien kehittäjien mielissä..

Tässä viestissä yritämme vastata tähän kysymykseen ja selvittää, onko Edge F12 Dev -työkalut todella käyttökelpoisia. Me vertaamme sen ominaisuuksia Firefoxin kehitystyökalujen ja Google Chromen DevTools-ohjelmien ominaisuuksiin.

Avaa Dev-työkalut

Painamalla F12 avaa kehitystyökalut kaikissa kolmessa tapauksessa: kehitystyökalut Firefoxissa, DevTools Chromeissa ja F12 Dev Tools Microsoft Edgessä. Tämä on pikanäppäin, jossa Edge's F12 Dev -työkalujen virallinen nimi tulee.

Kun avaat Edgen Dev-työkalut, voit kokea heti sen tunnetuimmista puutteista: tällä hetkellä se on ei ole mahdollista liittää työkaluja olemassa olevaan ikkunaan. Voit seurata Firefoxin kehitystyökalujen ja Chrome DevTools -laitteen näytöllä tapahtuvaa tapahtumista kiinnittämällä dev-työkalut -ikkunan näytön alaosaan, mutta et voi tehdä samaa Edgen kanssa.

Microsoftin kehittäjät väittävät korjaavansa tämän ongelman tulevassa päivityksessä.

Tarkista DOM

DOM Explorer työkalu (Pikanäppäin: CTRL + 1) on Microsoft Edgen F12 Dev -työkalujen ensimmäinen välilehti. Sen ulkoasu ja yleinen muotoilu ovat melko samanlaisia ​​kuin elementti ja Chrome-välilehden välilehti Tarkastaja välilehti Firefoxissa, mutta kyvyt eroavat toisistaan.

Edgessä voit tarkastella renderoitua HTML-asiakirjaa, niihin liittyviä CSS-tyylejä ja kullekin elementille rekisteröityjä tapahtumakäsittelijöitä. Voit myös löytää pienen grafiikan CSS-laatikkomallista lasketuilla arvoilla, jotka ovat hyvin tunnettuja kahdesta kilpailevasta selaimesta.

Sinä pystyt kokeile CSS-sääntöjä poistamalla nykyiset ja lisäämällä uusia, ja näet tiivistetyt muutokset erillisellä osakaavalla, jota kutsutaan “muutokset” (se sijaitsee vasemmalla puolella). Jälkimmäinen on ominaisuus, jota ei ole rakennettu Firefoxin kehittäjiin eikä Chrome DevTools -ohjelmaan. Se voi antaa nopean palautuksen käyttäjälle, joten se on todella hyödyllinen vaihtoehto.

Firefoxin kehitystyökaluissa on joitakin ominaisuuksia, joita Edge tai Google Chrome eivät tällä hetkellä tarjoa, mutta jotka voivat merkittävästi auttaa suunnittelijan elämää: Fontti ja Animaatio-analysaattorin työkalut.

Edgessä on a viileä värivalitsin vaikka se voi jonkin verran korvata käyttäjälle sen.

Ota yhteyttä JavaScriptiin

Konsoli välilehdellä (pikakuvake: CTRL + 2) Microsoft Edgessä voit olla vuorovaikutuksessa sivuston JavaScriptin kanssa, aivan kuten Firefoxissa ja Chrome Dev -työkaluissa. Kaikkien kolmen avulla voit seurata JavaScript-virheitä reaaliajassa ja voit myös analysoida niitä syöttämällä omaa syötettäsi.

Edge F12 Dev -työkalujen konsolin työkalulla on mukava automaattisen täydennyksen ominaisuus joka auttaa sinua komennoissa, mutta se näyttää olevan vähemmän asiantunteva verrattuna Firefoxin ja Chrome Dev -työkalujen työkaluihin.

Reuna erottaa virheet, varoitukset ja viestit mikä on suuri apu, vaikkakaan kahdella muulla välineellä ei ole jotain.

Firefoxin konsoli näyttää olevan kaikkein ammattimainen kolmesta dev-työkalusta, kuten myös erikseen näyttää muita ongelmia: verkko, CSS, suojausvirheet ja kirjausviestit, ja voit vuorovaikutuksessa näiden kanssa Konsolin käyttöliittymä, ei vain JavaScript-virheitä.

Ymmärtää, mitä koodi tekee

Debugger työkalu (pikanäppäin: CTRL + 3) auttaa sinua ymmärtämään, mitä koodisi kanssa tapahtuu, kun etsit mahdollisia vikoja. Voit asettaa kelloja ja katkoviivoja ja tarkastella puheluiden pinoja.

Kellot-ruudussa näkyy muuttuvia arvoja, Callstack-tila näyttää toimintakutsujen ketjun, joka johti nykyiseen tilaan, ja Breakpoints-tila näyttää luettelon asetetuista katkaisupisteistä.

Edgen F12 Dev -työkalut antavat sinulle mahdollisuuden keskeytä koodi keskellä suoritusta ja siirry sen läpi rivillä. Sinulla on myös mahdollisuus parantaa käännetyn tai muutetun JavaScript-tiedoston luettavuutta, ja sinä voit debug eri resursseja (JavaScript, laajennukset jne.) Yksi kerrallaan.

Firefox ja Chrome DevTools tarjoavat kaikki nämä toiminnot, joten Edge ei tarjoa poikkeuksellista virheenkorjauskokemusta, mutta se tarjoaa käyttäjälle vankan ja luotettavan työkalun, joka on samankaltainen kuin sen kilpailijat.

Katsokaa selaimen-palvelimen tiedonsiirtoa

verkko työkalu (Pikanäppäin: CTRL + 4) on suunniteltu uudelleen Microsoft Edge -ohjelmaan Internet Explorer 11: n jälkeen. Tämän kätevän työkalun avulla voit seuraa palvelimen ja selaimen välistä viestintää, ja tarkastaa yksittäiset pyynnöt.

Sinä pystyt suodattaa tulokset sisällön tyypin mukaan kuten tyylitaulukot, kuvat, media, fontit, XHR ja monet muut. Voit myös debug AJAX verkkotyökalun avulla.

Edgen ja Firefoxin Verkko-välilehdessä on melko samanlaiset ominaisuudet ja käyttöliittymä. Molemmissa on käyttäjäystävällinen sivupalkki, jonka avulla voit tarkastella valitun resurssin HTTP-otsikkoa, HTTP-runkoa, parametreja, niihin liittyviä evästeitä ja ajoituskohtaisia ​​kohtia.

Chrome DevToolsin verkko-välilehdellä ei ole tällaista ruutua, mutta jos napsautat pyyntöjä yksi kerrallaan, näet saman tiedon. Se on kuitenkin vähemmän intuitiivinen ratkaisu.

Seuraa hitaita sivuja

Esitys välilehti (Pikanäppäin: CTRL + 5) auttaa ymmärtämään hidas verkkosivun syitä. Suorituskyky-työkalun avulla Microsoft otti valtavan askeleen eteenpäin yhdistämällä edellisen UI reagoivuus ja profilaattori työkalut, joiden avulla voit luoda kokonaiskuvan kaikista skripteistäsi ja visualisoida suorituskykyä.

Tämä kätevä työkalu antaa sinulle raportteja erilaisia ​​CPU-käyttöjä, antaa sinulle tietoa sivuston kehysmaalista, ja se on myös mahdollista erotella eri käyttäjäskenaarioita asettamalla tarrat aikajanalle.

Testausprosessin aikana huomasimme, että Edge-työkalu toimitti meille lisätietoja nopeusongelmista kuin Firefox-kehittäjä tai Chrome DevTools. Edgen Performance-välilehden käyttöliittymä on melko hyvin suunniteltu, ja se auttaa meitä monien visuaalisten vihjeiden avulla, ja se on suhteellisen helppo käyttää. Jos haluat lisätietoja siitä, miten sitä käytetään, lue yksityiskohtaiset asiakirjat.

Diagnoosi muistin ongelmat

Muisti työkalu (pikakuvake: CTRL + 6) mahdollistaa löytää muistivuotoja joka voi myös hidastaa Web-sivusi, ja voi myös vaikuttaa vakauteen sivustosi.

Mukavan kaavion avulla voit helposti ymmärtää, missä muistin käyttö kasvaa, ja voit tehdä tilannekuvia tietyissä kohdissa, jotka mahdollistavat muistin käytön analysoinnin. Voit myös vertaa kahta kuvaa eri kohdissa sivun elinkaaren aikana ymmärtää niiden välisen eron.

Chrome DevToolsissa on myös mukava muistiprofiili Profiilit-välilehdessä, kun taas Firefox-kehittäjä ei tarjoa tätä ominaisuutta oletusarvoisesti, mutta voit ladata ja asentaa lisäosia, jos haluat. Chrome DevToolsin muistiprofiili on varsin edistynyt ja tarjoaa enemmän ominaisuuksia kuin Edge, esimerkiksi sen avulla tallentaa JavaScript-objektin varauksia ajan myötä joka voi auttaa eristämään vuotovirtoja.

Testaa sivustosi eri näytön kooilla

jäljittely työkalu (pikanäppäin: CTRL + 7) mahdollistaa sivuston testaamisen eri olosuhteissa. Voit valita kahdesta selainprofiilista: Desktop ja Windows 10 Mobile sekä monista eri käyttäjäagentteista, mukaan lukien Internet Explorerin kaikki työpöydän ja mobiiliversiot, takaisin IE6: een, kuten monet Edgen kilpailijat, Chrome, Firefox, Safari jne..

On mielenkiintoista, että sinulla on mahdollisuus ottaa a katso sivullesi Bing Bot. Voit myös jäljitellä GPS: ää, ja asettaa erilaisia ​​päätöslauselmia ja suuntauksia.

Firefoxin kehittäjätyökaluilla ei ole laitteen emulointityökalua, mutta Chrome DevToolsissa on niin hienostunut emulaattori, jota Edge voi tuskin kilpailla sen kanssa.

Esimerkiksi Chrome-emulointinäytöllä on tarkka ruudukko, jossa emuloitu näkymä lisätään, et voi valita vain selaimen profiileja ja käyttäjäagentteja, vaan myös monista laitteista, kuten eri versioita iPhone tai Samsung Galaxy ja monet muut. Chrome DevToolsin emulaattorissa on myös kätevä Zoom-vaihtoehto ja voit testata sivustosi eri verkoissa, kuten 3G, 4G, DSL, WiFi jne.

Yhteenveto

Kaiken kaikkiaan Microsoft Edgen F12 Dev -työkalut näyttävät olevan yllättävän hyviä. Se tarjoaa ominaisuuksia, jotka ovat melko samanlaisia ​​kuin muiden modernien selaimien suosituimmat web-kehitystyökalut. Edge's F12 Dev -työkalut ovat melko vahvoja: kaksi käyttöliittymä se on todella intuitiivinen, käyttäjäystävällinen ja hyvin suunniteltu, ja suorituskyvyn diagnostiikkatyökalut.

Näiden kahden ominaisuuden osalta kannattaa harkita siirtymistä tai ainakin testata Edgeä. Suurin puute on se, ettei ole mahdollista liittää dev-työkaluja näytön alareunaan, mutta toivottavasti Microsoft korjaa ongelman nopeasti.