Share
Haftungsausschluss: Ich arbeite für die Microsoft Corporation.
Im Januar habe ich Sie durch die Funktionen der F12-Entwicklertools von Internet Explorer 10 geführt. Die vor kurzem veröffentlichte Version von Windows 8.1 Preview von Microsoft bringt nicht nur ein Update für Internet Explorer (jetzt auf Version 11), sondern auch eine willkommene Aktualisierung der F12 Developer Tools. Letzteres ist besonders wichtig, da Entwickler auf sie angewiesen sind, um standortbezogene Probleme aus dem IE heraus zu beheben. Bis jetzt haben die Tools die meisten Debugging-Anwendungsfälle gelöst. Es ist jedoch klar, dass mit zunehmender Komplexität von Websites die Entwickler umfangreichere Tools benötigen, um damit arbeiten zu können. Dieses Update soll Entwicklern ein frisches Aussehen und erweiterte Funktionen bieten, wobei der Fokus auf folgenden Punkten liegt:
Bei einigen Updates handelt es sich lediglich um praktische Funktionen zur Vereinfachung des Entwickler-Workflows (z. B .: Element-Breadcrumbs), während andere die Leistung und das Rendern von Web-Apps erheblich verbessern.
In diesem Beitrag werden wir einige der neuesten Updates und Funktionen der IE11 F12 Developer Tools durchgehen. In einigen Fällen zeige ich Ihnen die deutlichen Unterschiede zwischen den Funktionen der vorherigen Versionen.
Seit seiner Gründung haben die F12-Werkzeuge eine ziemlich konsistente Benutzeroberfläche mit Dropdown-Menüs und einer tabulatorbasierten Metapher für die verschiedenen verfügbaren Optionen beibehalten. Aber einige Nissen, die immer im Weg zu stehen schienen, waren Dinge, wie die Werkzeuge, die während einer Debugging-Sitzung in ihr eigenes Fenster sprangen, und die Registerkarten wertvolle vertikale Immobilien nutzten. Mit IE11 wurden die F12-Tools stark überarbeitet, um die Benutzeroberfläche intuitiver zu machen und ein grafikbasiertes Navigationssystem zu nutzen, das als Bildlaufleiste auf der linken Seite des Debuggerfensters positioniert ist:
Die Menüs, mit denen sich die Werkzeuge oben befanden, wurden entfernt, um die Debugging-Benutzeroberfläche besser verständlich zu machen und den Arbeitsbereich freizugeben. Darüber hinaus wurde das Design des Debuggers selbst grundlegend erneuert und löste sich von einem Windows 7-UI-Stil zu einem moderneren Windows 8-Look-and-Feel auf. Sie können den Hauptunterschied unten sehen:
Die neue Benutzeroberfläche entspricht deutlich den modernen Elementen von Windows 8.
Das ursprüngliche DOM-Inspector-Tool bot zwar ein anständiges Erlebnis, es fehlten jedoch einige wichtige Funktionen. Die Hauptschwierigkeiten für mich waren das Fehlen von Live-DOM-Aktualisierungen, die Anzeigereihenfolge der CSS-Stile und die Unfähigkeit, Ereignisse zu sehen, die mit DOM-Elementen verbunden sind. Glücklicherweise wurden diese jetzt in diesem Update angesprochen.
Da ich mich so sehr auf JavaScript konzentriere, war es besonders frustrierend, angehängte Ereignisse zu finden, die viel konsolenbasierten Debugging-Code und Trial-and-Error-Verfahren erforderlich machten, um die aufgerufene Ereignis- / Methodenkombination zu ermitteln. Wenn Sie sich den Screenshot unten ansehen, können Sie sehen, wie ich auf ein bestimmtes Element klicken, das zugehörige Ereignis und die Methode sehen kann, die aufgerufen wird, wenn das Ereignis ausgelöst wird. Dies ist eine große Zeitersparnis aus der Debugging-Perspektive.
Obwohl es offensichtlich erscheint, hat eine geringfügige, aber wichtige Änderung in der Darstellung der CSS-Werkzeuge für ein Element die Dinge wesentlich einfacher gemacht. Vor diesem Update zeigten die F12-Werkzeuge geerbte Stile, die Sie zunächst dazu zwangen, im Stilbereich nach unten zu scrollen, um zum tatsächlich verwendeten Stil des Elements zu gelangen.
Das Team hat die Anzeige so aktualisiert, dass die neuesten Stile zuerst angezeigt werden, was meiner Meinung nach sehr viel sinnvoller ist, insbesondere aus der Debugging-Perspektive:
Einige andere großartige neue Funktionen, die definitiv schön sind, sind:
Zuvor mussten Sie die F12-Werkzeuge öffnen, auf den Pfeil des DOM-Inspektors klicken und auf ein Element klicken. Dies rationalisiert die Dinge ein wenig und bringt diese Erfahrung mit anderen Debugging-Tools gleich.
Der Breadcrumb bietet eine intuitive Möglichkeit, die hierarchische Struktur eines DOM-Elements zu durchlaufen, sodass Sie problemlos auf einen beliebigen Teil des Breadcrumbs klicken können, um das einzelne übergeordnete Element aufzurufen:
Wenn Sie mit der neuen Intellisense-Style-Funktion einen Stil bearbeiten oder eine neue Regel hinzufügen, wird sofort ein Popup angezeigt, in dem Sie schnell auf CSS-Regeln und -werte zugreifen können. Während einige von Ihnen CSS-Enzyklopädien sind, schätze ich es nicht, dass ich mich an alle erinnern muss. :)
Schließlich können Sie mit DnD im DOM-Explorer interaktiv testen, wie Ihre Elemente aussehen und reagieren werden, wenn Sie ihre Position innerhalb des Seitenlayouts verschieben. Die Änderungen werden live vorgenommen, sodass Sie sofort eine Rückmeldung erhalten, wenn Sie Ihr Element neu positionieren.
Es gibt viel mehr Code auf der Client-Seite als je zuvor. Frameworks wie Ember.js und Angular machen es Entwicklern wesentlich einfacher, Web-Apps mit einer Seite zu erstellen, und Entwickler nutzen HTML5-basierte Funktionen zum Erstellen immersiver Spiele, die hohe Frameraten und Reaktionszeiten erfordern. Damit ist eine Reihe neuer Überlegungen zur Seitenleistung verbunden, und die neuen F12-Tools bieten ein neues Tool, mit dem Sie die Reaktionsfähigkeit Ihrer Benutzeroberfläche besser einschätzen und messen können. Das UI Responsiveness-Tool ist ein Profiler, mit dem Sie die Frameraten und die CPU-Auslastung messen können, um Probleme mit der Benutzeroberfläche zu ermitteln.
Durch den Start des Profilers kann ich verfolgen, wie meine CPU auf meine Seite reagiert und wie der visuelle Durchsatz (AKA-Frames pro Sekunde) an verschiedenen Punkten im Seitenladezyklus liegt.
Das Fenster "Timeline-Details" bietet noch genauere Informationen darüber, wie bestimmte Ereignisse oder Netzwerkanforderungen die Seitenleistung beeinflussen. So kann ich tiefer auf Probleme eingehen und Anpassungen vornehmen, um die Leistung meiner Website zu verbessern.
Wenn Sie sich jedes Element der Zeitleiste ansehen, können Sie sehen, wie bestimmte Aktionen, z. B. die Gestaltung, die Renderleistung beeinflussen können.
Sie können sich vorstellen, wie wertvoll diese Daten sind, insbesondere für Spieleentwickler, die die nativen Browserfunktionen für das Spiel nutzen möchten und gewohnte robuste Debugging-Tools in anderen auf Plugins basierenden Entwicklungstools wie Flash verwenden.
Von allen Änderungen waren für mich die Änderungen am Skript-Debugger am wichtigsten, hauptsächlich, weil sie dazu beigetragen haben, die Wut zu verhindern, die ich empfand, als ich sie benutzt hatte. Es war in erster Linie ein UX-Problem, in dem Sie im Moment, als Sie sich für die Ausführung des Debuggers entschieden haben, das gesamte Werkzeuge-Bedienfeld aus dem Browser-Ansichtsfenster in ein eigenständiges Popup-Fenster platzieren würde. Es war eine schreckliche Erfahrung, um es gelinde auszudrücken. Dieses Update behebt dies und stellt sicher, dass der Debugger an seinem Platz bleibt.
Eine weitere große Verbesserung ist die Verwendung einer Tab-Metapher zum Anzeigen jeder geöffneten Datei, die Sie debuggen. Die vorherige Version des Tools zwang Sie, jede zum Debuggen benötigte Datei erneut zu öffnen. Die neue Version enthält eine Registerkarte für jede Datei, mit der Sie arbeiten, um die Navigation wesentlich zu vereinfachen.
Darüber hinaus sind Optionen, die im Allgemeinen in Kontextmenüs eingebettet waren, jetzt hervorgehoben und leicht zu erkennen. Es ist erstaunlich, wie oft die Entwickler überrascht waren, als ich ihnen die hübsche Druckfunktion zum Formatieren von JavaScript zeigte, obwohl es seit IE8 dort war. Die Funktion wird jetzt durch ein Symbol oben im Debugging-Bereich neben dem Wortumbruch-Symbol hervorgehoben.
Last but not least, vergessen Sie nicht console.log (). Die neuen Tools unterstützen jetzt Tracepoints einfach, sodass Sie bestimmte Werte auf dieselbe Weise überwachen können, wie Sie dies tun würden console.log ().
Pegging-Speicherprobleme waren schon immer ein Problem, vor allem, wenn es sich um ein langsames Speicherproblem handelt. Die neuen F12-Tools zielen darauf ab, dies mit dem neuen Memory-Profiler zu bewältigen. Mit dem Tool können Sie über einen bestimmten Zeitraum Momentaufnahmen der Speicherauslastung Ihrer Website oder Ihrer App erstellen. So können Sie feststellen, welche Aktionen oder Bereiche Ihrer App die Hauptursache für das Problem sind.
Durch Erstellen eines Basis-Snapshots Ihres Speicherabdrucks, gefolgt von nachfolgenden Snapshots, können Sie die erfassten Daten vergleichen, um die Anzahl der aktiven Objekte und die Arten der Objekte zu ermitteln, die bestehen bleiben. Dazu gehören HTML-Elemente, DOM-Knoten und JavaScript-Objekte. Sie können die Vergleiche der Momentaufnahmen untersuchen, um zu sehen, wie sich der Speicher für einzelne Objekte ändert.
Sie kennen wahrscheinlich die komplexen Dropdowns mit den Bezeichnungen "Browsermodus" und "Dokumentmodus". Sie sollten den Entwicklern bei der Behebung von Problemen im Zusammenhang mit nicht modernen Versionen von Internet Explorer helfen. In der Realität waren sie etwas verwirrend und boten nur geringfügige Testunterstützung für nicht moderne IEs an. Mit diesem neuen Update haben die F12-Tools dies optimiert, damit sich die Entwickler auf die standardkonformeste Version des Internet Explorer konzentrieren können, insbesondere wenn sich ihre Site derzeit in einem Kompatibilitätsmodus befindet.
Durch die Änderung des Dokumentmodus in "Edge" kann ein Entwickler seine Site dazu zwingen, im neuesten Standardmodus zu rendern, der von dieser IE-Version unterstützt wird, und daran zu arbeiten, die erforderlichen auf Standards basierenden Änderungen vorzunehmen, damit ihre Site browserübergreifend gerendert wird. Darüber hinaus wird direkt im Tool ein Link zu Informationen bereitgestellt, über den Entwickler direkt zu modern.IE gelangen, einer Online-Ressource, die einen Scanner für häufig auftretende Kompatibilitätsprobleme, virtuelle Maschinen für die verschiedenen Versionen von Internet Explorer und Best Practices zur Gewährleistung der Site bietet Kompatibilität in modernen IE-Versionen.
Eine neue Funktion, die explizit auf mobile Geräte und Tablet-Geräte abzielt, ist die Geolocation-Simulation. Auf diese Weise können Sie die Geolocation-API auch dann nutzen, wenn Ihr Gerät nicht verbunden ist.
Dies ist ein großartiges Update für eine Reihe von Tools, die uns gute Dienste geleistet haben, die jedoch auf jeden Fall etwas verbessert werden mussten. Der Fokus lag klar auf dem Angebot von Tools, die Ihnen bei der Behebung von Problemen mit der Leistung behilflich waren. Dies ist besonders bei Trends zu einseitigen nativen Apps von großer Bedeutung.
.
Accentsconagua