Erste Schritte mit Firefox, Firebug und einem Editor
JavaScripte können Sie mit ganz unterschiedlichen Programmen und Hilfsmitteln entwickeln und jeder Webautor hat unterschiedliche Bedürfnisse und Gewohnheiten. Sobald Sie einige Erfahrung gesammelt haben, sollten Sie sich umschauen, welche Arbeitsweise Ihnen am besten zusagt. Für den Anfang sei hier aber eine einseitige und parteiische Empfehlung ausgesprochen.
Firefox
Wenn Sie browserübergreifende JavaScripte für das öffentliche Web programmieren, so sollten Sie Ihre Scripte zunächst mit dem Browser Mozilla Firefox testen und sie mit dessen Hilfe fortentwickeln. Dieser Browser ist weit verbreitet, läuft auf allen relevanten Plattformen und ist einer der Ziel-Browser, auf dem Ihre Scripte auf jeden Fall funktionieren sollten. Firefox verfügt über ausgezeichnete JavaScript-Fähigkeiten und gibt präzise und hilfreiche JavaScript-Fehlermeldungen. Sie können Firefox unter getfirefox.com herunterladen.
Firebug
Eine entscheidende Hilfe stellt das Firefox-Zusatzprogramm Firebug dar. Firebug ist nicht nur ein mächtiges JavaScript-Werkzeug, sondern hilft auch enorm bei der HTML- und CSS-Entwicklung - insbesondere durch den sogenannten DOM-Inspektor, mit dem Sie den Elementbaum des HTML-Dokuments sowie die zugehörigen JavaScript- und CSS-Eigenschaften ansehen können. Nachdem Sie Firefox installiert haben, können Sie das Firebug-Addon über die Firefox-Addon-Datenbank installieren.
Firebug gibt Lernenden einen wertvollen Einblick in das DOM, veranschaulicht den Aufbau von JavaScript-Objekten und macht die Zusammenarbeit zwischen HTML, CSS und JavaScript verständlich. Seien Sie neugierig und spielen Sie mit Firebug herum – es wird Ihr Verständnis der Webtechniken und insbesondere des DOM Scripting enorm verbessern.
Texteditor
Eine weitere Voraussetzung für die JavaScript-Programmierung ist natürlich ein Texteditor, mit dem Sie die JavaScripte schreiben. Auch in puncto Editoren haben Sie zwischen tausenden eine Auswahl. Für den Anfang brauchen Sie keinen Editor mit besonderen Fähigkeiten. Er sollte jedoch Syntax-Highlighting für JavaScript-Code sowie die Anzeige von Zeilen- und Spaltennummern beherrschen. Denn diese Features erweisen sich direkt als hilfreich. Ein brauchbarer einfacher Editor für Windows ist Notepad++.
Mit diesem Dreiergespann bestehend aus einem komfortablen Texteditor, einem hochentwickelten Browser und einem Analyse-Werkzeug für JavaScripte können sie gut gewappnet in die Programmierung einsteigen.
Fehlermeldungen und Fehlerkonsolen
Der erste Anlaufpunkt beim Testen von Scripten in einem Browser ist die JavaScript-Konsole des Browsers. Darin werden Fehler aufgelistet, die bei der Ausführung aufgetreten sind. Eine solche Fehlermeldung besteht üblicherweise aus einer Fehlerbeschreibung, der Script-Adresse sowie der Zeilennummer.
In der JavaScript-Konsole finden sich in erster Linie Ausnahmefehler (englisch exceptions). Ein solcher führt zum sofortigen Abbruch der Ausführung des Scriptes. Ein Ausnahmefehler tritt beispielsweise auf, wenn Sie auf eine nicht existente Variable zugreifen, eine nicht existente Methode aufrufen oder eine Objekteigenschaft ansprechen, obwohl es sich beim jeweiligen Wert nicht um ein Objekt handelt.
Die Browser unterscheiden sich darin, wie sie diese Fehlermeldungen darstellen und wie informativ diese sind. Die verständlichsten und präzisesten Fehlermeldungen liefert üblicherweise der Firefox-Browser.
Firefox-Fehlerkonsole und Firebug
Im Firefox können Sie die Meldungen über das Menü Extras → Fehlerkonsole erreichen:
Der obige Screenshot zeigt eine beispielhafte Fehlermeldung, die auftritt, wenn auf eine nicht definierte Variable zugegriffen wird. Der Code, der diesen Fehler absichtlich ausgelöst hat, lautet:
window.alert(nichtDefinierteVariable);
Wie der Fehlerkonsole zu entnehmen ist, steht dieser Code in der Zeile 3 des HTML-Dokuments mit der Adresse file:///C:/Users/molily/beispiel.html.
In der Fehlerkonsole von Firefox werden nicht nur JavaScript-Exceptions angezeigt, sondern auch andere Meldungen und Warnungen, die Firefox beim Verarbeiten von HTML- und CSS-Code ausgibt. Als Webentwickler sollten Sie daher immer ein Auge auf diese Fehlerkonsole haben.
Mithilfe des empfohlenen Firefox-Zusatz Firebug ist der Zugriff auf die Fehlerkonsole einfacher. Wenn bei der Ausführung eines Scriptes ein Ausnahmefehler auftritt, dann erscheint rechts unten in der Statusleiste ein rotes Fehlersymbol mit der Anzahl der Fehler. Wenn Sie darauf klicken, klappt Firebug am unteren Fensterrand auf und zeigt die Konsole samt Fehlermeldungen:
Firebug zeigt nicht nur die aus der herkömmlichen Firefox-Konsole bekannten Informationen an, sondern zeigt sogar die JavaScript-Codezeile, in der der Fehler aufgetreten ist. Außerdem führt ein Klick auf den grünen Code oder den blauen Zeilenverweis in den Script-Tab von Firebug. Darin wird der gesamte JavaScript-Code dargestellt und direkt zu der verantwortlichen Zeile gesprungen:
Nach Möglichkeit sollten Sie mit den JavaScript-Konsolen von Firefox bzw. dem Firebug-Zusatz arbeiten. Dennoch soll nicht verschwiegen werden, wie Sie in den anderen relevanten Browsern an die Fehlermeldungen kommen.
Fehlermeldungen im Internet Explorer ab Version 8
Der Internet Explorer hat zwei verschiedene MNodi, was den Umgang mit JavaScript-Fehlermeldungen angeht. Entweder zeigt er jeden JavaScript-Fehler in einem Dialogfeld an. Oder er versteckt diese Meldungen und macht sie nur auf Abruf zugänglich.
Wenn Sie Scripte im Internet Explorer testen, sollten Sie zumindest zeitweise die Anzeige jedes Fehlers aktivieren. Beim normalen Surfen auf fremden Sites hingegen stören diese Fehlermeldungen. Um die Meldungen zu aktivieren, öffnen Sie die Internetoptionen des IE. Diese finden Sie im Menü Extras. In dem sich öffnenden Fenster wählen Sie die Registerkarte Erweitert. In der dortigen Liste nehmen Sie folgende Einstellungen vor:
- Skriptdebugging deaktivieren (Internet Explorer): Setzen Sie kein Häkchen in dieser Checkbox (d.h. Debugging soll aktiviert bleiben).
- Skriptfehler anzeigen: Setzen Sie ein Häkchen in dieser Checkbox (d.h. Skriptfehler sollen angezeigt werden).
Der folgende Screenshot zeigt diese Einstellungen:
Verlassen Sie die Internetoptionen, indem Sie mit OK bestätigen. Wenn nun ein JavaScript-Fehler auftritt, öffnet sich automatisch ein solches Meldungsfenster. Dieses sieht im Internet Explorer 8 (englischsprachiges Windows) so aus:
Der Internet Explorer 9 zeigt ein ähnliches Meldungsfenster an und bietet Ihnen ebenfalls an, den Fehler mit den Entwicklertools (siehe unten) zu debuggen:
Das Anzeigen von JavaScript-Fehlern ist nur während der Entwicklung sinnvoll. Sie sollten diese Möglichkeit nur solange in Anspruch nehmen, wie sie an JavaScripten arbeiten. Danach können sie die Fehlermeldungen in den Internetoptionen wieder ausschalten, damit Sie nicht beim normalen Surfen gestört werden.
Internet Explorers: Fehlerkonsole der Entwicklertools
Neben diesen Meldungsfenstern kennt der Internet Explorer ab Version 8 eine JavaScript-Konsole, in der alle Fehlermeldungen mitgeloggt werden. Der IE besitzt dazu die sogenannten Entwicklertools, die stark an Firebug angelehnt sind. Beim Drücken der Taste F12 klappt eine Leiste am unteren Fensterrand auf. Um JavaScript-Fehler zu sehen, müssen Sie den Tab Skript anwählen:
Diese Ansicht ist zweigeteilt: Im linken Bereich können alle eingebundenen JavaScripte angesehen werden, im rechten Bereich erscheint standardmäßig die JavaScript-Konsole. Wenn Ausnahmefehler auftreten, werden sie dort aufgelistet. Wie bei Firebug zeigen die IE-Entwicklertools neben dem Fehler ein Verweis auf die verantwortliche JavaScript-Codezeile an. Wenn Sie diesen anklicken, wird im linken Bereich die Codezeile hervorgehoben.
Sie können aus den Fehlermeldungsfenstern, welche im vorherigen Abschnitt gezeigt wurden, direkt in die Entwicklertools springen. Der Internet Explorer ab Version 8 bietet Ihnen an, den Debugger zu öffnen. Wählen Sie Ja bei der Frage Wollen Sie die Seite debuggen?, so öffnet sich automatisch der Skript-Tab der Entwicklertools. Darin wird die Codezeile markiert, in der der Fehler aufgetreten ist:
Fehlermeldungen in älteren Internet Explorern
Sie sollten bei der JavaScript-Entwicklung die neueste Internet-Explorer-Version verwenden, wenn es nicht gerade um das absichtliche Testen mit älteren Versionen geht. Denn die Fehlermeldungen in älteren Versionen sind weniger präzise sowie oft unverständlich und verwirrend. In manchen Fällen wird die Zeilennummer nicht korrekt angegeben und bei ausgelagerten JavaScript-Dateien die tatsächliche Script-Adresse nicht angegeben, nur die Adresse des einbindenden HTML-Dokuments. Ältere Internet Explorer kennen keine Konsole, in der alle Fehlermeldungen mitgeloggt werden.
Ein komfortables Debugging von Scripten im Internet Explorer vor Version 8 ist daher ohne Zusatzprogramme schwer möglich. Ein mögliches Zusatzprogramm, das ein brauchbares Fehler-Logging anbietet, lautet Companion.JS bzw. DebugBar. Einen komplexeren JavaScript-Debugger bietet die umfangreiche Visual Studio Express for Web, die sich kostenlos herunterladen lässt.
Opera-Fehlerkonsole und Opera Dragonfly
Im Opera-Browser erreichen Sie die Fehlerkonsole über den Menüeintrag Extras → Weiteres → Fehlerkonsole. Vorher müssen Sie die volle Menüleiste gegebenenfalls erst einblenden über Menü → Menüleiste zeigen.
Die Fehlerbeschreibungen sind im Allgemeinen weniger verständlich als im Firefox, aber zeigen zumindest die Code-Zeile an, die den Fehler ausgelöst hat:
Ähnlich wie beim Firefox handelt es sich um eine Mehrzweck-Konsole, in der sich u.a. auch HTML- und CSS-Warnungen finden. Eine Filterung nach JavaScript-Fehlern ist jedoch möglich, indem Sie im linken Aufklappmenü JavaScript wählen.
Zudem verfügt Opera über einen Firebug-ähnlichen Zusatz namens Dragonfly, der über das Menü Extras → Weiteres → Opera Dragonfly aktiviert werden kann (das ist das oben abgebildete Menü).
Dragonfly besitzt eine integrierte Fehlerkonsole, die die Meldungen etwas übersichtlicher auflistet und ein Springen zum JavaScript-Code ermöglicht, der den Fehler ausgelöst hat. Zudem kann Dragonfly wie Firebug und die Entwicklertools des Interent Explorers am unteren Fensterrand angezeigt werden:
Fehlerkonsolen in Chrome und Safari
Google Chrome und Apple Safari verfügen über dasselbe Entwicklerwerkzeug, den Web Inspector, mit dem sich JavaScript sehr gut debuggen lässt..
Um im Safari an die Fehlermeldungen zu kommen, müssen Sie zunächst das sogenannte Developer-Menü aktivieren, denn darüber lässt sich die JavaScript-Fehlerkonsole öffnen. Dazu wählen Sie im Menü Safari → Einstellungen… (Mac OS) beziehungsweise Bearbeiten → Einstellungen (Windows). Unter der Registerkarte Erweitert aktivieren Sie die Checkbox Menü „Entwickler“ in der Menüleiste einblenden.
Im Safari unter Mac OS sieht dieser Dialog so aus:
Dasselbe im Safari unter Windows:
Wenn sie nun die Einstellungen schließen, erscheint im Safari-Hauptfenster das Menü Developer, in dem Sie den Eintrag Fehlerkonsole einblenden finden:
Diese Konsole ist Teil der Entwicklertools, welche Firebug-ähnlich typischerweise am unteren Rand des Browserfensters auftauchen. Der Beispielcode erzeugt darin folgende Fehlermeldung:
Mit einem Klick auf den Dateinamen können Sie in die Quelltext-Ansicht springen, um zur Code-Zeile zu gelangen, die den Fehler ausgelöst hat.
Im Chrome-Browser sieht die Fehlerkonsole sehr ähnlich aus. Sie öffnen die Konsole über Tools → Entwicklertools im Schraubenschlüssel-Menü.
Dadurch offenbart sich folgende Fehlermeldung in der Konsole:
Fehlersuche mit Kontrollausgaben
Hilfe, mein JavaScript funktioniert nicht! - Keine Panik. Wenn Sie bei der JavaScript-Programmierung ein paar Faustregeln befolgen, kommen Sie schnell voran und finden die Ursache.
Bei der JavaScript-Entwicklung sollten Sie sich eine methodische Herangehensweise angewöhnen: Werden Sie sich klar darüber, was sie genau vorhaben und wie, das heißt mit welchen Einzelschritten Sie das erreichen wollen. Wenn Sie sich diesen Programmablauf überlegt haben, recherchieren Sie die dazu nötigen JavaScript-Techniken. Suchen Sie in einer Objektreferenz die Objekte heraus, mit denen Sie arbeiten wollen. Lesen Sie die Beschreibungen aufmerksam durch, sodass Sie die Objekte korrekt verwenden können. Beachten Sie unter anderem den Typ von Eigenschaften und die Parameter, die Methoden entgegennehmen.
Wenn ein Script nicht wie erwartet funktioniert, sollten Sie zunächst in der Fehlerkonsole des Browsers schauen, ob in ihrem Script Fehler auftraten und der Browser die Ausführung deshalb gestoppt hat. Die Fehlerkonsole liefert in der Regel die Nummer der Codezeile in Ihrem Script, in der der Fehler aufgetreten ist. Die letztliche Ursache des Fehlers kann, muss aber nicht genau in dieser Zeile liegen! Die Ursache kann genauso eine Anweisung in einer anderen Zeile im Script sein, die vorher ausgeführt wurde, sodass die Voraussetzungen für die spätere Anweisung nicht gegeben sind.
Kontrollausgaben über die alert-Methode
Um Fehlern auf die Spur zu kommen, gehen Sie Ihr JavaScript-Programm Schritt für Schritt durch und notieren nach jeder relevanten Anweisung eine Kontrollausgabe. Dies geht am einfachsten mit der browserübergreifenden Methode window.alert, die ein Meldungsfenster erzeugt. Ein Beispiel:
var element = document.getElementById("navigation");
window.alert("Navigationselement: " + element);
var textknoten = document.createTextNode("Hallo!");
window.alert("Neuer Textknoten: " + textknoten);
element.appendChild(textknoten);
window.alert("Textknoten wurde angehängt.");
Wenn ein Fehler in Ihrem Script auftritt, dann bricht der Browser die Script-Ausführung ab, sodass die darauffolgende Kontrollausgabe nicht mehr ausgeführt wird. Somit können Sie einerseits den Fehler lokalisieren und andererseits gibt Ihnen die letzte Kontrollausgabe vor dem Abbruch eventuell Hinweise auf die Fehlerursache.
Um Fehler auf diese Weise eingrenzen zu können, sollten Sie die Anweisungen zwischen den Kontrollausgaben möglichst einfach halten - zumindest solange Ihr Script noch in der Entwicklungsphase ist. Die folgende Anweisung ist zusammengesetzt und kann an gleich mehreren Stellen zu einem Programmabbruch führen:
document.getElementsByTagName("h1")[0].style.color = "red";
Wenn in dieser Zeile ein JavaScript-Fehler auftritt, dann sollten Sie die Anweisung in ihre Teile aufspalten und Kontrollausgaben einfügen:
window.alert("Suche alle Überschriften im Dokument…");
var überschriftenListe = document.getElementsByTagName("h1");
window.alert("Anzahl der gefundenen h1-Überschriften: " + überschriftenListe.length);
var ersteÜberschrift = überschriftenListe[0];
window.alert("Erste h1-Überschrift: " + ersteÜberschrift);
window.alert("Setze Farbe der Überschrift…");
ersteÜberschrift.style.color = "red";
window.alert("Farbe gesetzt.");
Dieses Beispiel ist übertrieben, soll aber die Möglichkeiten von Kontrollausgaben veranschaulichen. Der Vorteil von window.alert ist, dass der Browser die Ausführung des Scriptes solange anhält, wie das Meldungsfenster geöffnet ist. Auf die Weise können Sie einem Script, das sonst ganz schnell ausgeführt wird, bei der Arbeit zuschauen und Fehler erkennen.
Der Nachteil von Kontrollausgaben mit window.alert ist, dass es JavaScript-Objekte in Strings umwandeln muss, um sie auszugeben. (Intern wird die Objektmethode toString aufgerufen.) Der String, der dabei herauskommt, gibt Ihnen nicht immer Aufschluss darüber, ob es sich um das erwartete Objekt handelt. Nur in einigen Browsern ist nachvollziehbar, um was für ein Objekt es sich handelt. Bei komplexen Objekten wie Arrays oder DOM-Knoten ist dies aber gewöhnungsbedürftig - mit der Zeit lernen Sie, wie sie solche Knoten am besten in Kontrollausgaben ansprechen.
Ablaufprotokolle mit Konsolen-Ausgaben (console-Objekt)
Vielseitiger als Ausgaben mittels window.alert ist die Nutzung der Schnittstelle zur JavaScript-Konsole des Browsers. Diese wurde von Firebug für den Firefox erfunden, wurde aber mittlerweile vom Internet Explorer, Safari und Chrome für ihre Fehlerkonsolen zumndest rudimentär übernommen: Dokumentation der Konsole-API von Firebug.
Das globale Objekt window.console bietet verschiedene Methoden an, mit denen Sie Statusmeldungen in die browsereigene Konsole schreiben können. In der Konsole haben Sie dann ein Log aller Meldungen Ihres Scriptes - ebenso wie etwaige Fehlermeldungen.
Das obige Beispiel könnte für Firebug mithilfe der Methode console.debug folgendermaßen umgesetzt werden:
var überschriftenListe = document.getElementsByTagName("h1");
console.debug("Gefundene h1-Überschriften:", überschriftenListe);
var ersteÜberschrift = überschriftenListe[0];
console.debug("Erste h1-Überschrift:", ersteÜberschrift);
console.debug("Setze nun die Farbe der Überschrift…");
ersteÜberschrift.style.color = "red";
console.debug("Farbe gesetzt. Zur Kontrolle:", ersteÜberschrift.style.color);
Ein Vorteil dieser Konsolenausgabe liegt darin, dass Firebug auch komplexe Objekte sinnfällig darstellt und so detaillierte Einblicke in die verwendeten Objekte und Werte erlaubt. Die Ausgaben in der Konsole sind interaktiv, d.h. sie können ein dort ausgegebenes Objekt anklicken und sich dessen Eigenschaften auflisten lassen.
Das Objekt console bietet viele weitere Methoden, um Meldungen in die Konsole zu schreiben. Diese können Sie der besagten Dokumentation entnehmen.
Für den Anfang sollten Ihnen aber die Methoden console.debug und console.log ausreichen.
Auf diese Weise können Sie akribische Ablaufprotokolle Ihrer Scripte anlegen und haben die Objekte, mit denen Sie arbeiten, direkt im Blick. Dies macht Firebug zu einem unverzichtbaren Werkzeug. Mittlerweile bieten auch Entwicklerwerkzeuge für andere Browser ein console-Objekt mit den besagten Methoden an. Damit entsteht ein Quasi-Standard, mit dem hoffentlich irgendwann eine browserübergreifende JavaScript-Fehlersuche möglich sein wird.
Beachten Sie jedoch, dass Sie diese Methodenaufrufe nur während der Entwicklung ihrer Scripte nutzen können und am Ende wieder entfernen sollten - denn bei Ihren Webseiten-Besuchern wird das console-Objekt möglicherweise nicht zur Verfügung stehen. Ein Aufruf würde daher einen Fehler erzeugen und das Script abbrechen.
DOM-Inspektoren
Beim Einlesen eines HTML-Dokuments erzeugt der Browser aus dem HTML-Code eine Baumstruktur aus Elementen - diese Vorgang nennt sich Parsing. Die auf HTML aufbauenden Webtechniken CSS und JavaScript operieren auf dieser Grundlage. Den JavaScript-Zugriff auf diese interne Baumstruktur regelt das Document Object Model (DOM).
Zum Auslesen und Verändern des Dokuments bewegt sich ein Script im DOM-Baum. Um den Elementbaum des aktuellen Dokuments zu veranschaulichen, bieten verschiedene Browser sogenannte DOM-Inspektoren an. Diese bilden die Knotenstruktur ab, die sie aus dem Dokument generiert haben, und erlauben eine Navigation darin. Sie können in der Baumdarstellung einen Elementknoten anklicken, um die Lage im Dokument, seine JavaScript-Eigenschaften und -Methoden, die wirkenden CSS-Formatierungen sowie die Dimensionen zu sehen.
Eine Möglichkeit, Informationen zu einem gewissen Element abzurufen, nennt sich Element untersuchen oder ähnlich. Dabei können Sie einen beliebigen Bereich im Dokument anklicken und im DOM-Inspektor wird automatisch das zugehörige Element fokussiert.
Nehmen wir folgendes Beispieldokument und schauen uns an, wie die verschiedenen DOM-Inspektoren den Elementbaum wiedergeben:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document Object Model</title>
</head>
<body>
<h1>Document Object Model</h1>
<p>(aus: <a href="http://de.wikipedia.org/wiki/Document_Object_Model">Wikipedia,
der freien Enzyklopädie</a>.)</p>
<blockquote cite="http://de.wikipedia.org/wiki/Document_Object_Model">
<p>Das Document Object Model (DOM) ist eine Programmierschnittstelle (API) für den Zugriff
auf HTML- oder XML-Dokumente. Sie wird vom World Wide Web Consortium definiert.
<p>…</p>
</blockquote>
</body>
</html>
DOM-Inspektor von Firebug
Zum DOM-Inspektor von Firebug gelangen Sie, indem Sie die Firebug-Leiste am unteren Fensterrand durch einen Klick auf das Käfer-Symbol aufklappen. Anschließend wählen Sie den Tab HTML. Auf der linken Seite findet sich der interaktive Elementbaum. Sie können die Verschachtelungen über die Plus-Symbole aufklappen, um die Kindelement eines Elements zu sehen. Um nähere Informationen zu einem Element zu bekommen, klicken Sie auf die blauen Elementnamen. In folgendem Screenshot wurde das h1-Element im Beispieldokument angeklickt:
In der rechten Spalte finden Sie die drei Tabs Styles, Layout und DOM. Die ersten beiden sind in erster Linie bei der CSS-Entwicklung interessant, der dritte Tab insbesondere beim Schreiben von JavaScript. Darin sind alle Eigenschaften und Methoden des ausgewählten Elementobjekten aufgelistet. Viele dieser Eigenschaftswerte (z.B. parentNode) sind anklickbar und führen zur Ansicht des entsprechenden Knoten bzw. JavaScript-Objekts.
Um ein Element schnell zu finden, können Sie oben links in der Firebug-Leiste auf Untersuchen klicken. Nun können Sie im Dokument ein Element auswählen. Wenn Sie mit dem Mauszeiger durch das Dokument gehen, wird das Element, auf deren Fläche sich der Mauszeiger befindet, mit einem blauen Rahmen hervorgehoben. Außerdem wird das Element automatisch im DOM-Inspektor fokussiert. Klicken Sie ein Element an, um den Auswahl-Modus zu verlassen.
Alternativ zu dieser Vorgehensweise über die Schaltfläche Untersuchen können Sie ein Element im Dokument mit der rechten Maustaste anklicken und im Kontextmenü Element untersuchen wählen. Dies hat denselben Effekt.
DOM-Inspektor von Opera Dragonfly
Den DOM-Inspektor von Opera Dragonfly erreichen Sie über das Menü Extras → Weiteres → Opera Dragonfly. Den DOM-Baum finden Sie im Tab DOM. Mittels Schaltflächen können Sie zwischen verschiedene Darstellungen wechseln und manche Knotentypen ausblenden. Im rechten Bereich können Sie über drei Tabs Styles, Properties und Layout auf die Elementeigenschaften zugreifen. Diese entsprechen funktional den Tabs Styles, DOM und Layout in Firebug.
Wie auch die anderen vorgestellten DOM-Inspektoren bietet Opera an, ein Element durch Klicken im Dokument auszuwählen. Auf der entsprechenden Schalftläche ist ein Cursor abgebildet.
…
Safari und Chrome Web Inspector
…
Debugger
Mithilfe von Kontrollausgaben können Sie den Ablauf eines Scriptes nachvollziehen und Variablen ausgeben, um deren Werte zu prüfen. Ein vielseitigeres und mächtigeres Werkzeug sind Debugger. Damit können Sie komfortabler die Funktionsweise eines Scriptes untersuchen, denn Sie müssen nicht nach jeder Anweisung eine Kontrollausgabe einfügen. Ein JavaScript-Debugger bietet im Allgemeinen folgende Möglichkeiten:
Sie können im Code sogenannte Haltepunkte (englisch Breakpoints) setzen. Die Ausführung des JavaScripts wird an dieser Stelle unterbrochen und der Browser öffnet den Debugger. Ausgehend von dieser Code-Zeile können Sie die folgenden Anweisungen nun Schritt für Schritt ausführen, Anweisungen überspringen und aus aufgerufenen Funktionen herausspringen. Bei dieser schrittweisen Ausführung können Sie überprüfen, welche Werte bestimmte Objekte und Variablen an dieser Stelle im Script haben. Eine Weiterentwicklung dieser Überwachung von Variablenwerten stellen sogenannte Watch-Expressions (englisch für Überwachungs-Ausdrücke) dar.
…
Wenn Sie viele Funktionen definieren, die sich gegenseitig aufrufen, hilft Ihnen ein Debugger, die Übersicht über das Aufrufen und Abarbeiten von Funktionen zu behalten. In der Einzelschritt-Ausführung haben Sie den sogenannten Call Stack (englisch für Aufruf-Stapel) im Blick. Das ist die Verschachtelung der Funktionen, die gerade abgearbeitet werden. Wenn beispeilsweise die Funktion a die Funktion b aufruft und diese wiederum die Funktion c, so ist der Stapel a > b > c. Die Funktion c, die gerade ausgeführt wird, liegt sozusagen oben auf dem Stapel. Nach dessen Ausführung wird c vom Stapel genommen und in die Funktion b zurückgekehrt - und so weiter.
…
Debugging mit Firebug
Debugging mit den Internet Explorer Entwicklertools
Debugging mit Microsoft Visual Web Developer Express
Debugging von Opera Dragonfly
Debugging mit Safari und Chrome Web Inspector
