DevTools Showdown Edge's F12 vs Firefox vs Chrome

„Microsoft Edge“ naujojo numatytojo „Windows 10“ naršyklės įrankiai sukūrė šiuolaikišką dizainą ir keletą naujų funkcijų, palyginti su ankstesniu „Internet Explorer 11“ „F12 Dev“ įrankiu.

Klausimas, ar „Microsoft Edge“ dev įrankiai matuoja savo populiariausius konkurentus - dev įrankius kitose šiuolaikinėse naršyklėse, pvz., „Mozilla Firefox“ ir „Google Chrome“, natūraliai kyla daugelio kūrėjų protuose..

Šiame pranešime stengiamės atsakyti į šį klausimą ir išsiaiškinti, ar „Edge“ „F12 Dev“ įrankiai yra tikrai verta naudoti. Palyginsime jos funkcijas su „Firefox“ kūrėjų įrankių ir „Google Chrome“ DevTools funkcijomis.

Atidarykite „Dev“ įrankius

Paspaudus F12 atidaro kūrėjo įrankius visais 3 atvejais: „Developer Tools“ „Firefox“, „DevTools“ „Chrome“ ir „F12 Dev Tools“ „Microsoft Edge“. Tai spartusis klavišas, kuriame oficialus „Edge“ „F12 Dev“ įrankių pavadinimas ateina iš.

Atidarę „Edge“ „Dev“ įrankius, galite iš karto patirti vieną iš labiausiai žinomų trūkumų: šiuo metu tai yra neįmanoma prijungti įrankių prie esamo lango. Nors galite stebėti, kas vyksta ekrane „Firefox“ kūrėjų įrankiuose ir „Chrome DevTools“, paspaudę „Dev“ įrankių langą į ekrano apačią, jūs (šiuo metu) negalite to padaryti su „Edge“.

„Microsoft“ kūrėjai teigia, kad išspręs šią problemą ateityje.

Patikrinkite DOM

The DOM Explorer įrankis (Spartusis klavišas: CTRL + 1) yra pirmasis „Microsoft Edge“ „F12 Dev“ įrankių skirtukas. Jo išdėstymas ir bendras dizainas yra gana panašūs į Elementas skirtuką „Chrome“ ir „ Inspektorius skirtukas „Firefox“, tačiau galimybės pastebimai skiriasi.

„Edge“ galite pažvelgti į pateiktą HTML dokumentą, susijusius CSS stilius ir kiekvieno elemento registruotus įvykių tvarkytojus. Taip pat galite rasti mažą grafiką apie CSS dėžutės modelį su apskaičiuotomis reikšmėmis, kurios jau gerai žinomos iš dviejų konkuruojančių naršyklių.

Tu gali eksperimentuoti su CSS taisyklėmis ištrindami esamus ir pridedant naujus, ir jūs galite matyti savo apibendrinti pakeitimai atskirame skiltyje “Pakeitimai” (tai yra kairėje pusėje). Pastarasis yra funkcija, kuri nėra sukurta ne „Firefox“ kūrėjo, nei „Chrome DevTools“. Tai gali suteikti naudotojui greitą atsikėlimą, todėl tai tikrai naudinga galimybė.

Yra keletas „Firefox“ kūrėjų įrankių funkcijų, kurių nei „Edge“, nei „Google Chrome“ šiuo metu teikia, bet gali žymiai padėti dizainerio gyvenimui: „Font“ ir „Animation“ analizatoriaus įrankiai.

„Edge“ yra a vėsioje spalvų rinkiklis nors tai gali šiek tiek kompensuoti vartotoją.

Bendraukite su „JavaScript“

The Konsolė „Microsoft Edge“ skirtukas (spartusis klavišas: CTRL + 2) leidžia bendrauti su jūsų svetainės „JavaScript“, kaip ir „Firefox“ ir „Chrome Dev“ įrankiuose. Visi trys leidžia realiu laiku sekti „JavaScript“ klaidas ir juos taip pat galite analizuoti įvesdami savo duomenis.

„Edge“ „F12 Dev Tools“ konsolės įrankis yra gražus automatinio užbaigimo funkcija tai padeda jums su komandomis, tačiau atrodo mažiau nusimanantys palyginti su „Firefox“ ir „Chrome Dev“ įrankiais.

Briauna atskiria klaidas, įspėjimus ir pranešimus tai yra didelė pagalba, nors ir ne tai, ką kiti du įrankiai neturi.

Panašu, kad „Firefox“ konsolė yra labiausiai profesionali iš trijų „dev“ priemonių atskirai rodomos kitos rūšies problemos: tinklas, CSS, saugumo klaidos ir pranešimų registravimas, ir leidžia jums bendrauti su jais per Konsolės sąsaja, ne tik su „JavaScript“ klaidomis.

Suprasti, ką veikia jūsų kodas

The Debugger įrankis (spartusis klavišas: CTRL + 3) padeda suprasti, kas vyksta su jūsų kodu, o ieškant galimų klaidų. Galite nustatyti laikrodžius ir pertraukas bei peržiūrėti skambučių kaminus.

„Watches“ (laikrodžių) srityje rodomos kintamos vertės, „Callstack“ režimas rodo funkcijų skambučių grandinę, kuri paskatino dabartinę būseną, o „Breakpoints“ režimas rodo nustatytų taškų taškų sąrašą.

„Edge“ „F12 Dev“ įrankiai leidžia jums pristabdyti kodą vykdymo viduryje ir pereikite per liniją. Jūs taip pat turite galimybę pagerinti sukaupto ar redaguoto „JavaScript“ failo aiškumą, ir jūs galite derinti skirtingus išteklius („JavaScript“, plėtiniai ir pan.) Po vieną.

„Firefox“ ir „Chrome DevTools“ teikia visas šias funkcijas, todėl „Edge“ nepalaiko išskirtinės derinimo patirties, bet suteikia vartotojui tvirtą ir patikimą įrankį, kuris yra lygus konkurentams.

Pažvelkite į naršyklės serverio ryšį

The Tinklas įrankis (spartusis klavišas: CTRL + 4) „Microsoft Edge“ buvo visiškai pakeistas nuo „Internet Explorer 11“. sekite ryšį tarp serverio ir naršyklės, ir tikrinti atskirus prašymus.

Tu gali filtruokite rezultatus pagal turinio tipą pvz., stilių lentelės, vaizdai, laikmenos, šriftai, XHR ir daugelis kitų. Tu taip pat gali derinti AJAX su tinklo įrankiu.

„Edge“ ir „Firefox“ tinklo skirtukai suteikia gana panašias galimybes ir vartotojo sąsają. Abu turi patogią šoninę juostą, kurioje galite peržiūrėti pasirinkto išteklių HTTP antraštę, HTTP kūną, parametrus, susijusius slapukus ir laiko elementų elementus.

„Chrome DevTools“ tinklo skirtuke nėra tokios srities, bet jei spustelėsite užklausas po vieną, galite pamatyti tą pačią informaciją. Tai yra mažiau intuityvus sprendimas.

Stebėkite lėtus puslapius

The Spektaklis skirtukas (Spartusis klavišas: CTRL + 5) padeda suprasti lėto tinklalapio priežastis. Naudodamiesi „Performance“ įrankiu „Microsoft“ ėjo didžiulį žingsnį pirmyn UI reagavimas ir profiliavimas įrankiai, leidžiantys peržiūrėti visų scenarijų vaizdą ir vizualizuoti našumą.

Šis patogus įrankis suteikia jums ataskaitas įvairių tipų procesoriaus naudojimas, suteikia jums įžvalgų apie jūsų svetainės rėmo dažus ir taip pat galima atskirti skirtingus naudotojo scenarijus nustatydami etiketes laiko juostoje.

Bandymo metu nustatėme, kad „Edge“ našumo įrankis suteikė mums daugiau informacijos apie greičio problemas nei „Firefox“ kūrėjas, nei „Chrome DevTools“. „Edge“ skirtuko „Efektyvumas“ vartotojo sąsaja yra gana gerai suprojektuota, padedanti mums daug vizualinių užuominų, ir tai yra gana paprasta naudoti. Jei norite daugiau sužinoti apie tai, kaip jį naudoti, perskaitykite išsamius dokumentus.

Diagnozuokite atminties problemas

The Atmintis įrankis (spartusis klavišas: CTRL + 6) leidžia rasti atminties nutekėjimą tai taip pat gali sulėtinti jūsų tinklalapį, be to, gali poveikį stabilumui jūsų svetainės.

Naudodami gražią grafiką, galite lengvai suprasti, kur auga atminties naudojimas, ir galite fotografuoti konkrečiuose taškuose, kurie leidžia analizuoti atminties naudojimą. Tu taip pat gali palyginkite du skirtingų taškų vaizdus puslapio gyvavimo ciklą, kad suprastumėte jų skirtumą.

„Chrome“ įrenginių „DevTools“ skirtuke „Profiliai“ taip pat yra gražus atminties profileris, o „Firefox“ kūrėjas n ÷ ra numatęs šios funkcijos, tačiau, jei norite, galite atsisiųsti ir įdiegti tokius priedus. „Chrome DevTools“ atminties profileris yra gana pažengęs ir siūlo daugiau funkcijų nei „Edge“, pvz., Tai leidžia jums laikui bėgant įrašo „JavaScript“ objektų paskyrimus kuri gali padėti izoliuoti atminties nutekėjimą.

Išbandykite savo svetainę skirtingais ekrano dydžiais

The Emuliacija įrankis (spartusis klavišas: CTRL + 7) leidžia išbandyti savo svetainę skirtingomis aplinkybėmis. Galite rinktis iš dviejų naršyklės profilių: „Desktop“ ir „Windows 10 Mobile“, ir iš daugelio skirtingų naudotojų agentų, įskaitant visas „Internet Explorer“ darbalaukio ir mobiliojo ryšio versijas atgal į IE6, kartu su daugeliu „Edge“ konkurentų, „Chrome“, „Firefox“, „Safari“ ir kt..

Įdomu tai, kad turite galimybę pasirinkti pažvelkite į savo puslapį kaip „Bing Bot“. Tu taip pat gali imituoja GPS, ir nustatyti skirtingos rezoliucijos ir orientacijos.

„Firefox“ kūrėjų įrankiuose nėra įrenginio emuliacijos įrankio, tačiau „Chrome DevTools“ turi tokį sudėtingą emuliatorių, kurį „Edge“ vargu ar gali su juo konkuruoti.

Pavyzdžiui, „Chrome“ emuliacijos ekranas turi tikslus tinklelis, kuriame įterptas emuliuojamas vaizdas, ir jūs ne tik galite pasirinkti iš naršyklės profilių ir naudotojų agentų, bet ir iš daugelio įrenginių, pvz., skirtingų versijų „iPhone“ arba „Samsung Galaxy“ ir daugelis kitų. „Chrome DevTools“ emuliatorius taip pat yra patogus Padidinti parinktį ir galite išbandyti savo svetainę įvairiuose tinkluose, pvz., 3G, 4G, DSL, WiFi ir kt.

Santrauka

Apskritai atrodo, kad „Microsoft Edge“ „F12 Dev“ įrankiai yra stebėtinai geri. Ji suteikia funkcijų, kurios yra gana panašios į populiarių kitų modernių naršyklių žiniatinklio kūrimo priemonių rinkinius. Yra dvi sritys, kuriose Edge F12 Dev Tools yra gana stiprus: vartotojo sąsaja tai tikrai intuityvus, patogus naudoti ir gerai suprojektuotas, ir efektyvumo diagnostikos įrankiai.

Dėl šių dviejų savybių verta apsvarstyti galimybę pereiti prie „Edge“ arba bent jau ją išbandyti. Didžiausias trūkumas yra tai, kad trūksta galimybės prijungti „dev“ įrankius į ekrano apačią, tačiau tikėkimės, kad „Microsoft“ greitai išspręs šią problemą.