DevTools Showdown Edge je F12 vs Firefox vs Chrome

Vývojářské nástroje společnosti Microsoft Edge, nový výchozí prohlížeč systému Windows 10, mají moderní design a několik nových funkcí ve srovnání s jeho předchůdcem, nástroji Internet Explorer 11 F12 Dev Tools.

Otázka, zda devizové nástroje Microsoft Edge do svých oblíbených konkurentů - nástroje dev v jiných moderních prohlížečích, jako jsou Mozilla Firefox a Google Chrome - přirozeně vzniká v myslích mnoha vývojářů.

V tomto příspěvku se pokusíme odpovědět na tuto otázku, a zjistit, zda Edge F12 Dev nástroje jsou opravdu stojí za to použít. Jeho funkce porovnáme s funkcemi vývojářských nástrojů Firefoxu a DevTools aplikace Google Chrome.

Otevřete Dev Tools

Stisknutím klávesy F12 otevřete vývojářské nástroje ve všech 3 případech: Nástroje pro vývojáře ve Firefoxu, DevTools v Chrome a F12 Dev Tools v Microsoft Edge. Toto je klávesová zkratka kde oficiální název Edge F12 Dev Tools pochází z.

Když otevřete Ed Dev's Tools, můžete narazit na jeden z jeho nejznámějších nedostatků: v současné době je to není možné připnout nástroje do existujícího okna. Můžete sledovat, co se děje na obrazovce vývojářských nástrojů Firefoxu a nástrojů Chrome DevTools, a to tak, že připojíte okno nástrojů dev do dolní části obrazovky..

Vývojáři společnosti Microsoft tvrdí, že tento problém vyřeší v budoucí aktualizaci.

Zkontrolujte DOM

DOM Explorer nástroj (Zkratka: CTRL + 1) je první záložka nástrojů Microsoft Edge F12 Dev. Její dispozice a celkový design je poměrně podobný Živel kartu Chrome a Inspektor záložka ve Firefoxu, nicméně schopnosti se viditelně liší.

V Edge se můžete podívat na vykreslený dokument HTML, související styly CSS a obsluhy událostí registrované na každém prvku. Také můžete najít malou grafiku o modelu boxu CSS s vypočítanými hodnotami, které jsou již dobře známé ze dvou konkurenčních prohlížečů.

Můžeš experimentovat s pravidly CSS odstraněním stávajících a přidáním nových a můžete vidět svůj souhrnné změny na samostatné podtabulce nazvané “Změny” (nachází se na levé straně). Toto je funkce, která není vytvořena ve vývojáři Firefoxu ani v aplikaci Chrome DevTools. To může dát rychlou rekapitulaci uživateli, takže je to opravdu užitečná volba.

Ve vývojářských nástrojích Firefoxu existují některé funkce, které ani Edge ani Google Chrome v současné době neposkytují, ale mohou výrazně pomoci životu designéra: nástroje pro analýzu písma a animace.

V Edge je cool výběr barvy ačkoli to může poněkud kompenzovat uživatele pro to.

Interakce s JavaScriptem

Utěšit Karta (Zkratka: CTRL + 2) v aplikaci Microsoft Edge umožňuje interakci s JavaScriptem vašich stránek, stejně jako ve Firefoxu a Chrome Dev Tools. Všechny tři umožňují sledovat chyby JavaScriptu v reálném čase a můžete je také analyzovat zadáním vlastního vstupu.

Konzolový nástroj Edge F12 Dev Tools má pěkný vzhled funkce automatického dokončování to vám pomůže s příkazy, nicméně to vypadá, že je méně informovaní ve srovnání s nástroji Firefox a Chrome Dev Tools.

Okraj odděluje chyby, varování a zprávy což je velká pomoc, ale ne něco, co ostatní dva balíčky nástrojů nemají.

Zdá se, že konzola Firefoxu je ze všech tří nástrojů dev, která je také nejprofesionálnější odděleně zobrazuje jiné druhy problémů: síť, CSS, chyby zabezpečení a protokolování zpráv, a umožňuje vám s nimi komunikovat prostřednictvím Rozhraní konzoly, nejen s chybami JavaScriptu.

Pochopte, co dělá váš kód

Debugger (zkratka: CTRL + 3) vám pomůže pochopit, co se děje s vaším kódem při hledání potenciálních chyb. Můžete nastavit hodinky a body přerušení a zobrazit zásobníky hovorů.

Podokno Watches zobrazuje proměnné hodnoty, režim Callstack zobrazuje řetězec volání funkcí, která vedla k aktuálnímu stavu, a režim zarážky zobrazuje seznam zarážek, které jste nastavili..

Edge F12 Dev Tools vám umožní pozastavit kód ve středu provedení, a projít jím po řádku. Máte také možnost zlepšit čitelnost kompilovaného nebo minifikovaného JavaScript souboru, a ty můžeš ladit různé zdroje (JavaScript, rozšíření atd.) Jeden po druhém.

Firefox a Chrome DevTools poskytují všechny tyto funkce, takže Edge nenabízí výjimečné zkušenosti s laděním, ale poskytuje uživateli spolehlivý a spolehlivý nástroj, který je v souladu s konkurencí..

Podívejte se na komunikaci mezi prohlížečem a serverem

Síť nástroj (zkratka: CTRL + 4) byl kompletně přepracován pro aplikaci Microsoft Edge od aplikace Internet Explorer 11. Pomocí tohoto praktického nástroje můžete sledovat komunikaci mezi serverem a prohlížečem, a kontrolovat jednotlivé požadavky.

Můžeš filtrovat výsledky podle typu obsahu například styly, obrázky, média, fonty, XHR a mnoho dalších. Můžete také debug AJAX pomocí nástroje Síť.

Karta Edge's a Firefox Network nabízí poměrně podobné možnosti a uživatelské rozhraní. Oba mají uživatelsky příjemný panel sidebar, který vám umožní podívat se na hlavičku HTTP vybraného zdroje, tělo HTTP, parametry, související cookies a časování po jednotlivých položkách..

Karta Síť Chrome DevTools nemá takovou tabulku, ale pokud kliknete na jednotlivé požadavky, můžete vidět stejné informace. Je to však méně intuitivní řešení.

Sledování pomalých stránek

Výkon (zkratka: CTRL + 5) vám pomůže pochopit důvody pomalé webové stránky. S nástrojem Výkon Microsoft vzal obrovský skok vpřed kombinací předchozí Odezva UI a Profiler nástroje pro vytvoření úplného zobrazení všech vašich skriptů a zobrazení výkonu.

Tento praktický nástroj vám poskytuje přehledy různé typy využití procesoru, vám umožní nahlédnout do rámového nátěru vašich stránek a je také možné izolovat různé uživatelské scénáře nastavením štítků na časové ose.

Během testovacího procesu jsme zjistili, že nástroj Performance v Edge nám poskytl více informací o rychlostech než vývojář Firefoxu nebo Chrome DevTools. Uživatelské rozhraní záložky Výkon v Edge je velmi dobře navržené a pomáhá nám s mnoha vizuálními narážkami a je to poměrně snadné. Pokud se chcete dozvědět více o tom, jak jej používat, přečtěte si podrobné dokumenty.

Diagnostikovat problémy s pamětí

Paměť nástroj (zkratka: CTRL + 6) umožňuje najít úniky paměti to může také zpomalit vaše webové stránky, navíc může stabilitu vašeho webu.

S pomocí pěkného grafu můžete snadno pochopit, kde vaše paměť roste, a můžete vytvářet snímky v konkrétních bodech, které umožňují analyzovat využití paměti. Můžete také porovnat dva snímky vytvořené v různých bodech životního cyklu stránky, aby bylo možné porozumět rozdílu mezi nimi.

Nástroje Chrome DevTools mají na kartě Profily také pěkný profil paměti, zatímco vývojář Firefoxu tuto funkci standardně neposkytuje, ale můžete si tyto doplňky stáhnout a nainstalovat, pokud chcete. Paměť profiler Chrome DevTools je poměrně pokročilý a nabízí více funkcí než Edge, například to vám umožní zaznamenávat alokace objektů JavaScript v čase které vám pomohou izolovat nevracení paměti.

Otestujte si své stránky na různých velikostech obrazovky

Emulace (Zkratka: CTRL + 7) umožňuje otestovat vaše stránky za různých okolností. Můžete si vybrat ze dvou profilů prohlížeče, Desktop a Windows 10 Mobile az mnoha různých uživatelských agentů včetně všech verzí aplikace Internet Explorer pro stolní počítače a mobilní zařízení zpět do IE6, spolu s mnoha konkurenty Edge, Chrome, Firefox, Safari atd..

Je zajímavé, že máte možnost si vzít podívejte se na svou stránku jako Bing Bot. Můžete také emulovat GPS, a nastavit různá usnesení a orientace.

Nástroje pro vývojáře Firefoxu nemají nástroj pro emulaci zařízení, ale nástroje Chrome DevTools mají takový sofistikovaný emulátor, s nímž si Edge sotva dokáže konkurovat.

Například obrazovka s emulací Chrome má přesná mřížka, do které je vloženo emulované zobrazení, a vy si můžete nejen vybrat z profilů prohlížeče a uživatelských agentů, ale také z mnoha zařízení, jako je různých verzích iPhone nebo Samsung Galaxy a mnoho dalších. Emulátor Chrome DevTools má také praktický Možnost Zoom a můžete otestovat své stránky v různých sítích, jako je 3G, 4G, DSL, WiFi, atd.

souhrn

Celkově lze říci, že nástroje Microsoft Edge F12 Dev Tools jsou překvapivě dobré. Poskytuje funkce velmi podobné populární webové vývojové sady nástrojů z jiných moderních prohlížečů. Existují dvě oblasti, kde Edge F12 Dev Tools je poměrně silný: uživatelské rozhraní to je opravdu intuitivní, uživatelsky příjemný a dobře navržený, a nástroje pro diagnostiku výkonu.

Pro tyto dvě funkce může být vhodné zvážit přepnutí na nebo alespoň testování Edge. Největším nedostatkem je nedostatek možnosti připevnit nástroje dev do dolní části obrazovky, ale doufejme, že Microsoft tento problém rychle vyřeší..