DevTools Showdown Edge je F12 vs Firefox vs Chrome

Orodja za razvijalce Microsoft Edge, novi privzeti brskalnik Windows 10, so dobila sodoben dizajn in nekaj novih funkcij v primerjavi z njegovim predhodnikom..

Vprašanje, ali so orodja za obdelavo Microsoft Edge v primerjavi s priljubljenimi konkurenti - orodji za razvijanje v drugih sodobnih brskalnikih, kot sta Mozilla Firefox in Google Chrome - seveda nastajajo v mislih mnogih razvijalcev.

V tem prispevku skušamo odgovoriti na to vprašanje in ugotoviti, ali je Edgeov F12 Dev Tools res vreden uporabe. Njegove funkcije bomo primerjali z lastnostmi orodij za razvijalce Firefox in DevToolsom za Google Chrome.

Odprite orodja Dev

S pritiskom na F12 odprete orodja za razvijalce v vseh treh primerih: Orodja za razvijalce v Firefoxu, DevTools v Chromeu in F12 Dev Tools v Microsoft Edge. To je bližnjica na tipkovnici, kjer je uradno ime Edge F12 Dev Tools prihaja iz.

Ko odprete orodja Dev Ed's Dev Tools, lahko takoj doživite eno od najbolj znanih pomanjkljivosti: trenutno je orodja ni mogoče pripeti na obstoječe okno. Čeprav lahko spremljate, kaj se dogaja na zaslonu v Orodjih za razvijalce Firefox in Chrome DevTools, tako da okno orodij za razvijalce pripnete na dno zaslona, ​​(trenutno) ne morete storiti enako z orodjem Edge.

Microsoftovi razvijalci trdijo, da bodo to težavo odpravili v prihodnji posodobitvi.

Preglejte DOM

The DOM Explorer Orodje (Bližnjica: CTRL + 1) je prvi zavihek orodij Microsoft Devices F12 Dev. Njegova zasnova in celotna zasnova sta precej podobni Element kartico Chrome in Inšpektor v Firefoxu, vendar se zmogljivosti očitno razlikujejo.

V programu Edge si lahko ogledate upodobljeni dokument HTML, povezane stile CSS in obdelovalce dogodkov, ki so registrirani za vsak element. Prav tako lahko najdete majhno sliko o modelu polja CSS z izračunanimi vrednostmi, ki so že znane iz dveh konkurenčnih brskalnikov..

Ti lahko preizkusite pravila CSS tako, da izbrišete trenutne in dodate nove, in lahko vidite povzete spremembe na ločenem klicu “Spremembe” (nahaja se na levi strani). Slednje je funkcija, ki ni vgrajena v razvijalcu Firefox in Chrome DevTools. Uporabniku lahko hitro ponovi, zato je resnično uporabna možnost.

V orodjih za razvijalce Firefox je na voljo nekaj funkcij, ki jih niti Edge niti Google Chrome trenutno ne nudita, vendar lahko bistveno pomagata oblikovalcu: orodja za analizo pisave in animacije.

V Edgeu obstaja kul izbirnik barv čeprav lahko uporabnik za to nekoliko nadomesti.

Interakcija s JavaScriptom

The Konzola zavihek (Bližnjica: CTRL + 2) v programu Microsoft Edge omogoča interakcijo s JavaScriptom svojega spletnega mesta, tako kot v orodjih Firefox in Chrome Dev Tools. Vsi trije vam omogočajo, da v realnem času sledite JavaScript napakam in jih lahko tudi analizirate z vnosom lastnega vnosa.

Orodje konzole Edge's F12 Dev Tools ima lepo orodje funkcija samodokončanja ki vam pomaga pri ukazih, pa čeprav se zdi, da je manj poznavalci v primerjavi z orodjem Firefox in Chrome Dev Tools.

Edge ločuje napake, opozorila in sporočila kar je velika pomoč, čeprav ne nekaj, kar druga dva orodja nimata.

Zdi se, da je Firefoxova konzola najbolj profesionalna med tremi orodji, kot je tudi ločeno prikazuje druge vrste težav: omrežje, CSS, varnostne napake in beleženje sporočil, in vam omogoča interakcijo z njimi preko Vmesnik konzole, ne le z napakami JavaScripta.

Razumite, kaj počne vaša koda

The Debugger orodje (Bližnjica: CTRL + 3) vam pomaga razumeti, kaj se dogaja z vašo kodo, medtem ko najdete potencialne napake. Nastavite lahko ure in prekinitvene točke ter si ogledate nizov klicev.

V podoknu Ure so prikazane vrednosti spremenljivk, način prikaza klicne številke pokaže verigo klicev funkcij, ki so pripeljale do trenutnega stanja, in način prekinitvenih točk prikazuje seznam nastavljenih točk prekinitve..

Edge F12 Dev Tools vam omogoča začasno zaustavite kodo sredi izvedbe in stopite po njej. Imate tudi možnost izboljšati berljivost prevedene ali pomanjšane datoteke JavaScript, in lahko razhroščite različne vire (JavaScript, razširitve itd.) Enega za drugim.

Firefox in Chrome DevTools nudita vse te funkcionalnosti, zato Edge ne ponuja izjemne izkušnje z odpravljanjem napak, vendar uporabniku zagotavlja zanesljivo in zanesljivo orodje, ki je v skladu s svojimi konkurenti..

Oglejte si brskalnik-strežnik sporočilo

The Omrežje orodje (Bližnjica: CTRL + 4) je popolnoma preoblikovano za Microsoft Edge od Internet Explorerja 11. S pomočjo tega priročnega orodja lahko sledite komunikaciji med strežnikom in brskalnikom, posamezne zahteve.

Ti lahko filtrirajte rezultate po vrsti vsebine stile, slike, mediji, pisave, XHR in mnoge druge. Lahko tudi debug AJAX s pomočjo orodja za omrežje.

Kartica Edge's in Firefox Network omogočata precej podobne zmogljivosti in uporabniški vmesnik. Oba imata uporabniku prijazno podokno stranske vrstice, ki vam omogoča, da si ogledate glavo HTTP izbranega vira, telo HTTP, parametre, povezane piškotke in časovne omejitve po posameznih postavkah..

Kartica Network DevTools za Chrome nima podokna, kot je ta, če pa kliknete na zahteve enega za drugim, lahko vidite iste podatke. To je manj intuitivna rešitev.

Sledite počasnim stranem

The Izvedba (Bližnjica: CTRL + 5) vam pomaga razumeti razloge za počasno spletno stran. Z orodjem za zmogljivost je Microsoft naredil velik korak naprej s kombiniranjem prejšnjega Odzivnost uporabniškega vmesnika in Profiler orodja za ustvarjanje celostnega pogleda vseh vaših skriptov in vizualizacijo uspešnosti.

To priročno orodje vam zagotavlja poročila o različne vrste uporabe CPE, omogoča vpogled v barvo okvirja vašega spletnega mesta in je tudi možno ločite različne uporabniške scenarije z nastavitvijo oznak na časovni premici.

Med postopkom testiranja smo ugotovili, da nam je orodje za uspešnost v Edgeju priskrbelo več informacij o hitrostih kot razvijalec Firefox ali Chrome DevTools. Uporabniški vmesnik zavihka Performance v programu Edge je precej dobro oblikovan in nam pomaga pri številnih vizualnih namigih in je razmeroma enostaven za uporabo. Če želite izvedeti več o tem, kako ga uporabljati, preberite podrobne dokumente.

Diagnosticiranje spominskih vprašanj

The Spomin orodje (Bližnjica: CTRL + 6) omogoča poiščite puščanje pomnilnika ki lahko tudi upočasni vašo spletno stran vplivajo na stabilnost vašega spletnega mesta.

S pomočjo lepega grafa lahko z lahkoto razumete, kje raste vaš spomin in lahko naredite posnetke na določenih točkah, ki omogočajo analizo uporabe pomnilnika. Lahko tudi primerjajte dva posnetka na različnih točkah življenjskega cikla strani, da bi razumeli razliko med njimi.

Chrome DevTools ima tudi lepo profiliranje pomnilnika pod zavihkom Profili, medtem ko razvijalec Firefoxa ne ponuja te funkcije privzeto, vendar lahko, če želite, prenesete in namestite take dodatke. Profiler pomnilnika za Chrome DevTools je precej napreden in ponuja več funkcij kot Edge's, na primer omogoča sčasoma zapisuje dodelitve objektov JavaScript ki vam lahko pomagajo izolirati uhajanje pomnilnika.

Preizkusite svoje mesto na različnih velikostih zaslona

The Emulacija orodje (Bližnjica: CTRL + 7) vam omogoča, da preizkusite svoje spletno mesto v različnih okoliščinah. Izbirate lahko med dvema profiloma brskalnika, namizjem in Windows 10 Mobile ter različnimi uporabniškimi agenti, vključno z vsemi namiznimi in mobilnimi različicami Internet Explorerja, nazaj na IE6, skupaj s številnimi konkurenti programa Edge, Chrome, Firefox, Safari itd..

Zanimivo je, da lahko izbirate si oglejte svojo stran kot Bing Bot. Lahko tudi posnemati GPS, in nastavite različnih resolucij in usmeritev.

Orodja za razvijalce za Firefox nimajo orodja za emulacijo naprav, vendar imajo DevTooli za Chrome tako prefinjen emulator, ki ga Edge-ji težko konkurirajo.

Na primer, Chromeov emulacijski zaslon ima natančna mreža, v katero je vstavljen emulirani pogled, in ne samo, da lahko izbirate med profili brskalnikov in uporabniškimi agenti, ampak tudi iz številnih naprav, kot je različice iPhone ali Samsung Galaxy in mnogi drugi. Emulator programa Chrome DevTools ima prav tako priročen Možnost povečave in lahko svoje mesto preizkusite na različnih omrežjih, kot so 3G, 4G, DSL, WiFi, itd.

Povzetek

Na splošno se zdi, da je orodje Microsoft Edge F12 Dev Tools presenetljivo dobro. Zagotavlja funkcije, ki so zelo podobne priljubljenim orodjem za razvoj spletnih strani drugih sodobnih brskalnikov. Obstajata dve področji, kjer je Edge F12 Dev Tools precej močna: Uporabniški vmesnik to je res intuitiven, uporabniku prijazen in dobro oblikovan, in orodja za diagnosticiranje zmogljivosti.

Za te dve funkciji je morda vredno razmisliti o prehodu na ali vsaj testiranje Edge. Največja pomanjkljivost je pomanjkanje možnosti, da bi orodja Dev nakazali na dno zaslona, ​​vendar upajmo, da bo Microsoft hitro odpravil to težavo..