DevTools Showdown Edge F12 vs Firefox vs Chrome
Die Entwicklertools von Microsoft Edge, dem neuen Standardbrowser von Windows 10, wurden im Vergleich zu seinem Vorgänger, den F12-Entwicklertools von Internet Explorer 11, mit einem modernen Design und einigen neuen Funktionen ausgestattet.
Die Frage, ob die Entwicklertools von Microsoft Edge mit ihren beliebten Konkurrenten - den Entwicklertools in anderen modernen Browsern wie Mozilla Firefox und Google Chrome - mithalten können, stellt sich bei vielen Entwicklern natürlich ein.
In diesem Beitrag versuchen wir, diese Frage zu beantworten und herauszufinden, ob F12 Dev Tools von Edge wirklich wert sind. Wir werden seine Funktionen mit denen der Firefox Developer Tools und den DevTools von Google Chrome vergleichen.
Öffnen Sie die Dev Tools
Durch Drücken von F12 werden die Entwicklertools in allen drei Fällen geöffnet: Entwicklertools in Firefox, DevTools in Chrome und F12-Entwicklertools in Microsoft Edge. Dies ist die Tastenkombination, bei der die Offizieller Name der F12 Dev Tools von Edge kommt von.
Wenn Sie die Entwicklungswerkzeuge von Edge öffnen, können Sie gleichzeitig einen der bekanntesten Nachteile feststellen: derzeit ist es der Fall Die Werkzeuge können nicht an ein vorhandenes Fenster angehängt werden. Sie können das, was auf dem Bildschirm in den Firefox Developer Tools und Chrome DevTools auf dem Bildschirm angezeigt wird, verfolgen, indem Sie das Dev Tools-Fenster am unteren Rand des Bildschirms fixieren. Dies ist jedoch (derzeit) nicht mit Edge möglich.
Die Entwickler von Microsoft behaupten, dass sie dieses Problem in einem zukünftigen Update beheben werden.
Überprüfen Sie das DOM
Das DOM Explorer Tool (Abkürzung: STRG + 1) ist die erste Registerkarte der F12 Dev Tools von Microsoft Edge. Das Layout und das Gesamtdesign ähnelt dem Element Registerkarte von Chrome und der Inspektor Registerkarte in Firefox, jedoch unterscheiden sich die Fähigkeiten geringfügig.
In Edge können Sie das gerenderte HTML-Dokument, die zugehörigen CSS-Stile und die für jedes Element registrierten Event-Handler betrachten. Sie finden auch die kleine Grafik über das CSS-Boxmodell mit den berechneten Werten, die bereits von den beiden konkurrierenden Browsern bekannt ist.
Sie können experimentiere mit CSS-Regeln indem Sie aktuelle löschen und neue hinzufügen, und Sie können Ihre sehen Änderungen zusammengefasst auf einem separaten Unterreiter aufgerufen “Änderungen” (befindet sich auf der linken Seite). Letzteres ist eine Funktion, die weder in Firefox Developer noch in Chrome DevTools eingebaut ist. Es kann dem Benutzer eine schnelle Zusammenfassung geben, also eine wirklich nützliche Option.
In den Firefox Developer Tools gibt es einige Funktionen, die weder von Edge noch von Google Chrome derzeit bereitgestellt werden, jedoch das Leben eines Designers erheblich verbessern können: die Analysetools Font und Animation.
In Edge gibt es eine coole Farbauswahl Dies kann den Benutzer jedoch etwas entschädigen.
Mit JavaScript interagieren
Das Konsole Über die Registerkarte (Tastenkombination: STRG + 2) in Microsoft Edge können Sie mit dem JavaScript Ihrer Website interagieren, genau wie in Firefox und den Chrome Dev Tools. Alle drei ermöglichen es Ihnen, JavaScript-Fehlern in Echtzeit zu folgen, und Sie können sie auch durch Eingabe Ihrer eigenen Eingabe analysieren.
Das Console-Tool der F12-Dev-Tools von Edge hat eine nette Wirkung Autovervollständigung das hilft dir bei den befehlen, wie es scheint weniger kenntnisreich im Vergleich zu Firefox und Chrome Dev Tools.
Kante trennt Fehler, Warnungen und Meldungen Das ist eine große Hilfe, wenn auch nicht etwas, das die beiden anderen Toolkits nicht haben.
Die Firefox-Konsole scheint das professionellste der drei Entwickler-Tools zu sein, wie es auch der Fall ist Zeigt andere Probleme separat an: Netzwerk, CSS, Sicherheitsfehler und Protokollierungsmeldungen, und ermöglicht es Ihnen, mit diesen über die Konsolenschnittstelle, Nicht nur bei den JavaScript-Fehlern.
Verstehen, was Ihr Code tut
Das Debugger Mit dem Tool (Tastenkombination: STRG + 3) können Sie verstehen, was mit Ihrem Code geschieht, während Sie mögliche Fehler finden. Sie können Überwachungen und Haltepunkte einstellen und Anrufstapel anzeigen.
Der Watches-Bereich zeigt die Werte der Variablen an, der Callstack-Modus zeigt die Kette der Funktionsaufrufe an, die zum aktuellen Status geführt haben, und der Breakpoints-Modus zeigt eine Liste der von Ihnen festgelegten Breakpoints.
Die F12-Entwicklerwerkzeuge von Edge lassen Sie zu pausiere deinen code in der Mitte der Ausführung und Schritt für Schritt durchlaufen. Sie haben auch die Möglichkeit zu Verbesserung der Lesbarkeit einer kompilierten oder reduzierten JavaScript-Datei, und du kannst verschiedene Ressourcen debuggen (JavaScript, Erweiterungen usw.) nacheinander.
Firefox und Chrome DevTools stellen alle diese Funktionen bereit, sodass Edge keine außergewöhnlichen Debugging-Funktionen bietet. Dem Benutzer steht jedoch ein solides und zuverlässiges Tool zur Verfügung, das mit den Wettbewerbern vergleichbar ist.
Schauen Sie sich die Browser-Server-Kommunikation an
Das Netzwerk Das Tool (Abkürzung: STRG + 4) wurde seit dem Internet Explorer 11 für Microsoft Edge vollständig neu gestaltet. Mit Hilfe dieses praktischen Tools können Sie dies Folgen Sie der Kommunikation zwischen Server und Browser, und prüfen Sie die einzelnen Anforderungen.
Sie können filtern Sie die Ergebnisse nach Inhaltstyp wie Stylesheets, Bilder, Medien, Schriftarten, XHR und viele andere. Du kannst auch debuggen Sie AJAX mit Hilfe des Netzwerk-Tools.
Die Registerkarte Netzwerk von Edge und Firefox bietet ähnliche Funktionen und Benutzeroberflächen. Beide verfügen über ein benutzerfreundliches Seitenleistenfenster, in dem Sie den HTTP-Header der ausgewählten Ressource, den HTTP-Rumpf, die Parameter, die zugehörigen Cookies und die Timings für Elemente einzeln betrachten können.
Die Registerkarte "Netzwerk" von Chrome DevTools verfügt nicht über ein solches Fenster. Wenn Sie jedoch nacheinander auf die Anforderungen klicken, werden dieselben Informationen angezeigt. Es ist jedoch eine weniger intuitive Lösung.
Langsame Seiten aufspüren
Das Performance Mit der Registerkarte (Tastenkombination: STRG + 5) können Sie die Gründe für eine langsame Webseite verstehen. Mit dem Performance-Tool hat Microsoft durch die Kombination des Vorgängers einen großen Sprung nach vorne gemacht UI-Reaktionsfähigkeit und Profiler Tools zum Erstellen einer End-to-End-Ansicht aller Skripts und zur Visualisierung der Leistung.
Dieses praktische Tool bietet Ihnen Berichte über verschiedene Arten der CPU-Nutzung, gibt Ihnen Einblick in die Rahmenfarbe Ihrer Site, und es ist auch möglich isolieren Sie verschiedene Benutzerszenarien, indem Sie Beschriftungen auf der Timeline festlegen.
Während des Testvorgangs haben wir festgestellt, dass uns das Performance-Tool in Edge zur Verfügung gestellt hat Weitere Informationen zu Geschwindigkeitsproblemen als entweder Firefox Developer oder Chrome DevTools. Die Benutzeroberfläche der Registerkarte "Leistung" in Edge ist recht gut gestaltet, hilft uns mit vielen visuellen Hinweisen und ist relativ einfach zu verwenden. Wenn Sie mehr über die Verwendung erfahren möchten, lesen Sie die ausführlichen Dokumente.
Speicherprobleme diagnostizieren
Das Erinnerung Werkzeug (Tastenkombination: STRG + 6) macht es möglich Gedächtnislecks finden das kann auch deine Webseite verlangsamen, außerdem können Auswirkungen auf die Stabilität Ihrer Website.
Mit Hilfe eines schönen Diagramms können Sie leicht erkennen, wo Ihre Speichernutzung wächst, und Sie können an bestimmten Stellen Momentaufnahmen machen, die eine Analyse der Speichernutzung ermöglichen. Du kannst auch Vergleichen Sie zwei Momentaufnahmen, die an verschiedenen Punkten gemacht wurden des Lebenszyklus der Seite, um den Unterschied zwischen ihnen zu verstehen.
Chrome DevTools verfügt auch über einen schönen Speicher-Profiler unter der Registerkarte "Profile". Firefox Developer bietet diese Funktion jedoch standardmäßig nicht an. Sie können jedoch Add-Ins wie diese herunterladen und installieren, wenn Sie möchten. Der Speicher-Profiler von Chrome DevTools ist recht fortschrittlich und bietet mehr Funktionen als die von Edge JavaScript-Objektzuordnungen im Laufe der Zeit aufzeichnen Dies kann Ihnen helfen, Speicherlecks zu isolieren.
Testen Sie Ihre Site auf verschiedenen Bildschirmgrößen
Das Emulation Mit dem Tool (Tastenkombination: STRG + 7) können Sie Ihre Site unter verschiedenen Umständen testen. Sie können aus zwei Browser-Profilen wählen, Desktop und Windows 10 Mobile, und aus vielen verschiedenen Benutzeragenten, einschließlich aller Desktop- und mobilen Versionen von Internet Explorer bis zum IE6, neben vielen Mitbewerbern wie Chrome, Firefox, Safari usw..
Es ist interessant, dass Sie die Möglichkeit haben, ein zu nehmen Betrachten Sie Ihre Seite als Bing Bot. Du kannst auch emulieren Sie ein GPS, und setzen verschiedene Auflösungen und Ausrichtungen.
Firefox Developer Tools verfügt nicht über ein Gerätemulationsprogramm, aber Chrome DevTools verfügt über einen derart hochentwickelten Emulator, dass Edge's kaum mithalten kann.
Zum Beispiel hat der Emulationsbildschirm von Chrome eine genaues Raster, in das die emulierte Ansicht eingefügt wird, und Sie können nicht nur aus Browserprofilen und Benutzeragenten auswählen, sondern auch aus vielen Geräten, wie z verschiedene Versionen von iPhone oder Samsung Galaxy und vielen anderen. Der Emulator von Chrome DevTools hat auch ein praktisches Zoom-Option und Sie können Ihre Website in verschiedenen Netzwerken wie 3G, 4G, DSL, WiFi usw. testen.
Zusammenfassung
Im Großen und Ganzen scheinen die F12 Dev Tools von Microsoft Edge überraschend gut zu sein. Es bietet Funktionen, die den gängigen Web Development Toolkits anderer moderner Browser sehr ähnlich sind. Es gibt zwei Bereiche, in denen Edge's F12 Dev Tools ziemlich stark ist: die Benutzeroberfläche das ist wirklich intuitiv, benutzerfreundlich und gut gestaltet, und das Leistungsdiagnosewerkzeuge.
Für diese beiden Funktionen kann es sinnvoll sein, zu Edge zu wechseln oder zumindest Edge zu testen. Das größte Manko ist das Fehlen der Möglichkeit, die Entwicklungswerkzeuge am unteren Rand des Bildschirms zu befestigen. Wir hoffen jedoch, dass Microsoft dieses Problem schnell beheben wird.
