DevTools Showdown Edge F12 vs Firefox vs Chrome

Vývojové nástroje Microsoft Edge, nového predvoleného prehliadača Windows 10, získali moderný dizajn a niekoľko nových funkcií v porovnaní s jeho predchodcom, F12 Dev Tools v Internet Explorer 11.

Otázka, či nástroje Microsoft Edge dev devia k svojim obľúbeným konkurentom - dev nástroje v iných moderných prehliadačoch, ako sú Mozilla Firefox a Google Chrome - prirodzene vzniká v mysli mnohých vývojárov.

V tomto príspevku sa pokúšame odpovedať na túto otázku a zistiť, či Edge F12 Dev Tools skutočne stojí za to použiť. Porovnáme jeho funkcie s nástrojmi vývojárskych nástrojov Firefoxu a DevTools prehliadača Google Chrome.

Otvorte nástroje Dev

Stlačením klávesu F12 sa vo vývojových nástrojoch otvárajú vo všetkých troch prípadoch: vývojárske nástroje vo formáte Firefox, DevTools v prehliadači Chrome a nástroje F12 Dev Tools v aplikácii Microsoft Edge. Jedná sa o klávesovú skratku, kde oficiálny názov nástrojov Edge F12 Dev Tools pochádza.

Keď otvoríte aplikáciu Edge Dev Tools, môžete okamžite zažiť jeden z najznámejších nedostatkov: momentálne to je nemožno pripnúť nástroje do existujúceho okna. Zatiaľ čo môžete sledovať to, čo sa deje na obrazovke v nástrojoch pre vývojárov Firefoxu a prehliadačoch Chrome DevTools tým, že pripevníte okno nástrojov dev do spodnej časti obrazovky, nemôžete (v súčasnosti) robiť to isté s Edge.

Vývojári spoločnosti Microsoft tvrdia, že tento problém vyriešia v budúcej aktualizácii.

Skontrolujte DOM

DOM Explorer (skratka: CTRL + 1) je prvou záložkou nástrojov Microsoft F12 Dev Tools. Jeho rozloženie a celkový dizajn je celkom podobný Element karta Chrome a inšpektor vo Firefoxe, avšak schopnosti sa odlišujú.

V aplikácii Edge sa môžete pozrieť na vykresľovaný dokument HTML, súvisiace štýly CSS a spracovatele udalostí, ktoré sa zaregistrujú na každom prvku. Môžete tiež nájsť malú grafiku o modeli krabice CSS s vypočítanými hodnotami, ktoré sú už dobre známe z dvoch konkurenčných prehliadačov.

Môžeš experimentujte s pravidlami CSS odstránením aktuálnych a pridávaním nových a môžete vidieť vaše zhrnuté zmeny na samostatnej podkarte nazvanej “zmeny” (nachádza sa na ľavej strane). Toto je funkcia, ktorá nie je postavená vo vývojárov Firefoxu ani v aplikácii Chrome DevTools. Môže používateľovi poskytnúť rýchlu recenziu, takže je to naozaj užitočná možnosť.

V nástrojoch pre vývojárov Firefoxu sú niektoré funkcie, ktoré v súčasnosti neposkytujú Edge ani Google Chrome, ale môžu výrazne pomôcť životu dizajnéra: nástroja na analýzu písma a animácie.

Na Edge je a cool picker farieb aj keď to môže trochu kompenzovať užívateľa za to.

Interakcia s jazykom JavaScript

konzola karta (Skratka: CTRL + 2) v aplikácii Microsoft Edge umožňuje interakciu s jazykom JavaScriptu na vašich stránkach, rovnako ako v aplikáciách Firefox a Chrome Dev Tools. Všetky tri vám umožňujú sledovať chyby JavaScript v reálnom čase a môžete ich tiež analyzovať zadaním vlastných vstupov.

Nástroj Konzola nástroja Edge F12 Dev Tools je pekný funkcia automatického dopĺňania ktorý vám pomôže s príkazmi, ale zdá sa byť menej informovaných v porovnaní s nástrojmi v nástrojoch prehliadača Firefox a Chrome Dev.

Hrana oddeľuje chyby, upozornenia a správy čo je veľká pomoc, hoci nie niečo, čo ostatné dva súbory nástrojov nemajú.

Konzola prehliadača Firefox sa javí ako najprofesionálnejšia z troch dev nástrojov, ako aj oddelene zobrazuje iný druh problémov: sieť, CSS, chyby zabezpečenia a protokolovacie správy, a umožňuje vám komunikovať s nimi cez Rozhranie konzoly, nielen s chybami jazyka JavaScript.

Pochopte, čo váš kód robí

ladiaci nástroj (Skratka: CTRL + 3) vám pomôže pochopiť, čo sa deje s vaším kódom pri hľadaní potenciálnych chýb. Môžete nastaviť hodinky a body zlomu a zobraziť zásoby hovorov.

V okne Hodinky sa zobrazujú premenné hodnoty, v režime Callstack sa zobrazuje reťazec volaní funkcií, ktoré viedli k aktuálnemu stavu, a režim Breakpoints zobrazuje zoznam bodov zlomu, ktoré ste nastavili.

Nástroje Edge F12 Dev vám umožňujú pozastavte svoj kód uprostred exekucie a prejdite po riadku. Máte tiež možnosť zlepšiť čitateľnosť zostaveného alebo minimalizovaného súboru JavaScript, a môžete ladiť rôzne zdroje (JavaScript, rozšírenia atď.) Jeden po druhom.

Firefox a Chrome DevTools poskytujú všetky tieto funkcie, takže Edge neponúka výnimočné ladiace skúsenosti, ale poskytuje používateľovi spoľahlivý a spoľahlivý nástroj, ktorý je v porovnaní s jeho konkurentmi.

Pozrite sa na komunikáciu medzi prehliadačom a serverom

sieť Nástroj (skratka: CTRL + 4) bol úplne prepracovaný pre Microsoft Edge od Internet Explorer 11. Pomocou tohto šikovného nástroja môžete sledovať komunikáciu medzi serverom a prehliadačom, a skontrolovať jednotlivé žiadosti.

Môžeš filtrovať výsledky podľa typu obsahu ako sú šablóny so štýlmi, obrázky, médiá, písma, XHR a mnoho ďalších. Môžete tiež ladenie AJAX pomocou nástroja Sieť.

Záložka Edge's a Firefox Network ponúka podobné funkcie a užívateľské rozhranie. Obaja majú užívateľsky prívetivý panel bočného panela, ktorý vám umožňuje pozrieť sa na hlavičku HTTP vybraného prostriedku, telo HTTP, parametre, súvisiace súbory cookie a časovanie item-by-item.

Karta Sieťové karty DevTools nemá takúto tabuľku, ale ak kliknete na požiadavky jednotlivo, môžete zobraziť rovnaké informácie. Je to však menej intuitívne riešenie.

Sledujte pomalé stránky

výkon (Skratka: CTRL + 5) vám pomôže pochopiť príčiny za pomalou webovou stránkou. S nástrojom výkonnosti spoločnosť Microsoft urobila obrovský skok dopredu kombináciou predchádzajúceho UI reakcie a Profiler nástroje na vytvorenie koncového zobrazenia všetkých skriptov a vizualizáciu výkonnosti.

Tento praktický nástroj vám poskytuje správy rôzne typy využitia procesora, vám poskytuje náhľad na rámovú farbu vášho webu a je tiež možné izolovať rôzne používateľské scenáre nastavením štítkov na časovej osi.

Počas testovacieho procesu sme zistili, že nám poskytol výkonný nástroj Edge ďalšie informácie o problémoch s rýchlosťou ako vývojár Firefoxu alebo Chrome DevTools. Užívateľské rozhranie karty Performance na okraji je pomerne dobre navrhnuté, pomáha nám s mnohými vizuálnymi podnetmi a je pomerne jednoduché. Ak sa chcete dozvedieť viac o tom, ako ju používať, prečítajte si podrobné dokumenty.

Diagnostikovať problémy s pamäťou

Pamäť nástroj (Skratka: CTRL + 6) umožňuje nájsť netesnosti pamäte čo môže tiež spomaliť vašu webovú stránku, navyše môže vplyv na stabilitu vášho webu.

S pomocou pekného grafu môžete ľahko pochopiť, kde sa zvyšuje spotreba pamäte, a môžete vytvárať snímky na konkrétnych miestach, ktoré umožňujú analyzovať využitie pamäte. Môžete tiež porovnanie dvoch snímok vytvorených v rôznych bodoch životného cyklu stránky, aby ste pochopili rozdiel medzi nimi.

Chrome DevTools má tiež pekný profiler na pamäti na karte Profily, zatiaľ čo program Firefox Developer túto funkciu štandardne neposkytuje, ale môžete si ho stiahnuť a nainštalovať, ak chcete. Pamäťový profil Chrome DevTools je dosť pokročilý a ponúka viac funkcií ako Edge, napríklad vám to umožňuje zaznamenávať alokácie objektov jazyka JavaScript v čase ktoré vám môžu pomôcť izolovať netesnosti pamäte.

Otestujte svoje stránky na rôznych veľkostiach obrazovky

emulácia nástroj (Skratka: CTRL + 7) umožňuje otestovať svoje stránky za rôznych okolností. Môžete si vybrať z dvoch profilov prehliadača Desktop a Windows 10 Mobile a od mnohých rôznych používateľských agentov vrátane všetkých desktopových a mobilných verzií programu Internet Explorer späť na IE6, pozdĺž mnohých konkurentov spoločnosti Edge, Chrome, Firefox, Safari atď..

Je zaujímavé, že máte možnosť vziať si pozrite sa na svoju stránku ako Bing Bot. Môžete tiež emulovať GPS, a nastavte rôzne rozlíšenia a orientácie.

Nástroje pre vývojárov Firefoxu neobsahujú nástroj na emuláciu zariadenia, ale Chrome DevTools majú taký sofistikovaný emulátor, ktorý s ňou Edge ťažko dokáže konkurovať.

Napríklad obrazovka emulácie Chrome má presná mriežka, do ktorej je vložený emulovaný pohľad, a vy si môžete nielen vybrať z profilov prehliadača a užívateľských agentov, ale aj z mnohých zariadení, ako napr rôznych verziách iPhone alebo Samsung Galaxy a mnoho ďalších. Emulátor systému Chrome DevTools má tiež praktický nástroj Možnosť priblíženia a môžete otestovať svoje stránky na rôznych sieťach, ako sú 3G, 4G, DSL, WiFi, atď.

zhrnutie

Celkovo sa zdá, že nástroj Microsoft F12 Dev Tools je prekvapujúco dobrý. Poskytuje funkcie, ktoré sú celkom podobné populárnym nástrojom na vývoj webových aplikácií iných moderných prehliadačov. Existujú dve oblasti, kde Edge F12 Dev Tools je pomerne silný: užívateľské rozhranie to je naozaj intuitívne, užívateľsky príjemné a dobre navrhnuté, a výkonné diagnostické nástroje.

Pre tieto dve funkcie je vhodné zvážiť prechod na, alebo aspoň testovanie Edge. Najväčším nedostatkom je nedostatok možnosti pripevniť dev nástroje na spodok obrazovky, ale dúfajme, že Microsoft rýchlo vyrieši tento problém.