Einführung in die Entwicklertools (F12)

Bei den F12-Entwicklungstools handelt es sich um eine Suite von Tools, die Sie beim Erstellen und Debuggen von Webseiten unterstützen.

Dieser Inhalt bezieht sich auf eine ältere Version der F12-Tools. Sehen Sie sich unsere neueste Dokumentation zu den F12-Tools an.

Wenn Sie attraktive Webseiten schreiben möchten, benötigen Sie Kenntnisse im Codieren sowie die richtigen Tools zum Suchen und Debuggen der Probleme, die zwangsläufig auftreten werden. Windows Internet Explorer 9 stellt eine Ansicht des gerenderten Codes bereit, und die F12-Tools stellen eine Ansicht der Interpretation dieser Seiten auf Codeebene durch Internet Explorer 9 bereit. Außerdem können Sie mit den F12-Tools Elemente auf der Seite wie beispielsweise Link- und Bildberichte identifizieren und erstellen.

Funktionsweise der F12-Tools

Wenn Sie HTML-Code analysieren, entspricht die Ansicht, die Sie mit den F12-Tools erhalten, nicht dem ursprünglichen Quellcode, sondern der tatsächlichen Interpretation des  Dokumentobjektmodells (Document Object Model (DOM) von Internet Explorer 9. Das ist ein wichtiger Unterschied. Aufgrund der Darstellung ist es sinnvoll, die Registerkarte "HTML" zu aktualisieren, um jeweils das aktuelle DOM anzuzeigen. Das gilt vor allem, wenn Sie dynamische Elemente verwenden.

Auf der Registerkarte "HTML" wird das dynamische Markup der Webseite in einer Strukturansicht dargestellt. Dies unterscheidet sich insofern vom ursprünglichen Quellcode, als hierbei die Interpretation des ursprünglichen Markupcodes durch Internet Explorer 9 sowie alle Änderungen widergespiegelt werden, die seit dem Laden der Seite am DOM vorgenommen wurden. Sie müssen diese Ansicht regelmäßig aktualisieren, damit alle kürzlich am DOM vorgenommenen Änderungen wiedergegeben werden.

Wenn Sie beispielsweise eine Webseite mithilfe von Skripts erstellen, können Sie durch Anzeigen des Quellcodes nicht unbedingt erkennen, wie die Seite den Benutzern tatsächlich angezeigt wird. So wird es vermutlich eine Weile dauern, bis Sie einen im HTML-Code oder in Cascading Stylesheets (CSS) entstandenen Renderingfehler im ursprünglichen Quellcode finden. Wenn Sie jedoch die F12-Tools verwenden, wird der von Internet Explorer im DOM interpretierte tatsächliche Code angezeigt.

Dieses Verhalten wird im folgenden Beispiel veranschaulicht. Im folgenden Codebeispiel sehen Sie den Quellcode und den daraus resultierenden Code, der beim dynamischen Erstellen von Elementen der Webseite von Internet Explorer interpretiert wird.


<!DOCTYPE html PUBLIC>
<html>
<head>
    <script type="text/javascript">
        function makePage() {
            for (var i = 1; i < 10; i++) {
                var myChild = document.createElement("div");
                var myDiv = document.getElementById("myCount");                
                myChild.appendChild(document.createTextNode("Number: " + i));                               
                myDiv.appendChild(myChild);
            }        
        }    
</script>
    <title>Dynamic page sample</title>
</head>
<body onload="makePage();">
<h1>Dynamic page sample</h1>
<div id="myCount"></div>
</body>
</html>


Wenn das vorangehende Beispiel von Internet Explorer 9 gerendert wird, sieht es wie im folgenden Screenshot aus. Auf der Webseite wird eine Reihe von neun "<div>"-Elementen mit Text angezeigt.

Abbildung des integrierten Skripts für eine Webseite

Wenn Sie sich den Quellcode ansehen (klicken Sie mit der rechten Maustaste in das Browserfenster und dann auf  Quellcode anzeigen), wird im Wesentlichen nur das erste "<div>"-Tag angezeigt, das als übergeordnetes Element verwendet wurde.

Abbildung des HTML-Quellcodes einer dynamischen Seite

In der Anzeige auf der Registerkarte "HTML" werden jedoch das übergeordnete Tag ("<div id="myCount">") sowie weitere "div"-Elemente und Textinhalte angezeigt, die vom Skript hinzugefügt wurden. Drücken Sie während der Bearbeitung und beim Ändern von Skriptcode zwischendurch F5, um die DOM-Ansicht zu aktualisieren.

Abbildung der DOM-Ansicht von dynamisch generiertem HTML-Code

Öffnen der F12-Tools

Sie können die F12-Tools über jede in Internet Explorer 9 angezeigte Seite aufrufen, indem Sie F12 drücken oder auf die Schaltfläche "Extras" Abbildung der Internet Explorer-Schaltfläche 'Extras' klicken und dann F12 Entwicklertools auswählen. Die F12-Tools werden in einem separaten Fenster geöffnet. Sie können sie jedoch an die Seite, mit der Sie arbeiten, anheften, indem Sie auf die Schaltfläche zum Anheften klicken oder STRG+P drücken. Beachten Sie, dass das Fenster nicht angeheftet werden kann, während Sie auf der Registerkarte Skript debuggen (also auf Debuggen starten geklickt haben).

Wenn Sie nicht die gesamte Benutzeroberfläche der Tools benötigen, können Sie auf die Schaltfläche Minimieren klicken oder STRG+M drücken, nachdem die Tools angeheftet wurden. Die Tools werden unten im Fenster in einer Zeile angezeigt, sodass Sie auf die Leiste mit dem Befehlsmenü zugreifen können.

Abbildung der minimierten F12-Entwicklungstools

Navigieren auf der Webseite und im Code in den F12-Tools

Die F12-Tools sind in zwei Bereiche aufgeteilt, und zwar in Seitentools und visuelle Tools und in Debuggingtools (Codeebene).

Der Zugriff auf die Seitentools und visuellen Tools erfolgt meistens über das Hauptmenü oder über Tastenkombinationen. Mit diesen Tools können Aufgaben wie das Erstellen von Berichten für alle Links im Dokument oder das visuelle Hervorheben eines bestimmten Elements auf einer Seite ausgeführt werden. Weitere Informationen zum Verwenden der Seitentools und visuellen Tools, Menüs und Schaltflächen finden Sie unter Erste Schritte mit den Entwicklertools (F12).

Der Zugriff auf die Tools für die Codeebene erfolgt über sechs dedizierte Registerkarten, auf denen Optionen für HTML, CSS und Skriptdebugging sowie für die Codeprofilerstellung und die Aufzeichnung des Netzwerkdatenverkehrs bereitgestellt werden. Auf der Registerkarte Konsole haben Sie die Möglichkeit, Meldungen zu erhalten und anzuzeigen, die Sie mithilfe der Konsolenbefehle aus dem Code senden können.

Weitere Informationen finden Sie in den folgenden Themen:

Viele der Tools und Optionen in den F12-Tools sind kontextbezogen. Das bedeutet, dass beim Wechseln zwischen den Registerkarten jeweils andere Optionen verfügbar sind. Einige Features können jedoch in allen Tools verwendet werden. Die folgenden Tipps und Tricks erleichtern Ihnen den Einstieg in die Arbeit mit den Tools.

Ändern von Attributen und Variablen

In den meisten der in den F12-Tools verfügbaren Ansichten können Sie zum Ändern der Werte auf die Attribute und Variablen klicken und einen neuen Wert eingeben. Auf der Registerkarte "CSS" können Sie die jeweils zu verwendenden Formate und Regeln durch Aktivieren oder Deaktivieren der entsprechenden Kontrollkästchen ändern.

Suchen nach Elementen

Im Feld Suchen können Sie ein bestimmtes Tag, eine ID, ein Element, eine Variable oder eine Zeichenfolge eingeben und dann die EINGABETASTE drücken, um das gewünschte Element im Webseitencode oder in den Details (z. B. unter einer erweiterten Liste von Eigenschaften auf der Registerkarte "Skript") zu suchen. In der aktuellen Ansicht sind alle gefundenen Elemente hervorgehoben, und Suchvorgänge können überall außer auf der Registerkarte Konsole oder in der Konsolenansicht auf der Registerkarte Skript ausgeführt werden. Für die Registerkarte Netzwerk gilt Folgendes: Wenn Sie sich in der Überblickansicht befinden, wird für die Suche die Detailansicht geöffnet, und es werden Suchergebnisse für alle Kategorien angezeigt. Auf der Registerkarte Skript können Sie auch alle für die Seite verwendeten Skriptdateien (und nicht nur die angezeigte Skriptdatei) durchsuchen.

Abbildung des Suchfelds der F12-Tools

Bei mehreren Treffern können Sie zwischen den Suchergebnissen navigieren, indem Sie die EINGABETASTE oder UMSCHALT+EINGABE drücken bzw. auf die Schaltfläche Weiter oder Zurück klicken.

Schaltflächen 'Weiter' und 'Zurück' für die Suche in den F12-Tools

Element durch Klicken auswählen

Sie können sich die Suche nach bestimmten Elementen in einer umfangreichen DOM-Struktur erleichtern, indem Sie einzelne Elemente im Browser auswählen und sie auf der Registerkarte "HTML" der F12-Tools hervorheben. Klicken Sie im Debuggingfenster der F12-Tools auf die Schaltfläche Element durch Klicken auswählenSchaltflächensymbol 'Element durch Klicken auswählen', oder drücken Sie STRG+B, um Elemente auf der Webseite beim Daraufzeigen auf die Seite hervorzuheben. Wenn Sie auf ein hervorgehobenes Element klicken, wird die Registerkarte "HTML" geöffnet, und der Fensterinhalt wird verschoben, sodass das ausgewählte Element im Codebereich angezeigt wird. In einigen Fällen müssen Sie möglicherweise die Ansicht der Registerkarte "HTML" aktualisieren, damit das Element angezeigt wird.

Abbildung der ausgeführten Aktion 'Element durch Klicken auswählen' in den F12-Tools

Verwandte Themen

Erste Schritte mit den Entwicklertools (F12)
Verwenden der Entwicklertools (F12) zum Debuggen von Webseiten
Verwenden der Konsole in den Entwicklertools (F12) zum Anzeigen von Fehlern und Statusangaben
Verwenden der Aufzeichnung des Netzwerkdatenverkehrs in den Internet Explorer-Entwicklertools

 

 

Anzeigen:
© 2014 Microsoft