Advertisement
  1. Code
  2. Tools & Tips

Ein Blick auf die EntwicklerWerkzeugs von Internet Explorer

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Ich hasse das Debuggen und habe noch nie einen Entwickler getroffen, der anders argumentiert hat. Es ist eine Herausforderung, Ihren Code durchzugehen und herauszufinden, warum er kaputt ist. Und vor allem ist es ein Eingeständnis, dass mein Code kaputt ist und ich nicht unfehlbar bin! Häresie, sage ich!

Im Ernst, Fehler sind einfach ein natürlicher Bestandteil des Webentwicklungsprozesses, und obwohl wir sie vielleicht hassen, müssen wir uns mit ihnen befassen. Front-End-Entwickler hatten nicht immer umfangreiche Debugging-Werkzeugs wie andere Plattformen und Sprachen. In den guten alten Tagen war alert() Ihr Freund und eine wichtige Methode (entschuldigen Sie das Wortspiel) zur Fehlerbehebung bei Code. Das Debuggen von clientseitigem Code hat aufgrund der Vielzahl der verwendeten Technologien seine eigenen Herausforderungen. Wenn Sie darüber nachdenken, umfasst das Debuggen von Seiten, insbesondere von dynamischen Seiten, so viele bewegliche Teile, die sich auf das Rendern auswirken können. Sie verfügen über das Document Object Model (DOM), JavaScript, CSS, Netzwerkverkehr, HTTP-Header und viele weitere Technologien, die alle zur Erstellung einer Seite beitragen und in vielen Fällen miteinander interagieren und sich gegenseitig beeinflussen.

Zum Glück haben sich die Zeiten geändert und alle gängigen Browser verfügen über integrierte Werkzeugs, die die Fehlerbehebungsfunktionen für Entwickler erheblich verbessern. Ich gebe Joe Hewitt viel Anerkennung dafür, dass er die Werkzeuglandschaft vorangebracht hat. Er hat Firebug im Jahr 2006 erstellt. Meiner Meinung nach hat es den Grundstein dafür gelegt, was echte Browser-Werkzeugs sein sollten.

alt text

Seitdem hat sich Firebug enorm weiterentwickelt und dient anderen als Basis für die Arbeit. Jetzt verfügen wir auch über leistungsstarke Werkzeugs in Chrome, Internet Explorer, Safari und Opera.

In diesem Artikel werde ich mich auf die EntwicklerWerkzeugs von Internet Explorer und die darin enthaltenen Funktionen konzentrieren. Die Funktionen, die ich besprechen werde, sind jedem bekannt, der einen browserbasierten Debugger verwendet hat. Ich möchte mich jedoch auf die Werkzeugs von Internet Explorer konzentrieren, um sicherzustellen, dass ein gutes Verständnis der tatsächlich verfügbaren Funktionen vorhanden ist.


Wo sind wir?

Lassen Sie mich zunächst zugeben, dass ich weiß, dass IE der Browser ist, den Sie gerne hassen. Ich verstehe es. Tatsache ist, dass es sich um einen wichtigen Browser handelt, der für viele Website-Besucher wichtig ist. Dies bedeutet, dass Sie darauf abzielen und früher oder später auch Code darin debuggen müssen. Was überrascht, ist, wie viele Entwickler nicht wissen, dass der IE mit EntwicklerWerkzeugs geliefert wird, oder schlimmer noch, dass sie glauben, dass sie die Internet Explorer Developer Werkzeugbar noch herunterladen müssen.

Die EntwicklerWerkzeugs werden im Allgemeinen als "F12-EntwicklerWerkzeugs" bezeichnet, da sie durch Drücken der Taste "F12" auf Ihrer Tastatur geöffnet werden, während Sie sich im Internet Explorer befinden (interessanterweise werden durch Drücken von F12 auch Firebug und die Chrome Developer Werkzeugs gestartet).

alt text

Auf die EntwicklerWerkzeugs kann auch über das Menü "Extras" unter der Bezeichnung "F12-EntwicklerWerkzeugs" zugegriffen werden.

alt text

Das Wichtigste, was ich betonen wollte, ist, dass sie in Internet Explorer enthalten sind (und seit IE8 verfügbar sind), sodass kein Plugin installiert werden muss, um EntwicklerWerkzeugs zu erhalten. Während sie als "F12-EntwicklerWerkzeugs" bezeichnet werden, werde ich für die Zwecke dieses Artikels die "F12" löschen und mir einige Tastenanschläge ersparen.

Die EntwicklerWerkzeugs bieten Entwicklern und Designern eine Vielzahl von Werkzeugs, mit denen viele der gängigen Debugging- und Inspektionsanwendungsfälle behandelt werden können, mit denen sie während ihrer Arbeit konfrontiert werden. Funktionen wie:

  • JavaScript-Debugging
  • DOM Inspektion und Manipulation
  • On-the-Fly-Aktualisierung von CSS-Stilen und Seitenlayouts
  • Protokollierung des Netzwerkverkehrs
  • Skript-Profilerstellung

Dies sind Funktionen, die heutzutage selbstverständlich sind und für die Bestimmung der Probleme Ihrer Seiten von entscheidender Bedeutung sind. Darüber hinaus bieten die EntwicklerWerkzeugs die Möglichkeit, Ihre Website in verschiedenen Versionen von Internet Explorer zu testen, indem Sie den Browsermodus ändern:

alt text

Das Testen auf mehrere Versionen von IE war traditionell ein königlicher Schmerz im Tuckus; Diese Funktion soll die Reibung verringern, um sicherzustellen, dass Ihre Websites in den verschiedenen IE-Versionen funktionieren.

Zusätzliche Funktionen umfassen Dinge wie:

  • Validierung des Markups anhand der Validierungsdienste des W3C für HTML und CSS
  • Zur Minimierung der Lesbarkeit minimierten oder verschleierten JavaScript-Codes
  • Farbwähler
  • Und mehr…
  • Es sind viele Dinge verfügbar, also lassen Sie uns viele der wichtigsten Funktionen überprüfen.

JavaScript-Debugging

Ich konzentriere mich sehr darauf, Entwicklern dabei zu helfen, standardbasierte Entwicklungstechniken zu verwenden, um sicherzustellen, dass ihre Websites im IE hervorragend funktionieren. Wie Sie sich vorstellen können, verbringe ich viel Zeit mit der Analyse von Code, insbesondere von JavaScript. Um einen seltsamen Fehler aufzuspüren, benötige ich einen JS-Debugger, mit dem ich den Code auf verschiedene Arten analysieren kann.

Code lesbar machen

Eine der wichtigsten Funktionen für mich ist die Fähigkeit, JavaScript zu verschönern. Ich kenne keinen Entwickler, der heutzutage seinen Produktionscode nicht minimiert. Und das ist absolut richtig, aber wenn ich etwas auf einer Produktionsstätte debuggen muss - insbesondere wenn ich keinen Zugriff auf den Quellcode habe - ist es von unschätzbarem Wert, den Code verschönern zu können. Ja, es gibt Online-Werkzeugs wie JS Beautify, die das können, aber es würde mich zwingen, Code zu kopieren und einzufügen, um den Code zu deobfuscieren. Wenn diese Funktion direkt integriert ist, spare ich eine Menge Zeit. Angenommen, ich betrachte eine minimierte Version von jQuery:

alt text

Über das Werkzeug-Symbol kann ich auf die Option "JavaScript formatieren" zugreifen, mit der der minimierte jQuery-Quellcode entschlüsselt und mir wesentlich besser lesbarer Code zur Verfügung gestellt wird:

alt text

Wie Sie im obigen Bild sehen können, ist die Arbeit mit dem Code sicherlich einfacher. Das andere coole an dieser Funktion ist, dass sie nach der Aktivierung Ihre JS-Dateien während Ihrer Sitzung weiterhin deobfusciert.

Eine Einschränkung ist, dass der Deobfuscationsprozess jQuery nicht auf seine ursprüngliche Quelle zurücksetzt. Kein Dienst, den ich kenne, kann das, aber Quellkarten werden dieses Problem in Zukunft lösen. Lesen Sie unbedingt den Artikel über Quellkarten von Sayanee Basu, auf den ich gerade verlinkt habe, um eine großartige Einführung in das Theme zu erhalten.

Schritt durch Ihren Code

Sobald der Code lesbar ist, ist es einfacher, den Fluss der Quelle zu bestimmen. An dieser Stelle kann ich an logischen Stellen im Code Haltepunkte setzen, um Probleme beim Durchlaufen zu isolieren. Natürlich können Sie mehrere Haltepunkte für mehrere Quelldateien festlegen.

alt text

Sie können auch bedingte Haltepunkte angeben, mit denen Sie den Codefluss basierend auf einem bestimmten Wert unterbrechen können.

alt text

Wie erwartet können Sie in jede Methode einsteigen, sie verlassen oder sie verlassen, um die detaillierte Steuerung bereitzustellen, die Sie zum Auschecken von Code benötigen, und auch keine wertvolle Zeit verschwenden. Es ist wichtig zu beachten, dass beim Durchlaufen Ihres Codes auf einen Aufrufstapel zugegriffen werden kann, mit dem Sie sehen können, wie Sie zu einer bestimmten Methode oder JavaScript-Datei gelangt sind, und zu dieser Methode oder Datei zurückkehren können, um den Code zu überprüfen:

alt text

Darüber hinaus hilft es, unerwartete Codepfade zu isolieren, die möglicherweise das Problem darstellen.

Informationen sind der Schlüssel zum Verständnis des Geschehens und die EntwicklerWerkzeugs bieten Ihnen die Möglichkeit, zu definieren, was Sie sehen möchten. Zusammen mit dem Aufrufstapel erhalten Sie über die Registerkarte "Locals" Informationen zu Variablen im aktuellen Bereich:

alt text

Sie können auch Ihre eigene Überwachungsliste definieren (über die Registerkarte Überwachung), um zu verfolgen, wie sich Variablenwerte basierend auf der Codeausführung dynamisch ändern. Das Tolle ist, dass die Werkzeugs Ihnen die Flexibilität bieten, die Werte in beiden Listen zu ändern, damit Sie sehen können, wie sich dies auf Ihre Anwendung auswirkt.

Und vergessen wir nicht die Konsole. Kein Debugger wäre ohne eine Konsole nützlich, um Fehler auszugeben und das interaktive Debuggen zu ermöglichen:

alt text

Die Konsole zeigt häufige Fehler an, die mit Ihrer Seite verbunden sind, einschließlich JavaScript- und Markup-Problemen. Sie können auch Befehle eingeben, um mit der Seite zu interagieren, und das Konsolenobjekt in Ihrem JavaScript-Code verwenden, um Nachrichten an die Konsole anzuzeigen.

Bewertung der Codeleistung

All das ist großartig und sicherlich wertvoll. Ein häufig übersehener Aspekt beim Debuggen ist die Codeleistung. Selten spreche ich mit Entwicklern, die erwähnen, wie sie ihren Code ausgewertet haben, um Engpässe bei langsam laufenden Methoden zu ermitteln, insbesondere bei Frameworks von Drittanbietern.

Die EntwicklerWerkzeugs bieten Ihnen einen JavaScript-Profiler, der Ihren Code während der Ausführung analysiert und eine Fülle von Informationen zur Optimierung Ihres Codes bereitstellt.

alt text

Schlüsselbits umfassen:

  • Gesamtzahl der Aufrufe einer Funktion
  • Wie lange hat die Funktion gedauert?
  • Wie lange es gedauert hat, bis untergeordnete Funktionen ausgeführt wurden
  • Art der Funktion (z. B. DOM oder benutzerdefiniert)
  • Die Quelldatei, in der die Funktion definiert ist

Mit diesen Informationen können Sie bestimmen, ob Ihre Methode überarbeitet werden muss, ob eine Bibliothek eines Drittanbieters Probleme verursacht oder ob eine browserspezifische Methode einen Engpass darstellt. Für mich wäre die Kombination von Inklusiv- und Exklusivzeit eine wichtige Messgröße für die Bewertung, da sie mir Aufschluss darüber gibt, wie lange die Ausführung einer bestimmten Methode gedauert hat, einschließlich der Zeit, die für die Fertigstellung von untergeordneten oder externen Methoden benötigt wurde. Von dort aus kann ich weiter nach unten bohren, um den Problemcode festzulegen.


Überprüfen von Netzwerkanforderungen

Ich werde nie vergessen, wann ich meine erste Ajax-Anfrage codiert habe. Es war so ein kleines Stück Code, aber es fühlte sich ehrlich gesagt magisch an (ja, ich bin so komisch). Das Ausführen dynamischer DOM-Updates basierend auf dem Zurückziehen von Daten aus einer HTTP-Hintergrundanforderung war unglaublich cool und eine leistungsstarke Funktion. Ich werde auch nie vergessen, wann ich zum ersten Mal versucht habe, ein Ergebnis zurückzusenden, das einen Fehler verursachte und mich verblüffte. Zum Glück hatte Firebug einen Netzwerkanforderungsinspektor, mit dem ich überprüfen konnte, was mein serverseitiger Code zurückgab, und Fehler beheben konnte.

Die Registerkarte "Netzwerk" in den EntwicklerWerkzeugs bietet genau diese Funktionalität. Sie zeigt den Datenverkehr im Zusammenhang mit der geladenen Seite an und zeigt Details an, die Sie zur Behebung von Netzwerkproblemen verwenden können.

alt text

Wenn Sie sich den erfassten Datenverkehr ansehen, können Sie sehen, welche Art von Anforderung gestellt wird (z. B. ein GET oder POST), ob sie erfolgreich war und wie lange es gedauert hat, sie abzuschließen. Der Netzwerkinspektor liefert auch wichtige Details über die Art des von Ihnen angeforderten Assets (z. B. CSS oder ein Bild) und welche Art von Code die Anforderung initiiert hat. Dies alles wird in einer zusammenfassenden Ansicht bereitgestellt, die schnelle Details zu den Anforderungen bietet.

Wenn Sie sich für eine Detailansicht entscheiden, können Sie detaillierte Informationen zu einer bestimmten Anforderung abrufen. In der Lage zu sein, auf den Antworttext zu schauen, ermöglichte es mir, das zuvor erwähnte Problem mit meinem XHR-Anruf zu lösen. Dies ist jedoch nur ein kleiner Teil der Gesamtdaten, die Sie erhalten, wenn Sie in die Detailansicht wechseln. Abgesehen davon erhalten Sie die Header der Anfrage (Anfrage & Antwort), gesendete Cookies und sogar Zeitinformationen, aus denen hervorgeht, wie lange die Anfrage gedauert hat.

alt text

Die Timing-Anzeige in der Zusammenfassungsansicht ist sehr wichtig, da klar erkennbar ist, welche Anforderungen lange ausgeführt werden und möglicherweise ein Problem darstellen.


Markup gut aussehen lassen

Ich werde der Erste sein, der sagt, dass ich es HASSE, auf mehrere Versionen von Internet Explorer zu testen. Ich ärgere mich hauptsächlich über die älteren Versionen und würde mich freuen, wenn sich Entwickler einfach um IE9 und IE10 kümmern könnten. Aber es ist, was es ist, und es gibt verschiedene Möglichkeiten, dies anzugehen. Sie können für jede Version des IE, auf die Sie abzielen, mehrere virtuelle Maschinen verwenden. Sie können Browserstack.com verwenden, um IE-Versionen im Browser zu virtualisieren. Sie können auch die Browser-Modus-Umschaltfunktion der EntwicklerWerkzeugs verwenden, damit IE10 IE7 bis IE10 emuliert.

alt text

Mit diesem Werkzeug können Sie die Art und Weise ändern, in der der IE eine Seite rendert, sodass die Funktionen einer bestimmten Version emuliert werden, um sicherzustellen, dass Ihre Site für diese Version funktioniert. Hier können Sie nicht nur den Browsermodus angeben (der die Funktionsunterstützung bestimmt), sondern auch den Dokumentmodus (der angibt, wie eine Seite interpretiert wird). Dies gibt Ihnen viel Flexibilität, um verschiedene Versionen des IE von einem einzigen Browser aus zu testen. Beachten Sie nur, dass das IE-Team sein Bestes tut, um Versionen zu emulieren. Wenn Sie einen vollständigen Test wünschen, sind VMs der richtige Weg. Normalerweise beginne ich mit der letzten Option, da dies bei weitem die einfachste ist und das Rendern der Verwendung einer bestimmten nativen Version des IE sehr nahe kommt.

Das Überprüfen von Markups ist eine der häufigsten Aufgaben eines Webprofis. Es ist großartig, unter die Haube schauen zu können, wie etwas aufgebaut ist, ohne eine "Ansicht->Quelle" ausführen zu müssen. Auf der Registerkarte "HTML" in den EntwicklerWerkzeugs werden alle Elemente auf einer bestimmten Seite zusammen mit den zugehörigen Stilen und Attributen angezeigt. Auf diese Weise können Sie Werte in Echtzeit überprüfen und aktualisieren und erhalten sofortiges Feedback. Sie können beispielsweise auf ein Absatzelement klicken und es kann bearbeitet werden, sodass Sie den Text ändern und die Ergebnisse sofort anzeigen können. Gleiches gilt für die Stile und Attribute dieses Elements.

alt text

Attribute können auch inline hinzugefügt werden, indem Sie mit der rechten Maustaste auf ein Element klicken und im Kontextmenü "Attribut hinzufügen" auswählen oder indem Sie die Registerkarte "Attribute" auswählen und zur Liste hinzufügen. Das folgende Bild zeigt, wie ich dem Hervorhebungselement ein Farb- und Schriftattribut hinzugefügt habe, das als Inline-Stile im Markup und als einzelne Attributzeilen auf der Registerkarte Attribute angezeigt wird:

alt text

Das Markup der Seite wird in einer Baumansicht dargestellt, sodass Sie eine Ansicht des DOM-Baums von oben nach unten sehen und Elemente erweitern können, um ihre untergeordneten Elemente anzuzeigen.

CSS hat auch eine eigene Registerkarte, die jedoch globale Stile verwalten soll, die normalerweise in Stylesheets gespeichert sind. Wenn Sie ein Stylesheet auswählen, werden alle definierten Selektoren, Regeln und Eigenschaften angezeigt und Sie können sie nach Belieben anpassen. In diesem Fall wurde der Text durch einfaches Deaktivieren der Eigenschaft "Textausrichtung" dynamisch nach links verschoben:

alt text

Es geht nicht nur darum, vorhandene Regeln zu bearbeiten. Sie können auch neue Selektoren, Regeln oder Eigenschaften hinzufügen:

alt text

Mehr als ein Plugin für IE6

Der Hauptgrund, warum ich dieses Stück schreiben wollte, war, dass ich wirklich überrascht war, wie viele Entwickler ich getroffen habe, die ein Missverständnis über die F12-EntwicklerWerkzeugs hatten - oder nicht wussten, dass es sie überhaupt gibt! Ich hoffe, dass es Entwicklern hilft, ein Gefühl dafür zu bekommen, was verfügbar ist, und die Fehlerbehebung ein wenig erleichtert.

Ich hoffe auch, dass es Feedback für zukünftige Funktionen generiert, die Entwickler benötigen. Obwohl die vorhandene Funktionalität gut ist, gibt es sicher eine Reihe neuer Dinge, die Sie als Leser für Ihre Debugging-Erfahrung als wesentlich erachten würden. Lass mich wissen, was das sind!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.