DevTools Showdown Edge'i F12 vs Firefox vs Chrome

Windows 10 uue vaikebrauseri Microsoft Edge arendusvahendid said oma eelkäijaga võrreldes kaasaegse disaini ja mõned uued funktsioonid, Internet Explorer 11 F12 Dev tööriistad.

Küsimus, kas Microsoft Edge'i dev-tööriistad mõõdavad nende populaarseid konkurente - dev-tööriistad teistes kaasaegsetes brauserites, nagu Mozilla Firefox ja Google Chrome, tekivad loomulikult paljude arendajate mõtetes..

Selles postituses püüame sellele küsimusele vastata ja selgitada välja, kas Edge F12 Dev Tools on tõesti väärt. Me võrdleme selle funktsioone Firefoxi arendustööriistade ja Google Chrome'i DevTools'i omadustega.

Avage Dev Tools

F12 vajutamine avab arendaja tööriistad kõigil kolmel juhul: arendaja tööriistad Firefoxis, DevTools Chrome'is ja F12 Dev Tools Microsoft Edge'is. See on kiirklahv, kus Edge'i F12 Dev Tools'i ametlik nimi pärineb.

Kui avate Edge'i Dev-tööriistad, saate korraga kogeda üht kõige tuntumaid puudusi: praegu on see ei ole võimalik tööriistu olemasoleva akna külge kinnitada. Kuigi saate jälgida, mis toimub ekraanil Firefoxi arendustööriistade ja Chrome DevTools'i vahendusel, lisades ekraani alaosas asuva dev tööriistakese, ei saa te (praegu) sama teha Edge'iga.

Microsofti arendajad väidavad, et nad lahendavad selle probleemi tulevikus uuendatud versioonis.

Kontrollige DOM-i

The DOM Explorer tööriist (otsetee: CTRL + 1) on Microsoft Edge'i F12 Dev Tools'i esimene kaart. Selle paigutus ja üldine kujundus on üsna sarnane Element Chrome'i ja Inspektor vahekaart Firefoxis, kuid võimeid eristada.

Edge'is saate vaadata iga HTML-dokumendi, sellega seotud CSS-stiili ja iga elemendi jaoks registreeritud sündmuste käitlejaid. Samuti on võimalik leida väike graafik CSS-kasti mudeli kohta arvutatud väärtustega, mis on kahest konkureerivast brauserist juba hästi teada.

Sa saad katse CSS reeglitega kustutades praegused ja lisades uusi, ning näete oma kokkuvõtlikud muudatused eraldi alamkaardil “Muudatused” (see asub vasakul pool). Viimane on funktsioon, mida ei ehitata Firefoxi arendaja ega Chrome DevTools. See võib anda kasutajale kiire tagasipöördumise, nii et see on tõesti kasulik valik.

Firefoxi arendustööriistades on mõningaid funktsioone, mida Edge ega Google Chrome praegu ei paku, kuid mis võivad oluliselt aidata disaineri elu: Fontide ja Animatsiooni analüsaatori tööriistad.

Edge'is on a lahe värvi valija kuigi see võib mõnevõrra kompenseerida selle kasutajale.

Koostage JavaScript

The Konsool vahekaart (otsetee: CTRL + 2) Microsoft Edge'is võimaldab teil suhelda saidi JavaScriptiga, nagu Firefox ja Chrome Dev Tools. Kõik kolm võimaldab teil jälgida JavaScript-vigu reaalajas ja neid saab analüüsida ka oma sisendi sisestamisega.

Edge'i F12 Dev Tools'i konsoolitööriist on kena automaatse täitmise funktsioon see aitab teil käske, aga see tundub olevat vähem teadlikud võrreldes Firefoxi ja Chrome Dev'i tööriistadega.

Edge eraldab vead, hoiatused ja sõnumid mis on suureks abiks, kuigi mitte midagi, mida ülejäänud kahel tööriistakomplektil ei ole.

Firefoxi konsool näib olevat kolmest dev-vahendist kõige professionaalsem, nagu ka eraldi näidatakse muud tüüpi probleeme: võrk, CSS, turvavead ja logisõnumid, ja võimaldab teil nende kaudu suhelda Konsooli liides, mitte ainult JavaScript-vigadega.

Mõista, mida teie kood teeb

The Siluri tööriist (otsetee: CTRL + 3) aitab teil mõista, mis teie koodiga toimub, ning leida võimalikke vigu. Saate seadistada kellad ja katkestuspunktid ning vaadata kõne stacke.

Kellade paneelil on muutuvad väärtused, kõneposti režiim näitab funktsionaalsete kõnede ahelat, mis viis praeguse olekuni, ja katkestuspunktide režiim näitab teie poolt määratud katkestuspunktide loendit.

Edge'i F12-tööriistad võimaldavad teil peatage oma kood käigu keskel ja astuge selle kaudu rida. Sul on ka võimalus parandab kompileeritud või muudetud Java-faili loetavust, ja saate erinevate ressursside silumine (JavaScript, laiendused jne) ükshaaval.

Firefox ja Chrome DevTools pakuvad kõiki neid funktsioone, nii et Edge ei paku erakorralist silumise kogemust, kuid annab kasutajale kindla ja usaldusväärse tööriista, mis on oma konkurentidega võrdne.

Heitke pilk brauseri-serveri suhtlusele

The Võrk tööriist (otsetee: CTRL + 4) on Microsofti serva jaoks täielikult uuendatud alates Internet Explorer 11-st. Selle käepärase tööriista abil saate järgige suhtlust serveri ja brauseri vahel, individuaalsed taotlused.

Sa saad filtreerige tulemused sisutüübi järgi nagu stiilitabelid, pildid, meedia, fondid, XHR ja paljud teised. Sa saad ka siluda AJAX võrgu tööriista abil.

Edge'i ja Firefoxi võrgulehel on üsna sarnased võimalused ja kasutajaliides. Mõlemal on kasutajasõbralik külgriba, mis võimaldab teil vaadata valitud ressursi HTTP-päist, HTTP-keha, parameetreid, seonduvaid küpsiseid ja ajastuse elementi.

Chrome DevToolsi võrgulehel ei ole sellist paneeli, kuid kui klõpsate ükshaaval päringuid, näete sama teavet. See on aga vähem intuitiivne lahendus.

Jälgi aeglase lehekülgi

The Toimivus sakk (otsetee: CTRL + 5) aitab teil mõista aeglase veebilehe põhjuseid. Jõudlusvahendiga võttis Microsoft eelmise kombineerimisel suure hüppe UI reageerimisvõime ja Profiler tööriistad, mis võimaldavad luua kõik teie skriptid, ning visualiseerida jõudlust.

See mugav tööriist annab teile aruandeid erinevat tüüpi protsessori kasutamine, annab teile ülevaate oma saidi raami värvist ja see on ka võimalik eraldage erinevad kasutajastsenaariumid, seades ajajoonele sildid.

Testimisprotsessi käigus leidsime, et Edge'i toimivuse tööriist andis meile rohkem teavet kiiruse probleemide kohta kui Firefoxi arendaja või Chrome DevTools. Edge'i vahekaardi Performance kasutajaliides on üsna hästi kavandatud, aidates meil palju visuaalseid näpunäiteid ja see on suhteliselt lihtne kasutada. Kui soovite selle kasutamise kohta rohkem teada, lugege üksikasjalikke dokumente.

Diagnoosige mälu probleemid

The Mälu tööriist (otsetee: CTRL + 6) võimaldab leida mälu lekkeid see võib ka teie veebilehte aeglustada mõju stabiilsusele saidile.

Kena graafiku abil saate hõlpsasti aru saada, kus teie mälu kasutamine kasvab, ning saate teha hetkepilte konkreetsetes punktides, mis võimaldavad mälu kasutamist analüüsida. Sa saad ka Võrdle kahte erinevatel punktidel tehtud pilte lehekülje elutsükli kohta, et mõista nende vahelist erinevust.

Chrome DevToolsil on ka vahekaardil Profiilid kena mäluprofiil, kuid Firefoxi arendaja ei paku vaikimisi seda funktsiooni, kuid soovi korral saate selliseid lisandeid alla laadida ja installida. Chrome DevTools'i mäluprofiil on üsna arenenud ja pakub rohkem funktsioone kui Edge's, näiteks võimaldab see salvestada JavaScripti objektide jaotused aja jooksul mis aitab teil mälu lekkeid eraldada.

Testige oma saiti erinevatel ekraanisuurustel

The Emulatsioon tööriist (otsetee: CTRL + 7) võimaldab teil oma saidi katsetada erinevates olukordades. Võite valida kahe brauseriprofiili vahel: Desktop ja Windows 10 Mobile ning paljudest erinevatest kasutajaagentidest, kaasa arvatud kõik Internet Exploreri töölaua- ja mobiiliversioonid tagasi IE6-sse..

On huvitav, et teil on võimalus võtta a vaadake oma lehekülge Bing Botina. Sa saad ka jäljendada GPS-i, ja seadistage erinevad resolutsioonid ja orientatsioonid.

Firefoxi arendustööriistadel ei ole seadme emulatsioonitööriista, kuid Chrome DevTools'il on selline keeruline emulaator, mida Edge'i vaevalt sellega konkureerida.

Näiteks Chrome'i emulatsiooniekraanil on täpne võrk, kuhu emuleeritud vaade on sisestatud, ja te ei saa mitte ainult valida brauseri profiilide ja kasutajaagentide hulgast, vaid ka paljudest seadmetest, nagu näiteks erinevaid versioone iPhone'i või Samsung Galaxy ja paljud teised. Chrome DevToolsi emulaatoril on ka mugav Suumi valik ja saate testida oma saiti erinevates võrkudes nagu 3G, 4G, DSL, WiFi jne.

Kokkuvõte

Üldiselt tundub, et Microsoft Edge'i F12 Dev Tools on üllatavalt hea. See pakub funktsioone, mis on üsna sarnased teiste kaasaegsete brauserite populaarsete veebiarendustööriistade komplektidega. On kaks valdkonda, kus Edge F12 Dev Tools on üsna tugev: kasutajaliides see on tõesti intuitiivne, kasutajasõbralik ja hästi kujundatud, ja tulemuslikkuse diagnostikavahendid.

Nende kahe funktsiooni puhul võib olla kasulik kaaluda üleminekut või vähemalt katsetada Edge. Suurim puudus on võimalus puudutada dev tööriistu ekraani allosas, kuid loodame, et Microsoft lahendab selle probleemi kiiresti.