.gif)
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
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.
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
.gif)
-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.
- 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).
- 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.
- 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