DevTools Showdown Edge F12 vs Firefox vs Chrome

A Microsoft Edge fejlesztői eszköze, a Windows 10 új alapértelmezett böngészője, az Internet Explorer 11 F12 Dev eszközeihez képest modern designt és néhány új funkciót kapott az elődjéhez képest..

Az a kérdés, hogy a Microsoft Edge dev-eszközei a népszerű versenytársaikhoz mértek - a modern eszközök böngészőinek eszközei, mint például a Mozilla Firefox és a Google Chrome, természetesen sok fejlesztő fejében jelentkeznek.

Ebben a hozzászólásban igyekszünk válaszolni erre a kérdésre, és kitaláljuk, hogy az Edge F12 Dev Tools-ját valóban érdemes használni. Összehasonlítjuk a jellemzőit a Firefox fejlesztői eszközeivel és a Google Chrome DevTools szolgáltatásaival.

Nyissa meg a Dev eszközöket

Az F12 megnyomása mindhárom esetben megnyitja a fejlesztői eszközöket: a Firefox fejlesztői eszközeit, a Chrome-ban lévő DevTools-ot és a Microsoft Edge-ben az F12 Dev Tools-ot. Ez a billentyűparancs, ahol a az Edge F12 Dev Tools hivatalos neve származik.

Amikor megnyitja az Edge Dev eszközeit, azonnal megtapasztalhatja az egyik legismertebb hiányosságát: jelenleg lehetetlen az eszközöket egy meglévő ablakhoz csatlakoztatni. Miközben követheti, hogy mi történik a képernyőn a Firefox fejlesztői eszközein és a Chrome DevTools-on, a dev eszközöket a képernyő aljára helyezve, akkor (jelenleg) nem teheted ugyanezt az Edge-vel.

A Microsoft fejlesztői azt állítják, hogy a jövőbeni frissítés során megoldják a problémát.

Vizsgálja meg a DOM-ot

A DOM Explorer eszköz (Shortcut: CTRL + 1) a Microsoft Edge F12 Dev Tools első lapja. Az elrendezése és az általános kialakítása nagyon hasonlít a Elem a Chrome és a Ellenőr fül a Firefoxban, de a képességek látványosan eltérnek.

Az Edge-ben megnézheti a renderelt HTML dokumentumot, a kapcsolódó CSS ​​stílusokat és az egyes elemeken regisztrált eseménykezelőket. A kis grafikát a CSS dobozmodellről is megtalálhatja a számított értékekkel, amelyek már jól ismertek a két versengő böngészőtől.

tudsz kísérletezzen CSS szabályokkal az aktuálisak törlésével, és újak hozzáadásával, és láthatja a összegzett változások egy külön alabombon “Változtatások” (a bal oldalon található). Ez utóbbi a Firefox fejlesztői és a Chrome DevTools nem épített szolgáltatás. Gyors visszavonást adhat a felhasználónak, így ez egy igazán hasznos lehetőség.

A Firefox fejlesztői eszközeiben vannak olyan funkciók, amelyeket az Edge és a Google Chrome jelenleg nem nyújt, de jelentősen hozzájárulhat a tervező életéhez: a Betűtípus és az Animáció elemző eszközei.

Edge-ben van egy hűvös színválasztó bár ez valamivel kompenzálhatja a felhasználót.

Kapcsolódjon a JavaScript-hez

A Konzol lap (Gyorsbillentyű: CTRL + 2) a Microsoft Edge-ben lehetővé teszi, hogy kölcsönhatásba lépjen a webhelye JavaScript-jével, mint a Firefox és a Chrome Dev Tools. Mindhárom lehetővé teszi, hogy a valós idejű JavaScript-hibákat kövesse, és azokat saját bemenetének megadásával is elemezheti.

Az Edge F12 Dev eszközének konzoleszköze szép automatikus kiegészítés funkció ez segít a parancsokban, de úgy tűnik kevésbé tájékozott összehasonlítva a Firefox és a Chrome Dev Eszközökkel.

Él elválasztja a hibákat, figyelmeztetéseket és üzeneteket ami nagy segítség, bár nem a másik két eszközkészletnek nincs.

Úgy tűnik, hogy a Firefox konzolja a legprofesszionálisabb a három dev eszköz közül, ahogyan ez is külön-külön mutatja be más típusú problémákat: hálózat, CSS, biztonsági hibák és naplózási üzenetek, és lehetővé teszi, hogy ezek segítségével lépjen kapcsolatba velük Konzol interfész, nem csak a JavaScript hibáival.

Ismerje meg, hogy mit csinál a kód

A Debugger eszköz (Gyorsbillentyű: CTRL + 3) segít megérteni, hogy mi történik a kóddal, miközben a lehetséges hibákat találja. Beállíthatja az órákat és a töréspontokat, és megtekintheti a hívások halmazait.

Az órák ablaka változó értékeket jelenít meg, a Callstack mód pedig az aktuális állapothoz vezető funkcióhívások láncát mutatja, és a Breakpoints módban a beállított töréspontok listája látható..

Az Edge F12 eszközei lehetővé teszik szüneteltesse a kódot a végrehajtás közepén, és lépjen át rajta. Lehetőség van rá javíthatja a fordított vagy módosított JavaScript fájl olvashatóságát, és te tudod különböző erőforrások hibakeresését (JavaScript, bővítmények stb.) Egyenként.

A Firefox és a Chrome DevTools mindezeket a funkciókat biztosítja, így az Edge nem nyújt kivételes hibakeresési élményt, de szilárd és megbízható eszközt biztosít a felhasználónak, amely a versenytársaihoz hasonló..

Vessen egy pillantást a böngésző-szerver kommunikációra

A Hálózat eszköz (Shortcut: CTRL + 4) az Internet Explorer 11 óta teljesen újratervezett a Microsoft Edge számára. Ezzel a praktikus eszközzel kövesse a szerver és a böngésző közötti kommunikációt, és megvizsgálja az egyedi kérelmeket.

tudsz szűrje az eredményeket tartalomtípus szerint például stíluslapok, képek, média, betűtípusok, XHR és sok más. Te is debug AJAX a hálózati eszköz segítségével.

Az Edge és a Firefox hálózati lapja nagyon hasonló képességeket és felhasználói felületet kínál. Mindkettőnek van egy felhasználóbarát oldalsávpanelje, amely lehetővé teszi, hogy nézze meg a kiválasztott erőforrás HTTP fejlécét, a HTTP testét, a paramétereit, a kapcsolódó cookie-kat és az időzítés elemenként.

A Chrome DevTools hálózati lapja nem rendelkezik ilyen panelrel, de ha egyenként kattint a kérésekre, ugyanazt az információt láthatja. Ez egy kevésbé intuitív megoldás.

Lassú oldalak követése

A Teljesítmény fül (Shortcut: CTRL + 5) segít megérteni a lassú weboldal mögött rejlő okokat. A Performance eszközzel a Microsoft óriási előrelépést tett az előző kombinálásával UI reagálóképesség és profil eszközök az összes szkriptek végpontok közötti nézetének létrehozásához és a teljesítmény megjelenítéséhez.

Ez a praktikus eszköz jelentéseket nyújt Önnek különböző típusú CPU-használat, betekintést nyújt a webhely keretfestékébe, és ez is lehetséges izolálja a különböző felhasználói forgatókönyveket az idővonalon lévő címkék beállításával.

A tesztelés során megállapítottuk, hogy az Edge Teljesítmény eszköze szolgáltatott minket További információ a sebességgel kapcsolatos kérdésekről vagy Firefox fejlesztő vagy Chrome DevTools. Az Edge Teljesítmény lapjának felhasználói felülete meglehetősen jól megtervezett, sok vizuális segítséget nyújt, és viszonylag könnyen használható. Ha többet szeretne tudni arról, hogyan kell használni, olvassa el a részletes dokumentumokat.

Memória problémák diagnosztizálása

A memória eszköz (Shortcut: CTRL + 6) lehetővé teszi találni a memóriaszivárgást ez is lassíthatja weblapját, sőt befolyásolja a stabilitást webhelye.

Egy szép grafikon segítségével könnyedén megértheti, hogy hol nő a memóriahasználat, és pillanatfelvételt készíthet olyan pontokon, amelyek lehetővé teszik a memóriahasználat elemzését. Te is hasonlítsa össze a különböző pontokon készített két pillanatfelvételt az életciklusának megértése, hogy megértsük a különbséget.

A Chrome DevTools-nak is van egy szép memóriaprofilja a Profilok lapon, míg a Firefox-fejlesztő alapértelmezés szerint nem biztosítja ezt a funkciót, de ha szükséges, letöltheti és telepítheti az ilyen kiegészítőket. A Chrome DevTools memóriaprofilja meglehetősen fejlett, és több funkciót kínál, mint az Edge, például lehetővé teszi rögzítse a JavaScript objektum-allokációkat idővel amelyek segítenek a memóriaszivárgások elkülönítésében.

Tesztelje webhelyét különböző képernyőméreteken

A emuláció eszköz (Gyorsbillentyű: CTRL + 7) lehetővé teszi, hogy webhelyét különböző körülmények között tesztelje. Két böngészőprofil közül választhat: Desktop és Windows 10 Mobile, és számos különböző felhasználói ügynök közül, beleértve az Internet Explorer összes asztali és mobil verzióját az IE6-hoz, sok Edge versenytársával, a Chrome, a Firefox, a Safari stb..

Érdekes, hogy lehetősége van a nézd meg az oldaladat, mint egy Bing Botot. Te is emuláljon egy GPS-t, és állítsa be különböző állásfoglalások és orientációk.

A Firefox-fejlesztői eszközöknek nincs eszközemulációs eszköze, de a Chrome DevTools-nak olyan kifinomult emulátora van, amellyel az Edge alig versenyezhet vele.

Például a Chrome emulációs képernyője egy pontos rács, ahol az emulált nézet be van helyezve, és nem csak a böngészőprofilok és a felhasználói ügynökök közül választhat, hanem számos olyan eszközről is, mint a különböző változatok iPhone vagy Samsung Galaxy és sok más. A Chrome DevTools emulátorának is praktikus Nagyítás opció és tesztelheti webhelyét különböző hálózatokon, mint a 3G, 4G, DSL, WiFi stb.

összefoglalás

Összességében úgy tűnik, hogy a Microsoft Edge F12 Dev Tools meglepően jó. Olyan funkciókat biztosít, amelyek meglehetősen hasonlítanak más modern böngészők népszerű webfejlesztő eszköztáraihoz. Két olyan terület van, ahol az Edge F12 Dev Tools meglehetősen erős: a felhasználói felület ez tényleg intuitív, felhasználóbarát és jól megtervezett, és a teljesítménydiagnosztikai eszközök.

E két tulajdonság esetében érdemes megfontolni, hogy átkapcsol-e az Edge-re vagy legalábbis azt tesztelni. A legnagyobb hiányosság az, hogy nincs lehetőség arra, hogy a dev eszközöket a képernyő aljára csatolja, de reméljük, hogy a Microsoft gyorsan megoldja ezt a problémát.