Verwenden der F12-Entwicklungstools

.NET Framework 3.0

Mit den F12-Entwicklungstools können Sie Ihre Webseiten debuggen, testen und schneller machen. Ganz gleich, ob Sie Ihr CSS-Layout optimieren oder die Ursache für einen Arbeitsspeicherverlust ausfindig machen müssen – hier finden Sie die richtigen Tools für diese Aufgaben.

Wenn Sie nach dem Menü Extras oder Symbolleisten in Internet Explorer 11 suchen, kann Ihnen folgendes Thema weiterhelfen:
Wenn Sie durch Klicken auf eine Fehlermeldung hierher gelangt sind und Fehlermeldungen künftig vermeiden möchten, können Ihnen folgende Themen weiterhelfen:

Die F12-Tools in Aktion

Wir haben die F12-Tools in IE11 von Grund auf überarbeitet. Die Benutzeroberfläche ist brandneu, und es sind neue Funktionen verfügbar, mit denen Sie das Entwickeln und Debuggen beschleunigen und vereinfachen können.

Drücken Sie die Taste F12 auf Ihrer Tastatur, um die Tools zu öffnen. Falls es auf Ihrer Tastatur keine Funktionstasten gibt, können Sie das Menü Extras verwenden.

Die Benutzeroberfläche der F12-Tools enthält acht verschiedene Tools, die jeweils über eine eigene Registerkarte verfügen. Hier finden Sie ein Bild jedes Tools, eine kurze Zusammenfassung seiner Funktion und der Neuheiten sowie einige typische Entwicklungs- und Debugaufgaben, die das Tool vereinfacht.

Tool "DOM Explorer" (STRG+1)

F12-Entwicklungstools, Tool "DOM Explorer"

Das Tool "DOM Explorer" zeigt die Struktur Ihrer Webseite, während sie im Browser angezeigt wird, und ermöglicht das Bearbeiten des HTML-Codes und der Formatvorlagen in einer Live-Seite. Da Sie Ihre Quelle dazu nicht bearbeiten und erneut laden müssen, können Sie Anzeigeprobleme schnell beheben oder mit neuen Ideen experimentieren.

Neue Features im Tool "DOM Explorer":

  • IntelliSense-Vorschläge für die automatische Vervollständigung beim Bearbeiten von HTML-Attributen und CSS-Eigenschaften
  • Neuanordnen von DOM-Knoten durch Ziehen

Entwicklungs- und Debugaufgaben, die das Tool vereinfacht:

  • Überprüfen, weshalb ein Element nicht an der richtigen Stelle oder mit der richtigen Größe angezeigt wird
  • Feststellen, welche CSS-Formatvorlagen und -Medienabfragen auf ein Element angewendet werden
  • Testen einer Reihe unterschiedlicher Farben für ein Element, um auszuprobieren, welche am besten aussieht

Weitere Informationen zum Tool "DOM Explorer"

Tool "Konsole" (STRG+2)

F12-Entwicklungstools, JavaScript-Konsole

Das Tool "Konsole" bietet die Möglichkeit, mit dem ausgeführten Code zu interagieren, indem über die Befehlszeile der Konsole Infos gesendet und mit der API für das Debuggen über die Konsole Infos empfangen werden. Da das Tool "Konsole" so nützlich für Entwickler ist, haben wir den Zugriff vereinfacht. Sie können es jetzt in jedem anderen Tool über die Schaltfläche Konsole in der oberen rechten Ecke der Benutzeroberfläche neben der Schaltfläche Hilfe oder mit STRG+` öffnen.

Neue Features im Tool "Konsole":

  • Öffnen der Konsole in jedem anderen Tool mit der Schaltfläche Konsole oder mit STRG+`.
  • Neue Methoden der API für das Debuggen über die Konsole für zeitliche Steuerung, Zählen, Gruppieren und vieles mehr.
  • IntelliSense-Vorschläge für die automatische Vervollständigung in der Befehlszeile beschleunigen die Eingabe, reduzieren Tippfehler und helfen Ihnen, unbeachtete Aspekte von JavaScript-APIs zu entdecken.

Entwicklungs- und Debugaufgaben, die das Tool vereinfacht:

  • Anzeigen von Fehlermeldungen, Ausnahmewarnungen und Debugausgaben
  • Zeitliche Steuerung der Codeausführung bis runter zur Anweisungsebene mit neuen Zeitsteuerungsmethoden
  • Ändern des Werts einer Variable im ausgeführten Code ohne erneutes Laden

Weitere Informationen zum Tool "Konsole"

Tool "Debugger" (STRG+3)

F12-Entwicklungstools, Tool "Debugger"

Mit dem Tool "Debugger" können Sie untersuchen, was Ihr Code macht, wann er es macht und wie er es macht. Sie können den Code während der Ausführung anhalten, ihn Zeile für Zeile schrittweise ausführen sowie den Status von Variablen und Objekten in jedem Schritt überwachen.

Neue Features im Tool "Debugger":

  • Debuggen ohne Aktualisieren. Legen Sie Ihre Haltepunkte fest, und debuggen Sie den Code ohne erneutes Laden und ohne Verlust des Zustands.
  • Dokumentoberfläche im Registerkartenformat zur einfachen Verwaltung mehrerer Skripts.
  • Bildlaufleiste, die Haltepunkte und Suchergebnisse hervorhebt.

Entwicklungs- und Debugaufgaben, die das Tool vereinfacht:

  • Anzeigen der Ursache eines Funktionsaufrufs mithilfe der Aufrufliste
  • Lesbare Darstellung von komprimiertem oder minimiertem Code
  • Überwachung der Web-Worker-Erstellung und -Ausführung

Weitere Informationen zum Tool "Debugger"

Tool "Netzwerk" (STRG+4)

F12-Entwicklungstools, Tool "Netzwerk"

Das Tool "Netzwerk" liefert Ihnen die genauen Details aller Netzwerkanforderungen, die beim Laden und Verwenden Ihrer Webseiten ausgeführt werden.

Neue Features im Tool "Netzwerk":

  • Bessere Informationen zum zeitlichen Ablauf von Anforderungen
  • Verbesserte Erfassung von Informationen zur Komprimierung

Entwicklungs- und Debugaufgaben, die das Tool vereinfacht:

  • Anzeigen des ressourcenübergreifenden Bandbreitenverbrauchs Ihrer Seite
  • Debuggen von AJAX-Anforderungen durch Anzeigen von Anforderungs- und Antwortheadern und -texten
  • Identifizieren von Netzwerkanforderungen, die das Laden Ihrer Webseiten verlangsamen

Weitere Informationen zum Tool "Netzwerk"

Tool "Reaktionsfähigkeit der Benutzeroberfläche" (STRG+5)

F12-Entwicklungstools, Tool "Reaktionsfähigkeit der Benutzeroberfläche"

Mit dem Tool "Reaktionsfähigkeit der Benutzeroberfläche" können Sie untersuchen, was passiert, wenn Ihre Seite langsamer reagiert. Ein mit dem Tool erstelltes Profil spezifischer Punkte, an denen die Seite langsam reagiert, gibt Aufschluss über die dafür verantwortlichen Vorgänge.

Das Tool "Reaktionsfähigkeit der Benutzeroberfläche" ist ein neues F12-Tool in IE11. Es bietet z. B. die folgenden interessanten Features:

  • Identifizieren der unterschiedlichen Quellen von CPU-Aktivität, die die Reaktionsfähigkeit der Benutzeroberfläche beeinträchtigt
  • Einblicke in die Framerate Ihrer Webseite
  • Festlegen von Beschriftungen auf der Zeitskala, um Benutzerszenarien zu isolieren

Entwicklungs- und Debugaufgaben, die das Tool vereinfacht:

  • Testen von Codeoptimierungen
  • Beschleunigen Ihrer Webseiten

Weitere Informationen zum Tool "Reaktionsfähigkeit der Benutzeroberfläche"

Tool "Profiler" (STRG+6)

F12-Entwicklungstools, Tool "Profiler"

Das Tool "Profiler" ist eine reine JavaScript-Geschwindigkeitsmessung, die Ihnen zeigt, welche Funktionen während einer Profilerstellungssitzung wie oft aufgerufen wurden und wie lange ihre Ausführung gedauert hat.

Neue Features im Tool "Profiler":

  • Nachverfolgung der Funktionen, die in Web-Workern ausgeführt wurden
  • Übersichtlichere, reaktionsfähigere Benutzeroberfläche

Entwicklungs- und Debugaufgaben, die das Tool vereinfacht:

  • Isolieren der langsamsten Teile Ihres Codes
  • Testen von Codeoptimierungen
  • Beschleunigen Ihrer Webseiten

Weitere Informationen zum Tool "Profiler"

Tool "Arbeitsspeicher" (STRG+7)

F12-Entwicklungstools, Tool "Arbeitsspeicher"

Wenn eine Webseite schnell startet und dann langsamer wird, nachdem Sie sie eine Weile verwendet haben, ist dies in der Regel auf einen Arbeitsspeicherverlust zurückzuführen. Das Tool "Arbeitsspeicher" verfolgt die Arbeitsverwendung Ihrer Webseite nach, sodass Sie feststellen können, an welchen Stellen die Arbeitsspeicherverwendung zunimmt, woran dies liegt und wie das Problem behoben werden kann.

Das Tool "Arbeitsspeicher" ist ein neues F12-Tool in IE11. Es bietet z. B. die folgenden interessanten Features:

  • Eine Zeitskala zum Überprüfen progressiver Änderungen der Arbeitsspeicherverwendung
  • Momentaufnahmen zum Untersuchen der Details der Arbeitsspeicherverwendung an bestimmten Punkten
  • Vergleiche von Momentaufnahmen zum Identifizieren bestimmter Punkte, an denen die Arbeitsspeicherverwendung zunimmt

Entwicklungs- und Debugaufgaben, die das Tool vereinfacht:

  • Identifizieren getrennter DOM-Knoten
  • Identifizieren von Punkten, an denen die Arbeitsspeicherverwendung zunimmt
  • Messen der Arbeitsspeicherverwendung von Objekten

Weitere Informationen zum Tool "Arbeitsspeicher"

Tool "Emulation" (STRG+8)

F12-Entwicklungstools, Tool "Emulation"

Mit dem Tool "Emulation" können Sie testen, wie Ihre Webseiten mit verschiedenen Bildschirmgrößen und Hardwarefeatures funktionieren und wie sie auf unterschiedliche Zeichenfolgen des Benutzer-Agenten reagieren.

Das Tool "Emulation" ist ein neues F12-Tool in IE11. Es bietet z. B. die folgenden interessanten Features:

  • Emulieren verschiedener Bildschirmgrößen und Auflösungen
  • GPS-Simulation

Entwicklungs- und Debugaufgaben, die das Tool vereinfacht:

  • Testen reaktionsfähiger Designs auf mehreren Bildschirmtypen
  • Testen standortbezogener Features für eine Website für mobile Geräte

Weitere Informationen zum Tool "Emulation"

Verwandte Themen

Neues bei den F12-Entwicklungstools
Neue API-Methoden für die Konsole
F12-Entwicklungstools in Internet Explorer 10
Tastenkombinationen in den F12-Entwicklungstools für IE11

 

 

Anzeigen:
© 2014 Microsoft. Alle Rechte vorbehalten.