DevTools Showdown Edge F12 vs Firefox vs Chrome

Alati za razvojne programere sustava Microsoft Edge, novi zadani preglednik sustava Windows 10, dobili su moderan dizajn i nekoliko novih značajki u usporedbi s njegovim prethodnikom..

Pitanje jesu li alati za uređivanje Microsoft Edgea prilagođeni njihovim popularnim konkurentima - dev alati u drugim modernim preglednicima kao što su Mozilla Firefox i Google Chrome - prirodno se pojavljuju u glavama mnogih razvojnih inženjera.

U ovom postu pokušavamo odgovoriti na ovo pitanje i shvatiti jesu li Edgeovi F12 Dev alati stvarno vrijedni korištenja. Usporedit ćemo njegove značajke s onima u Firefoxovim alatima za razvojne programere i DevToolsima Google Chromea.

Otvorite Dev Tools

Pritiskom na tipku F12 otvaraju se razvojni alati u sva tri slučaja: razvojni alati u Firefoxu, DevTools u Chromeu i F12 Dev alati u Microsoft Edgeu. To je tipkovnički prečac gdje se nalazi službeni naziv Edgeovog F12 Dev alata dolazi od.

Kada otvorite Edove Dev alate možete odmah doživjeti jedan od njegovih najpoznatijih nedostataka: trenutno je nemoguće je zakačiti alate na postojeći prozor. Iako možete pratiti što se događa na zaslonu alata za razvojne programere za Firefox i Chrome DevTools tako što ćete prozor alata za uređivanje pričvrstiti na dno zaslona, ​​vi (trenutno) ne možete učiniti isto s Edge.

Microsoftovi razvojni inženjeri tvrde da će taj problem riješiti u budućem ažuriranju.

Pregledajte DOM

DOM Explorer alat (prečac: CTRL + 1) je prva kartica programa Microsoft Edge F12 Dev Tools. Njegov raspored i cjelokupni dizajn vrlo su slični Element na kartici Chrome i Inspektor kartici u Firefoxu, međutim, mogućnosti vidno razlikuju.

U programu Edge možete pogledati prikazani HTML dokument, povezane CSS stilove i rukujuće događaje registrirane na svakom elementu. Također možete pronaći malu grafiku o modelu CSS okvira s izračunatim vrijednostima, koje su već poznate iz dva konkurentska preglednika.

Možeš eksperimentirajte s pravilima CSS-a brisanjem trenutnih i dodavanjem novih i možete vidjeti svoj sažete promjene na zasebnoj podkartici “promjene” (nalazi se na lijevoj strani). Ovo potonje je značajka koja nije ugrađena u Firefox Developer niti u Chrome DevTools. Korisniku se može dati kratak pregled, tako da je to stvarno korisna opcija.

Postoje neke značajke u alatima za razvojne inženjere za Firefox koje niti Edge ni Google Chrome trenutno ne nude, ali mogu znatno pomoći dizajneru: Alat za analizu fonta i animacije.

U Edgeu postoji cool boja picker iako to može donekle nadoknaditi korisnika.

Interakcija s JavaScriptom

Konzola Kartica (Prečac: CTRL + 2) u programu Microsoft Edge omogućuje interakciju s JavaScriptom vaše web-lokacije, kao u preglednicima Firefox i Chrome Dev Tools. Sva tri omogućuju da pratite JavaScript pogreške u stvarnom vremenu i možete ih analizirati unosom vlastitog unosa.

Alat konzole Edge-ovih F12 Dev alata ima lijepo značajka automatskog dovršavanja koji vam pomaže s naredbama, koliko god se čini manje upućen u usporedbi s onim u preglednicima Firefox i Chrome Dev Tools.

Rub razdvaja pogreške, upozorenja i poruke što je velika pomoć, ali ne nešto što druga dva alata nemaju.

Izgleda da je Firefoxova konzola najprofesionalnija od tri dev alata, kao što je to također slučaj zasebno pokazuje druge vrste problema: mreža, CSS, sigurnosne pogreške i poruke zapisivanja, i omogućuje vam interakciju s njima putem Sučelje konzole, ne samo s JavaScript pogreškama.

Shvatite što radi vaš kod

Program za ispravljanje pogrešaka alat (Prečac: CTRL + 3) pomaže vam razumjeti što se događa s vašim kodom dok pronalazite moguće bugove. Možete postaviti satove i točke prekida i pregledati skupove poziva.

Okno Watches prikazuje vrijednosti varijabli, način rada Callstack prikazuje lanac poziva funkcija koji je doveo do trenutnog stanja, a način Breakpoints prikazuje popis točaka prekida koje ste postavili.

Edgeov F12 Dev Tools omogućuje vam pauzirajte svoj kôd usred izvršenja, i prođite kroz nju red po red. Također imate mogućnost poboljšati čitljivost kompilirane ili umanjene JavaScript datoteke, i možete ispravljanje raznih resursa (JavaScript, proširenja, itd.) Jedan po jedan.

Firefox i Chrome DevTools pružaju sve te funkcionalnosti, tako da Edge ne nudi iznimno iskustvo uklanjanja pogrešaka, ali korisniku pruža solidan i pouzdan alat koji je u skladu s konkurentima.

Pogledajte na preglednik-poslužitelj komunikacije

Mreža alat (prečac: CTRL + 4) je u potpunosti redizajniran za Microsoft Edge od Internet Explorera 11. Uz pomoć ovog praktičnog alata možete pratite komunikaciju između poslužitelja i preglednika, i pregledati pojedinačne zahtjeve.

Možeš filtrirajte rezultate prema vrsti sadržaja kao što su stilovi, slike, mediji, fontovi, XHR i mnogi drugi. Također možete debug AJAX uz pomoć mrežnog alata.

Kartica Edge i Firefox Network nude prilično slične mogućnosti i korisničko sučelje. Oboje ima okno za pristupačnu bočnu traku koje vam omogućuje da pogledate HTTP zaglavlje odabranog resursa, tijelo HTTP-a, parametre, povezane kolačiće i vremenske stavke po stavku.

Kartica Network DevTools za Chrome nema okvir kao što je ovaj, ali ako kliknete na zahtjeve jedan po jedan, možete vidjeti iste podatke. To je manje intuitivno rješenje.

Praćenje usporenih stranica

Izvođenje Kartica (Prečac: CTRL + 5) pomaže vam razumjeti razloge za sporu web stranicu. Uz alat za performanse, Microsoft je napravio veliki skok naprijed kombiniranjem prethodnog Odziv i profili korisničkog sučelja alate za stvaranje cjelovitog prikaza svih vaših skripti i vizualizaciju izvedbe.

Ovaj praktični alat pruža izvješća o tome različite vrste korištenja procesora, daje vam uvid u boju okvira vaše web-lokacije, a moguće je i izolirati različite korisničke scenarije postavljanjem oznaka na vremenskoj traci.

Tijekom procesa testiranja otkrili smo da nam je alat za performanse u Edgeu omogućio više informacija o problemima brzine nego Firefox Developer ili Chrome DevTools. Korisničko sučelje kartice Performance u Edgeu je prilično dobro osmišljeno, pomažući nam s mnogim vizualnim znakovima i relativno je jednostavno za korištenje. Ako želite saznati više o tome kako ga koristiti, pročitajte detaljne dokumente.

Dijagnosticiranje problema s memorijom

Memorija alat (Prečac: CTRL + 6) omogućuje pronaći curenje memorije koji također može usporiti Vašu web stranicu, štoviše može utjecati na stabilnost vaše web-lokacije.

Uz pomoć lijepog grafikona možete lako razumjeti gdje vaše memorije raste, a možete napraviti snimke na određenim točkama koje omogućuju analizu korištenja memorije. Također možete usporedite dvije snimke napravljene u različitim točkama životnog ciklusa stranice da bismo razumjeli razliku između njih.

Chrome DevTools također ima lijepo profiliranje memorije na kartici Profili, dok Developer Firefox ne nudi ovu značajku prema zadanim postavkama, ali možete i preuzeti i instalirati takve dodatke ako želite. Profiler memorije za Chrome DevTools prilično je napredan i nudi više mogućnosti od Edge-a, na primjer to vam omogućuje snimite dodjelu JavaScript objekata tijekom vremena koji vam mogu pomoći da izolirate curenje memorije.

Testirajte svoju web-lokaciju na različitim veličinama zaslona

imitacija alat (Prečac: CTRL + 7) omogućuje testiranje web-lokacije pod različitim okolnostima. Možete odabrati jedan od dva profila preglednika, Desktop i Windows 10 Mobile te brojne različite korisničke agente, uključujući sve verzije preglednika Internet Explorer na radnoj površini i mobilnim uređajima, natrag na IE6, uz mnoge konkurente programa Edge, Chrome, Firefox, Safari, itd..

Zanimljivo je da imate mogućnost uzeti pogledajte svoju stranicu kao Bing Bot. Također možete oponašati GPS, i postavite različite rezolucije i orijentacije.

Alati za razvojne programere za Firefox nemaju alat za emulaciju uređaja, ali Chrome DevTools ima tako sofisticiran emulator da se Edgeovi programi teško mogu natjecati s njim.

Na primjer, zaslon emulacije preglednika Chrome ima točna mreža u koju je umetnut emulirani prikaz, i ne samo da možete birati između profila preglednika i korisničkih agenata, nego i iz mnogih uređaja kao što je različite verzije iPhone ili Samsung Galaxy i mnoge druge. Emulator Emajl Chrome DevTools također ima praktičnu pomoć Mogućnost zumiranja i možete testirati svoje stranice na različitim mrežama kao što su 3G, 4G, DSL, WiFi, itd.

Sažetak

Sve u svemu, Microsoft Edge F12 Dev Tools čini se iznenađujuće dobrim. Ona pruža značajke vrlo slične popularnim alatima za web razvoj drugih modernih preglednika. Postoje dva područja u kojima je Edgeov F12 Dev Alat prilično snažan: korisničko sučelje to je stvarno intuitivan, user-friendly i dobro dizajniran, i alati za dijagnostiku performansi.

Za ove dvije značajke može biti vrijedno razmotriti prebacivanje na, ili barem testiranje Edge. Najveći nedostatak je nedostatak mogućnosti povezivanja dev alata na dno zaslona, ​​ali nadajmo se da će Microsoft brzo riješiti taj problem..