Entdecken der Internet Explorer-Entwicklertools

  • Artikel

Neu für Windows Internet Explorer 8

Jede Installation von Internet Explorer 8 wird mit den Entwicklertools ausgeliefert. Dieses Tool ermöglicht Websiteentwicklern das schnelle Debuggen von Microsoft JScript, das Untersuchen eines für Internet Explorer spezifischen Verhaltens oder das schnelle Erstellen eines Prototyps für einen neuen Entwurf oder das schnelle Entwickeln von Lösungen für ein Problem. Dieser Artikel bietet eine Einführung zu den Hauptfeatures der Entwicklertools.

  • Einführung
  • Erste Schritte
  • Debuggen von HTML und CSS
    • Überprüfen von HTML-Elementen
    • Überprüfen von CSS-Eigenschaften
    • Schnelles Bearbeiten von Quellen
    • Speichern von Änderungen
  • Debuggen von JScript
    • Starten und Beenden des Debuggers
    • Steuern der Ausführung
    • Untersuchen von Variablen
    • Untersuchen der Aufrufliste
    • Verwenden der Debuggerkonsole
  • Profilerstellung für JScript-Leistungen
    • Starten und Beenden von Profiler
    • Anzeigen von Daten
    • Profilerstellung für mehrere Sitzungen und Exportieren von Daten
  • Suchen nach Inhalten
  • Anzeigen von Quellen
  • Abgrenzen von Elementen auf dem Bildschirm
  • Arbeiten mit Bildern
  • Steuern von Cache und Cookies
  • Verwenden der Power Tools
  • Überprüfen der Quellen
  • Testen in verschiedenen Browser- und Dokumentmodi
    • Testen der Browsermodi
    • Testen der Dokumentmodi
  • Verwenden von Tastenkombinationen
  • Verweisen auf Schnittstellenbefehle
  • Verwandte Themen

Einführung

Großartige Tools spielen bei der Produktivität von Entwicklern eine wichtige Rolle, und obwohl es viele Tools für die Webentwicklung gibt, erfüllen sie die Anforderungen wahrscheinlich nicht in allen Belangen. Sie möchten möglicherweise schnell JScript debuggen, ein für Internet Explorer spezifisches Verhalten untersuchen oder schnell einen Prototyp für einen neuen Entwurf erstellen oder Lösungen für ein Problem entwickeln. Um die Entwicklerproduktivität in diesen und ähnlichen Szenarios zu verbessern, umfasst Internet Explorer 8 leistungsstarke, aber dennoch benutzerfreundliche Tools, die einige wichtige Eigenschaften aufweisen:

  • Integriert und einfach zu verwenden: Eine Instanz der Entwicklertools wird mit jeder Installation von Internet Explorer 8 ausgeliefert. Dadurch wird das Debuggen auf einem beliebigen Computer ermöglicht, der Internet Explorer 8 ausführt. Außerdem werden die Tools nur bei Bedarf geladen, um die Auswirkungen der Tools auf die Browserleistung einzuschränken. Mithilfe der Entwicklertools können Sie schnell das Skriptdebugging für den aktuellen Internet Explorer-Prozess ausführen, anstatt das Debugging für Internet Explorer insgesamt zu aktivieren.
  • Bereitstellen einer visuellen Schnittstelle für die Plattform: Anstatt das Reverse Engineering für die Funktionsweise der Website auszuführen oder die Website für die Ausgabe von Debuginformationen zu ändern, können Sie Internet Explorer mithilfe der Entwicklertools untersuchen, um dessen Darstellung der Website anzuzeigen. Dies verringert die erforderliche Zeit zum Debuggen dynamischer Websites, wobei sich die Untersuchung der Quelle nicht hilfreich erweist oder zum Untersuchen eines für Internet Explorer spezifischen Verhaltens, wobei ein allgemeines Erstellungstool nicht helfen kann.
  • Aktivieren der schnellen Versuchsdurchführung: Wenn Sie einen Prototyp eines neuen Entwurfs entwickeln oder Korrekturen in früheren Versionen von Internet Explorer testen, bearbeiten und speichern Sie wahrscheinlich die Quelle, aktualisieren die Seite im Browser und wiederholen den Vorgang. Die Entwicklertools von Internet Explorer 8 optimieren dieses Szenario, indem Sie die Website innerhalb des Browsers bearbeiten können, um die Auswirkungen von Änderungen sofort zu erkennen.
  • Optimieren der Anwendungsleistung: Das Identifizieren und Beheben von Leistungsproblemen ist normalerweise ein iterativer Ansatz, bei dem sich zur Zeit auf ein Szenario konzentriert wird. Mit dem Profiler für Skript der Entwicklertools von Internet Explorer 8 können Sie Statistiken erfassen, z. B. die Ausführungszeit und die Häufigkeit, mit der eine JScript-Funktion aufgerufen wurde, während Sie die Anwendung testen und den Profilbericht verwenden, um Leistungsengpässe schnell zu identifizieren und zu beheben.

Mit diesen Eigenschaften verbessern die Features der Entwicklertools die Produktivität beim Entwickeln in Internet Explorer erheblich. Der Rest dieses Artikels erklärt viele von diesen und anderen Features ausführlicher.

Erste Schritte

Die ersten Schritte mit den Tools sind einfach: Drücken Sie F12, oder klicken Sie auf im Menü "Extras" auf "Entwicklertools".

Nach dem Öffnen befinden sich die Tools in einem eigenen Fenster, die jeweils mit einer einzelnen Registerkarte in Internet Explorer verbunden sind. Wenn Sie es vorziehen, die Anzahl der geöffneten Fenster zu verringern, fixieren Sie die Tools an einer Registerkarte, indem Sie auf die Schaltfläche "Anheften" klicken oder STRG+P drücken.

Für einige Features der Tools ist nicht die vollständige Toolsschnittstelle erforderlich. Klicken Sie in diesem Fall auf die Schaltfläche "Minimieren", oder drücken Sie STRG+M, wenn die Tools angeheftet sind. Die Tools werden zu einer Zeile am unteren Rand des Fensters und bieten nur den Zugriff auf die Befehlsmenüleiste.

Debuggen von HTML und CSS

Die Tools ermöglichen Ihnen die Sicht in den Browser, damit Sie das HTML und die CSS (Cascading Style Sheets) der Website überprüfen können, da diese in Internet Explorer vorhanden sind, anstatt nur in der ursprünglichen Quelle. Dies ist besonders hilfreich bei dynamischen Websites, komplexen Websites und Websites, die Frameworks wie Active Server Pages (ASP) oder PHP verwenden.

Der primäre Inhaltsbereich der Tools zeigt die Struktur des Dokumentobjektmodells (Document Object Model, DOM) der Website an, die das von Internet Explorer beibehaltene Modell widerspiegelt, um die Website im Arbeitsspeicher darzustellen. Sie können in der Struktur mit der Maus oder der Tastatur navigieren. Die schnellste Möglichkeit, den Knoten für ein bestimmtes Element auf der Seite zu finden, ist es, das Feature "Element durch Klicken auswählen" zu verwenden. Verwenden Sie dieses Feature, um auf der Seite ein Element auszuwählen, woraufhin die Tools automatisch den entsprechenden Strukturknoten auswählen. Eine alternative Methode ist die Verwendung des Felds "Suchen".

Überprüfen von HTML-Elementen

Sobald Sie in der DOM-Struktur ein Element ausgewählt haben, zeigt der Eigenschaftenbereich auf der rechten Seite auf die folgende Weise weitere Informationen zum Element an:

  • Format: Der Befehl "Format" verbessert das CSS-Debugging, indem er eine Liste aller Regeln bereitstellt, die für das ausgewählte Element gelten. Die Regeln werden nach Rangfolge angezeigt, damit die zuletzt anzuwendenden am unteren Rand angezeigt werden. Jede Eigenschaft, die von einer anderen außer Kraft gesetzt wurde, wird durchgestrichen, wodurch Sie schnell erkennen können, wie sich die CSS-Regeln auf das aktuelle Element auswirken, ohne Selektoren manuell vergleichen zu müssen. Sie können eine CSS-Regel schnell ein- oder ausschalten, indem Sie das Kontrollkästchen neben der Regel aktivieren oder deaktivieren, woraufhin die Aktion sofort auf der Seite ausgeführt wird.
  • Formate nachverfolgen: Dieser Befehl enthält die gleichen Informationen wie "Format", mit der Ausnahme, dass Formate nach Eigenschaft gruppiert werden. Wenn Sie nach Informationen zu einer bestimmten Eigenschaft suchen, wechseln Sie zum Befehl "Formate nachverfolgen". Suchen Sie einfach die Eigenschaft, die Sie interessiert, klicken Sie auf das Plussymbol (+), und zeigen Sie eine Liste aller Regeln wieder nach Rangfolge an, die diese Eigenschaft festgelegt haben.
  • Layout: Der Befehl "Layout" stellt Feldmodellinformationen bereit, z. B. den Versatz, die Höhe und den Textabstand des Elements. Verwenden Sie diesen Befehl beim Debuggen der Positionierung eines Elements.
  • Attribute: Mit dem Befehl "Attribute" können Sie alle definierten Attribute des ausgewählten Elements überprüfen. Dieser Befehl ermöglicht Ihnen auch das Bearbeiten, Hinzufügen oder Entfernen von Attributen zum oder aus dem ausgewählten Element.

Um CSS weiter zu überprüfen, wechseln Sie zur Registerkarte "CSS", um eine Liste aller CSS-Dateien für die aktuelle Website zu erhalten.

Überprüfen von CSS-Eigenschaften

Durch den Wechsel zur Registerkarte "CSS" erhalten Sie Zugriff auf alle zu überprüfenden externen CSS-Dateien. Wählen Sie ein Stylesheet aus, indem Sie auf die Schaltfläche "Stylesheetauswahl" klicken. Wenn Sie auf den Namen oder Wert einer Formateigenschaft klicken, können Sie diesen ändern und sofort die daraufhin erfolgte Auswirkung erkennen.

Schnelles Bearbeiten von Quellen

Nachdem Sie die Tools zum Überprüfen und Erfassen der erforderlichen Informationen verwendet haben, möchten Sie für die Ergebnisse möglicherweise sofort eine Maßnahme ergreifen. Um HTML-Attribute oder CSS-Eigenschaften zu bearbeiten, klicken Sie einfach darauf, geben einen neuen Wert ein und drücken die EINGABETASTE. Die Änderung wird sofort wirksam, damit Sie die Änderungen schnell testen können. In HTML können Sie auch auf die Schaltfläche "Bearbeiten" klicken, damit die gesamte Struktur bearbeitet werden kann, um dann vollständige Elemente hinzuzufügen, zu entfernen oder zu bearbeiten. In beiden Fällen ermöglichen die Entwicklertools eine schnelle Bearbeitung, ohne die Quelle zu ändern. Nachdem alles an seinem gewünschten Platz ist, können Sie die Änderungen speichern.

Speichern von Änderungen

Alle in den Tools vorgenommenen Änderungen sind nur in der internen Darstellung der Website von Internet Explorer verfügbar. Durch das Aktualisieren oder Verlassen der Seite wird die ursprüngliche Website wieder angezeigt. In einigen Fällen möchten Sie die Änderungen jedoch möglicherweise speichern. Klicken Sie auf den Registerkarten "HTML" und "CSS" auf die Schaltfläche "Speichern", um das aktuelle HTML oder CSS in einer Datei zu speichern. Denken Sie daran, dass sich nicht nur die von Ihnen geänderten Bereiche der Website von der Quelle unterscheiden, sondern auch andere Teile können abweichen, da die Tools die Website so anzeigen, wie sie in Internet Explorer vorhanden ist, anstatt in der Quelle. Damit das ungewollte Überschreiben der Quelle verhindert wird, speichern die Tools die Ausgabe als Text und fügen einen führenden Kommentar zur Datei hinzu.

Weitere Informationen zu HTML und CSS finden Sie im Artikel Debuggen von HTML und CSS mit den Entwicklertools (möglicherweise in englischer Sprache).

Debuggen von JScript

Während es CSS einfacher gestaltet, dynamische Websites ohne JScript zu erstellen, erfordern die meisten komplexen Websites weiterhin zumindest etwas Skript. Und wie bei jeder Programmiersprache ist ein guter Debugger entscheidend für die Produktivität, und die Entwicklertools stellen eben diesen zur Verfügung.

Starten und Beenden des Debuggers

Das Debuggen von JScript in Internet Explorer 8 ist einfach. Öffnen Sie auf einer beliebigen zu debuggenden Website die Entwicklertools, wechseln Sie dann zur Registerkarte "Skript", und klicken Sie anschließend auf "Debuggen starten". Wenn sie den Debugprozess starten, aktualisieren die Entwicklertools die Seite und lösen die Tools, sofern diese angeheftet sind.

Nach dem Start steht Ihnen die gesamte Funktionalität zur Verfügung, die Sie von einem Debugger erwarten. Sobald Sie fertig sind, klicken Sie erneut auf die Schaltfläche, um das Debuggen zu beenden. Während der Debugger gestartet wird, bieten die Entwicklertools eine leistungsstarke Steuerung sowie Einblicke in die Skripts.

Steuern der Ausführung

Sie können die Ausführung an einer angegebenen Stelle anhalten, indem Sie Haltepunkte festlegen. Klicken Sie auf eine Zeilennummer, oder klicken Sie mit der rechten Maustaste auf die Quelle, und wählen Sie dann "Haltepunkt einfügen" aus. Sie können Haltepunkte innerhalb von Inlinefunktionen oder Ereignishandlern festlegen. Außerdem können auch bedingte Haltepunkte festgelegt werden.

Wenn Sie nicht sicher sind, wo ein Haltepunkt festzulegen ist, klicken Sie auf "Alle unterbrechen", um die Ausführung anzuhalten, bevor die nächste JScript-Anweisung oder "Bei Fehler unterbrechen" ausgeführt wird, wenn in Internet Explorer ein Skriptfehler auftritt. Nachdem Sie die Ausführung angehalten haben, durchlaufen Sie das Skript, einschließlich anonymer Funktionen und der Befehle "Einzelschritt", "Prozedurschritt" und "Ausführen bis Rücksprung".

Untersuchen von Variablen

Während Sie den Code durchlaufen, ist es hilfreich, den aktuellen Status von Variablen zu überprüfen. Verwenden Sie innerhalb der Registerkarte "Skript" den Bereich "Lokale Variablen", um lokale Variablen anzuzeigen und den Bereich "Überwachen", um eine benutzerdefinierte Liste von Variablen zu überwachen. Sie können dieser Liste Variablen hinzufügen, indem Sie das mit der rechten Maustaste auf die Quelle klicken und dann auf "Überwachung hinzufügen" klicken oder den Variablennamen im Bereich "Überwachen" eingeben.

Untersuchen der Aufrufliste

Während Sie die Anwendung debuggen, indem Sie den JScript-Code durchlaufen, können Sie die Funktionen in der aktuellen Aufrufliste anzeigen. Wenn auf eine Funktion aus der Aufruflistenliste geklickt wird, zeigt dies den Quellcode im primären Inhaltsbereich an.

Verwenden der Debuggerkonsole

Mit den Entwicklertools geben Sie einfach die JScript-Anweisungen im Konsolenbereich ein, um ihn auszuführen, anstatt die Quelle zu bearbeiten, um eine Anweisung zu testen. Klicken Sie auf "Mehrzeiliger Modus", um mehrere Zeilen für die gleichzeitige Ausführung einzugeben. Internet Explorer führt sofort den Code aus, damit Sie das Ergebnis testen können, wenn dieser Code an derselben Position wie der aktuelle Haltepunkt hinzugefügt wird. Sie können die Konsole sogar verwenden, wenn Sie nicht debuggen. Damit Sie auf Ihrer Seite problemlos Fehler beheben können, protokolliert die Konsole auch alle Skriptfehlermeldungen über die Datei "console.log". Weitere Informationen hierzu finden Sie unter Debugskript mit den Entwicklertools unter dem Abschnitt "Verwenden der Konsole zum Ausführen von Codeanweisungen" (möglicherweise in englischer Sprache).

Ausführlichere Informationen zum Skriptdebugging finden Sie im Artikel Debuggen von Skripts mithilfe der Entwicklertools (möglicherweise in englischer Sprache).

Profilerstellung für JScript-Leistungen

Das Debuggen von JScript hilft dabei, das Verhalten der Website zu optimieren, aber der JScript-Profiler kann dabei helfen, die Website durch das Verbessern der Leistung auf die nächste Ebene zu heben. Der Profiler bietet Ihnen Daten zu Zeiten, die für jede der JScript-Methoden der Website. Dies umfasst sogar integrierte JScript-Funktionen wie die Zeichenfolgenverkettung. Da Sie den JScript-Profiler jederzeit während der Anwendungsausführung starten und beenden können, ist es möglich, mehrere Profildaten für das bestimmte Szenario zu erfassen, das Sie interessiert.

Starten und Beenden von Profiler

Wie beim Debugger sind die ersten Schritte einfach: Öffnen Sie die Registerkarte "Profiler", und klicken Sie auf "Profilerstellung starten", um eine Sitzung zu starten. Führen Sie das Szenario aus, für das Sie die Profilerstellung benötigen, und klicken Sie dann auf "Profilerstellung beenden". Die resultierenden Daten können dann sofort untersucht werden.

Anzeigen von Daten

Standardmäßig werden die Daten in einer Funktionsansicht angezeigt, in der alle verwendeten Funktionen aufgeführt sind. Klicken Sie auf das Dropdownmenü "Aktuelle Ansicht", und wählen Sie "Aufrufstruktur" aus, um eine Struktur anzuzeigen, die die Reihenfolge der erfolgten Aufrufe darstellt, damit Sie den Codepfad durchlaufen und Hotspots suchen können. In beiden Ansichten können Sie die Spalten hinzufügen, entfernen, anordnen und sortieren, um die gewünschten Informationen zu suchen.

Der Profilbericht bietet Ihnen Informationen zur URL und der Zeilenanzahl der Funktion, um Sie bei der Suche des Codes in der Anwendung zu unterstützen. Klicken Sie auf den Funktionsnamen, um den Quellcode für die Funktion im primären Inhaltsbereich der Registerkarte "Skript" aufzurufen.

Hinweis: Die Zeilennummerzuordnung zur Quellcodefunktionalität ist nur verfügbar, wenn das Skriptdebugging aktiviert wird. Weitere Informationen zum Skriptdebugging finden Sie unter Debuggen von Skripts mithilfe der Entwicklertools (möglicherweise in englischer Sprache).

Profilerstellung für mehrere Sitzungen und Exportieren von Daten

Klicken Sie auf "Profilerstellung starten", um eine neue Profilerstellungssitzung zu starten. Wenn Sie auf "Profilerstellung beenden" klicken, werden die neuen Daten angezeigt. Um die Daten von vorherigen Profilerstellungssitzungen anzuzeigen, klicken Sie auf die Dateidropdownliste und wählen einen anderen Bericht aus. Der Profilbericht bleibt für den aktuellen Internet Explorer-Prozess erhalten, aber Sie können die Profildaten im CSV-Format speichern, indem Sie auf die Schaltfläche "Exportieren" klicken und eine beliebige andere Anwendung für spätere Untersuchungen verwenden.

Weitere Informationen zur Profilerstellung finden Sie im Artikel Profilerstellungsskript mit den Entwicklertools (möglicherweise in englischer Sprache).

Suchen nach Inhalten

Die Entwicklertools bieten eine Gruppe von Tools zum Untersuchen und Ändern Ihrer Quellen, um etwas schnell testen zu können. Wenn Sie über viele Quellen verfügen, die durchsucht werden müssen, wäre es dann nicht schön, wenn Sie das Gesuchte schnell finden können? Dies ist möglich, und Sie können es mit dem Feld "Suchen" erreichen, das in den Entwicklertools bereitgestellt wird. Das Feld "Suchen" ist von der Registerkarte für den Modus kontextabhängig, auf der Sie sich gerade befinden. Wenn Sie sich z. B. gerade auf der Registerkarte "HTML" befinden, dann wird die Suche für das Dokumentobjektmodell im primären Inhaltsbereich ausgeführt. Alle Übereinstimmungen werden hervorgehoben, und die erste Übereinstimmung wird ausgewählt. Auf ähnliche Weise können Sie auf der Registerkarte "CSS", "Skript" und "Profiler" suchen.

Das Feld "Suchen" unterstützt auch die W3C Selectors API  World Wide Web-Link-Syntax für die Registerkarte "HTML". Zum Verwenden der Selektorsyntax starten Sie die Suche mit dem Symbol "@". Geben Sie z. B. "@div" ein, um alle div-Elemente zu suchen. Wenn Sie nur div-Elemente mit einem bestimmten CSS-Klassennamen suchen, geben Sie "@ div.meinKlassenname" ein. Geben Sie "@ .meinKlassenname" ein, um alle Elemente mit diesem Klassennamen zu finden. Sie können auch Elemente mit einer definierten ID suchen, indem Sie "@ #meineID" eingeben. Weitere Informationen zu CSS-Selektoren finden Sie unter Informationen zu CSS-Selektoren (möglicherweise in englischer Sprache).

Hinweis: Bei Klassennamen wird die Groß-/Kleinschreibung beachtet, wenn die Selektorsyntax im Feld "Suchen" verwendet wird.

Anzeigen von Quellen

Vor Internet Explorer 8 konnte als einzige anzuzeigende Quelle nur die ursprüngliche Quelle verwendet werden, indem Sie mit der rechten Maustaste auf eine Webseite klicken und "Quelle anzeigen" auswählen. Dies ist immer noch verfügbar, aber mithilfe des Befehls "Ansicht" der Entwicklertools haben Sie mehr Kontrolle darüber, welche Quellen angezeigt werden. Sie entscheiden sich möglicherweise dafür, nur ein bestimmtes Element mit seinen DOM-Quellen oder mit DOM-Quellen und Formaten anzuzeigen, die auf dieses Element angewendet wurden. Dadurch wird das Element isoliert, um Ihnen das Blickfeld zu bieten, das Sie benötigen, um potenzielle Probleme zu entdecken. Sie können auch die ursprüngliche Quelle der Webseite oder die DOM-Quellen anzeigen, wie sie von Internet Explorer dargestellt werden. Dies schließt die ursprünglichen und die von Skripts eingefügten Quellen ein. Jetzt sehen Sie genau das, was dem Internet Explorer-Browser angezeigt wird.

Ebenfalls zum Befehl "Ansicht" gehört die Option zum Anzeigen des Linkberichts. Der Linkbericht wird in einer separaten Registerkarte des Browsers mit Informationen über alle auf der Seite befindlichen Links generiert.

Hinweis: Entwicklertools bieten Ihnen die Möglichkeit, eine eigene Anwendung zum Anzeigen der Quelle auszuwählen. Diese Option befindet sich unter dem Menü "Datei".

Abgrenzen von Elementen auf dem Bildschirm

Haben Sie sich je gefragt, wo sich der Rahmen eines bestimmten Elements auf dem Bildschirm befindet? Mussten Sie jemals für den Rahmen eines Elements den Wert "1" festlegen, um zu erkennen, wo sich dieser befindet? Mit dem Befehl "Kontur" der Entwicklertools können Sie die Konturen sämtlicher Elemente erkennen, ohne die Quellen ändern zu müssen. Der Befehl bietet einige häufig verwendeten Elemente wie Tabellen, Div-Elements und Bilder. Er bietet Ihnen auch ein Dialogfeld zum Hinzufügen beliebiger Elemente, deren Kontur Sie anzeigen möchten. Sie können den einzelnen Elementen auch eine Farbe zuweisen, um sie leichter unterscheiden zu können. Die Konturen bleiben erhalten, bis Sie sie deaktivieren oder die Seite aktualisieren. Weitere Informationen zum Menü "Kontur" finden Sie unter Referenz zur Benutzeroberfläche der Entwicklertools (möglicherweise in englischer Sprache) unter dem Abschnitt "Menü 'Kontur'".

Arbeiten mit Bildern

Bei der Arbeit mit Bildern bieten die Entwicklertools verschiedene Befehle, die Sie beim schnellen Identifizieren von Bildinformationen auf dem Bildschirm unterstützen, z. B. Dateigröße, Abmessungen und Pfad. Sie haben auch die Möglichkeit, die Darstellung von Bildern zu aktivieren oder zu deaktivieren. Sie bieten sogar einer Option zum Generieren eines Bildberichts für jedes auf der Webseite gefundene Bild.

Steuern von Cache und Cookies

Mithilfe des Befehlsmenüs "Cache" haben Sie die Kontrolle über die Einstellungen für Cache und Cookies. Sie können den Browser so einstellen, dass die Aktualisierung immer über den Server erfolgt, damit Sie wissen, dass Sie immer die aktuellsten Informationen erhalten. Sie können den Cache auch mit "Browsercache löschen" oder "Browsercache für diese Domäne löschen" steuern.

Bei der Arbeit mit Cookie können Sie diese Option auch deaktivieren, damit keine Cookies auf Ihren Computer geschrieben werden. Sie können schnell eine vollständige Liste aller Cookies anzeigen, indem Sie auf "Cookieinformationen anzeigen" klicken. Sie können auch die Optionen "Sitzungscookies deaktivieren" oder "Cookies für Domäne deaktivieren" auswählen.

Sowohl für den Cache als auch für die Cookies sind diese Befehle sehr praktisch, da Sie Ihnen den schnellen Zugriff auf die Browserumgebung bieten sowie deren umfassende Steuerung ermöglichen.

Verwenden der Power Tools

Das Befehlsmenü "Extras" bietet Ihnen drei leistungsstarke Tools für die Arbeit mit Ihren Websites.

  1. Das Tool "Größe ändern": Dieses Tool hilft Ihnen dabei, die Größe des Browserfensters schnell auf Standardgrößen einzustellen, z. B. 800x600 oder 1024x768. Sie können sogar benutzerdefinierte Fenstergrößen hinzufügen. Dazu sind Tastenkombinationen verfügbar und eine Übersicht finden Sie unter Referenz zu Tastenkombinationen für Entwicklertools (möglicherweise in englischer Sprache).
  2. Das Tool "Lineal anzeigen": Mit diesem Tool können Sie Lineale auf dem Bildschirm anzeigen, die beim Ermitteln von Abständen zwischen Objekten helfen. Für die Lineale können die Optionen "An X-/Y-Achse ausrichten", "An Element ausrichten" oder "Freie Eingabe" festgelegt werden. Sie können beliebig viele Lineale anzeigen und auch Lineale wiederverwenden, indem Sie deren Größe ändern und sie herum ziehen.
  3. Das Tool "Farbauswahl anzeigen": Dieses Tool hilft Ihnen beim Auswählen einer Farbe. Indem Sie die Farbauswahl über einem Text, Objekt oder Hintergrund positionieren, wird auf dem Bildschirm ein Beispiel der Farbe zusammen mit ihrem Hexadezimalwert angezeigt, die momentan auf der Farbauswahl eingestellt ist. Nachdem Sie auf eine Farbe geklickt haben, können Sie den Wert in Ihren Code kopieren.

Überprüfen der Quellen

Sobald Sie die Entwicklungsarbeit abgeschlossen haben, ist es gut zu wissen, dass der Code verschiedenen Standards entspricht, z. B. HTML, CSS und der Barrierefreiheit. Die Entwicklertools haben diese nützlichen Ressourcen angesammelt, um Sie beim Prüfen der Quellen hinsichtlich dieser Standards zu unterstützen. Wählen Sie einfach den Typ der auszuführenden Überprüfung oder die Option "Mehrere Überprüfungen..." aus.

Testen in verschiedenen Browser- und Dokumentmodi

Internet Explorer 8 bietet die Möglichkeit, Seiten im Internet Explorer 7-Format darzustellen und Versionsinformationen als Internet Explorer 7 zu melden. Webentwickler und Endbenutzer können diese Fähigkeit nutzen, um sicherzustellen, dass Websites weiterhin funktionieren, auch wenn sie nicht für Internet Explorer 8 erstellt wurden. Sie können damit aber auch testen, wie sich die Website den Internet Explorer 7-Benutzern präsentiert.

Testen der Browsermodi

Mithilfe des Menüs "Browsermodus" können Sie auswählen, wie Internet Explorer drei wichtige Eigenschaften melden soll:

  • Zeichenfolge des Benutzer-Agenten: Der Wert, den Internet Explorer an Webserver sendet, um sich selbst zu identifizieren.
  • Versionsvektor: Der beim Auswerten von bedingten Kommentaren verwendete Wert.
  • Dokumentmodus: Der Wert, mit dem ermittelt wird, ob Internet Explorer das aktuellste Verhalten für CSS-, DOM- und JScript-Vorgänge verwendet oder aus Kompatibilitätsgründen eine frühere Version von Internet Explorer emuliert.

Es gibt drei Browsermodusoptionen, von denen jede dieser Werte auf eine andere Weise ändert:

  • Internet Explorer 7: In diesem Modus meldet Internet Explorer einen Benutzer-Agent, Versionsvektor und Dokumentmodus, die mit den von Internet Explorer 7 verwendeten Angaben identisch sind. Verwenden Sie diesen Modus zum Testen, wie die Website den Internet Explorer 7-Benutzern dargestellt wird.
  • Internet Explorer 8: In diesem Modus meldet Internet Explorer einen Benutzer-Agent, Versionsvektor und Dokumentmodus, die dem Internet Explorer 8-Standardverhalten entsprechen, das in Internet Explorer 8 das standardkonformste verfügbare Verhalten darstellt. Verwenden Sie diesen Modus zum Testen, wie die Website den Internet Explorer 8-Benutzern dargestellt wird.
  • IE8-Kompatibilitätsansicht: In diesem Modus meldet Internet Explorer 8 einen Versionsvektor, Dokumentmodus und eine Zeichenfolge des Benutzer-Agents, als ob es sich um Internet Explorer 7 handelt würde. Die Zeichenfolge des Benutzer-Agents schließt auch ein Token ein, das angibt, dass es sich bei dem Browser tatsächlich um Internet Explorer 8 handelt. Verwenden Sie diesen Modus zum Testen, wie die Website den Internet Explorer 8-Benutzern dargestellt wird, wenn diese die Option "Kompatibilitätsansicht" aktiviert haben.

Testen der Dokumentmodi

Das Dokumentmodus definiert, wie Internet Explorer die Seite darstellt, hat aber keine Auswirkungen auf den Versionsvektor oder die Zeichenfolge des Benutzer-Agents. Wenn Sie diese Option zusammen mit dem Browsermodus verwenden, können Sie schnell testen, welchen Dokumentmodus Sie für die Website verwenden sollten. Es gibt drei Optionen:

  • Quirksmodus: Beim Darstellen eines Dokuments ohne "doctype" oder mit einem "Quirks doctype" entspricht dieses Verhalten dem von Internet Explorer. Es ist dem Verhalten von Microsoft Internet Explorer 5 und dem Quirksmodusverhalten von Internet Explorer 6 ähnlich und gleicht dem Quirksmodus von Internet Explorer 7.
  • Internet Explorer 7-Standards-Modus: Dieses Verhalten entspricht dem von Internet Explorer 7 beim Darstellen eines Dokuments mit einem striktem oder unbekannten "doctype".
  • Internet Explorer 8-Standards-Modus: Dieses Verhalten ist das aktuellste, verfügbare standardkonforme Verhalten in Internet Explorer 8. Es ist der in Internet Explorer 8 beim Darstellen eines Dokuments mit striktem oder unbekannten "doctype" standardmäßig verwendete Modus.

Weitere Informationen zu Dokumentkompatibilitätsmodi finden Sie im Artikel Testen der Browser- und Dokumentkompatibilitätsmodi mit den Entwicklertools (möglicherweise in englischer Sprache)

Verwenden von Tastenkombinationen

Die Entwicklertools von Internet Explorer 8 bieten eine umfangreiche Unterstützung von Tastenkombinationen, damit Aufgaben noch leichter ausgeführt werden können. Verwenden Sie Windows-Standardkonventionen wie F12, um die Entwicklertools zu öffnen oder zu schließen und F5, um die Seite zu aktualisieren. Die vollständige Liste finden Sie unter Referenz zu Tastenkombinationen für Entwicklertools (möglicherweise in englischer Sprache).

Verweisen auf Schnittstellenbefehle

Während in diesem Artikel viele der Hauptfeatures der Entwicklertools eingeführt werden, können Sie weitere Informationen zu allen verfügbaren Tools unter Referenz zur Benutzeroberfläche der Entwicklertools (möglicherweise in englischer Sprache) finden.

Verwandte Themen