DevTools Showdown Edge lui F12 vs Firefox vs Chrome

Instrumentele de dezvoltare ale Microsoft Edge, noul browser implicit al Windows 10, au un design modern și câteva caracteristici noi în comparație cu predecesorul său, Internet Explorer 11's F12 Dev Tools.

Întrebarea dacă instrumentele Microsoft dev deviază pe competitorii lor populare - instrumentele dev din alte browsere moderne, precum Mozilla Firefox și Google Chrome, apar în mod natural în mintea multor dezvoltatori.

În acest articol încercăm să răspundem la această întrebare și să ne dăm seama dacă Edge F12 Dev Tools merită cu adevărat folosită. Vom compara caracteristicile sale cu cele ale instrumentelor de dezvoltator ale Firefox și ale DevTools-urilor Google Chrome.

Deschideți Instrumentele de configurare

Apăsând F12 se deschid instrumentele de dezvoltare în toate cele 3 cazuri: Instrumente pentru dezvoltatori în Firefox, DevTools în Chrome și F12 Dev Tools în Microsoft Edge. Aceasta este comanda rapidă de la tastatură unde numele oficial al lui Edge F12 Dev Tools vine de la.

Când deschideți Instrumentele Edge de la Edge, puteți experimenta imediat una dintre cele mai cunoscute neajunsuri: în prezent este imposibil de fixat instrumentele într-o fereastră existentă. În timp ce puteți urmări ce se întâmplă pe ecran în Firefox Developer Tools și Chrome DevTools prin fixarea ferestrei de instrumente dev în partea de jos a ecranului, tu (în prezent) nu puteți face același lucru cu Edge.

Dezvoltatorii Microsoft susțin că vor remedia această problemă într-o actualizare viitoare.

Inspectați DOM

DOM Explorer (shortcut: CTRL + 1) este prima filă a F12 Dev Tools a Microsoft Edge. Designul său și designul general sunt destul de asemănătoare cu modelul Element fila Chrome și Inspector în Firefox, dar capabilitățile diferă.

În Edge puteți să aruncați o privire asupra documentului HTML rendered, stilurilor CSS aferente și editorilor de evenimente înregistrați pe fiecare element. De asemenea, puteți găsi graficul mic despre modelul cutiei CSS cu valorile calculate, deja cunoscute de cele două browsere concurente.

Poti experimentați cu reguli CSS ștergând cele actuale și adăugând altele noi și vă puteți vedea rezumatul modificărilor pe o subtablă separată numită “Schimbări” (este situat în partea stângă). Aceasta din urmă este o caracteristică care nu este construită în dezvoltatorii de Firefox și Chrome DevTools. Acesta poate oferi o recapitulare rapidă utilizatorului, deci este o opțiune foarte utilă.

Există câteva funcții în Instrumentele de dezvoltare pentru Firefox pe care nici Edge, nici Google Chrome nu le oferă în prezent, dar care pot contribui semnificativ la viața unui designer: instrumentele de analiză pentru fonturi și animație.

În Edge există o picker de culoare rece deși acest lucru poate compensa oarecum utilizatorul pentru el.

Interacționați cu JavaScript

Consolă (Shortcut: CTRL + 2) din Microsoft Edge vă permite să interacționați cu JavaScript-ul site-ului dvs., la fel ca în Firefox și Chrome Dev Tools. Toate cele trei vă permit să urmăriți erorile JavaScript în timp real și puteți, de asemenea, să le analizați introducând propriile dvs. intrări.

Instrumentul Console de la F12 Dev Tools de la Edge are un aspect plăcut funcția de completare automată care vă ajută cu comenzile, oricum pare să fie mai puțin informat în comparație cu cea din Firefox și Chrome Dev Tools.

Margine separă erorile, avertismentele și mesajele care este un mare ajutor, deși nu este ceva ce alte două seturi de instrumente nu au.

Consola Firefox pare a fi cea mai profesională din cele trei instrumente dev, așa cum este și ea arată separat alte tipuri de probleme: rețea, CSS, erori de securitate și mesaje de logare, și vă permite să interacționați cu acestea prin intermediul Consola de interfață, nu doar cu erorile JavaScript.

Înțelegeți ce face codul dvs.

debugger (Shortcut: CTRL + 3) vă ajută să înțelegeți ce se întâmplă cu codul dvs. în timp ce găsiți erori potențiale. Puteți seta ceasuri și puncte de interferență și puteți vedea stive de apeluri.

Panoul Ceasuri afișează valori variabile, modul Callstack arată lanțul de apeluri funcționale care a condus la starea curentă, iar modul Breakpoints prezintă o listă a punctelor de întrerupere pe care le-ați setat.

Edge F12 Dev Tools te lasă întrerupeți codul în mijlocul executării, și treceți prin linie. Aveți, de asemenea, opțiunea de a îmbunătățirea lizibilității unui fișier JavaScript compilat sau minimizat, si tu poti depanarea diferitelor resurse (JavaScript, extensii, etc.) unul câte unul.

Aplicațiile Firefox și Chrome DevTools oferă toate aceste funcționalități, astfel încât Edge nu oferă o experiență excepțională de depanare, dar oferă utilizatorului un instrument solid și fiabil care este în concordanță cu concurenții săi.

Aruncați o privire la comunicarea browser-server

Reţea (Shortcut: CTRL + 4) a fost complet reproiectat pentru Microsoft Edge de la Internet Explorer 11. Cu ajutorul acestui instrument la îndemână puteți urmați comunicarea dintre server și browser, și să inspecteze cererile individuale.

Poti filtrați rezultatele după tipul de conținut cum ar fi foi de stil, imagini, suporturi media, fonturi, XHR și multe altele. Poti de asemenea depana AJAX cu ajutorul instrumentului de rețea.

Tab-ul Edge's și Firefox oferă o capacitate destul de asemănătoare și o interfață cu utilizatorul. Ambele au un panou bara laterală ușor de utilizat, care vă permite să aruncați o privire asupra antetului HTTP al resursei selectate, a corpului HTTP, a parametrilor, a modulelor cookie și a cronometrărilor item-by-item.

Fila de rețea Chrome DevTools nu are un panou ca acesta, dar dacă faceți clic pe solicitări câte unul, puteți vedea aceleași informații. Totuși, este o soluție mai puțin intuitivă.

Urmăriți paginile lente

Performanţă (Shortcut: CTRL + 5) vă ajută să înțelegeți motivele din spatele unei pagini web lente. Cu instrumentul de performanță Microsoft a făcut un salt uriaș înainte prin combinarea precedentului UI Responsabilitate și Profiler instrumente pentru a crea o vizualizare end-to-end a tuturor scenariilor dvs. și vizualizarea performanței.

Acest instrument util vă oferă rapoarte despre diferite tipuri de utilizare CPU, vă oferă informații despre vopseaua de pe site-ul dvs. și este, de asemenea, posibil să izolați diferite scenarii de utilizatori prin setarea de etichete pe cronologie.

În timpul procesului de testare am descoperit că ne-a oferit instrumentul de performanță în Edge mai multe informații despre problemele de viteză decât dezvoltatorul Firefox sau Chrome DevTools. Interfața cu utilizatorul din fila Performanță în Edge este destul de bine concepută, ajutându-ne cu multe indicii vizuale și este relativ ușor de utilizat. Dacă doriți să aflați mai multe despre modul de utilizare, citiți Documente detaliate.

Diagnosticarea problemelor de memorie

Memorie (Comanda rapidă: CTRL + 6) face posibilă găsiți scurgeri de memorie care poate încetini, de asemenea, pagina dvs. de web, mai mult poate impactul stabilității de pe site-ul dvs..

Cu ajutorul unui grafic frumos puteți înțelege cu ușurință unde crește utilizarea memoriei dvs. și puteți face instantanee în anumite puncte care permit analizarea utilizării memoriei. Poti de asemenea comparați două instantanee făcute în diferite puncte din ciclul de viață al paginii pentru a înțelege diferența dintre ele.

Chrome DevTools au, de asemenea, un profil de memorie plăcut sub tab-ul Profiles, în timp ce Firefox Developer nu oferă această caracteristică în mod implicit, dar puteți descărca și instala aplicații asemănătoare dacă doriți. Profilul de memorie al Chrome DevTools este destul de avansat și oferă mai multe caracteristici decât Edge, de exemplu, vă permite înregistrați alocările obiectului JavaScript în timp care vă pot ajuta să izolați scurgerile de memorie.

Testați-vă site-ul pe diferite dimensiuni ale ecranului

emulație (Comanda rapidă: CTRL + 7) vă permite să testați site-ul în diferite circumstanțe. Aveți posibilitatea să alegeți din două profiluri de browser, Desktop și Windows 10 Mobile și de la mulți agenți utilizator diferit, inclusiv toate versiunile desktop și mobile ale Internet Explorer înapoi la IE6, de-a lungul tuturor concurenților Edge, Chrome, Firefox, Safari etc..

Este interesant faptul că aveți opțiunea de a lua uita-te la pagina ta ca Bing Bot. Poti de asemenea emula un GPS, și set diferite rezoluții și orientări.

Instrumentele de dezvoltator ale Firefox nu dispun de un instrument de emulare a dispozitivului, dar Chrome DevTools are un emulator atât de sofisticat încât Edge nu poate concura cu el.

De exemplu, ecranul de emulare Chrome are un grilă exactă în care este inserată vizualizarea emulate, și nu numai că puteți alege dintre profilurile browserului și agenții utilizator, dar și de la multe dispozitive, cum ar fi versiuni diferite de iPhone sau Samsung Galaxy și multe altele. Emulatorul Chrome DevTools are, de asemenea, un avantaj Zoom opțiune și puteți testa site-ul dvs. pe diferite rețele, cum ar fi 3G, 4G, DSL, WiFi, etc.

rezumat

În ansamblu, F12 Dev Tools a lui Microsoft Edge pare a fi surprinzător de bună. Acesta oferă caracteristici destul de asemănătoare cu cele mai populare instrumente de dezvoltare web ale altor browsere moderne. Există două domenii în care Edge F12 Dev Tools este destul de puternic: interfața cu utilizatorul asta este cu adevărat intuitiv, ușor de utilizat și bine proiectat, si instrumente de diagnosticare performante.

Pentru aceste două caracteristici merită să luați în considerare trecerea la, sau cel puțin testarea Edge. Cel mai mare neajuns este lipsa posibilității de a fixa instrumentele dev în partea de jos a ecranului, dar să sperăm că Microsoft va repara rapid această problemă.