Allgemeine Tipps zum Debuggen von Webseiten bzw. Javascript im Browser

Es gibt für alle gut bekannten Browser integrierte Tools zum Debuggen (Firefox, Chrome, Internet Explorer, Safari, Opera). Manche haben sogar externe Tools, die aber kaum bzw. keine Vorteile bieten.

Aktivieren des Debug Panels

Ein Rechtsklick in das Dokument und ein anschließender Linksklick auf den Eintrag "Element untersuchen" im ausgeklappten Kontextmenü öffnet ein Panel im unteren Bereich des Browsers. Für gewöhnlich findet man unter dem Reiter "Sources" oder "Skripte" die Javascript-Quelldateien.

Minifizierte Quelldateien

Beim Bauen aus den Quellen wird ein Minifizierer benutzt der die Quelldateien für das Debuggen unleserlich macht (Variablen- und Funktionsnamen werden durch Buchstaben ersetzt bzw. Kommentare entfernt). Dieses Vorgehen lässt sich durch das Anpassen der POM-Datei ändern, was hier sehr zu empfehlen ist.

Debugging

Die meisten dieser Debugger haben auch eine integrierte Konsole, mit der man relativ einfach den DOM Tree manipulieren kann.