Mit dem Erscheinen von Safari 5 ist selbstverständlich auch eine neue Version des Web Inspector enthalten. Er dient zum Analysieren und Debuggen von Webseiten (ähnlich dem Firebug-Plugin für Firefox).

The Web Inspector gives you quick and easy access to the richest set of development tools ever included in a browser. From viewing the structure of a page to debugging JavaScript to optimizing performance, the Web Inspector presents its tools in a clean window designed to make developing web applications more efficient.

Als Flashentwickler ist man es gewohnt, einen Debugger zu haben. Das entsprechende JavaScript-Pendant findet man in Safaris „Web Inspector” – und dieser wurde weiter verbessert in Safari 5. Hier eine kurze Anleitung, wie man mit dem neuen Web Inspector Breakpoints setzen kann und Variablenwerte direkt aus dem Code ausliest.

Debugger aktivieren

Zur Demonstration habe ich eine ganz einfache HTML5-Seite mit einem JavaScript-Schnippsel erstellt. Es wird eine Variable mit dem Wert 23 initialisiert und diese dann hochgezählt.

PLAIN TEXT
JavaScript:
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title>Web Inspector Demo</title>
  5.     <script type="text/javascript">
  6.     function init() {
  7.         var i = 23;
  8.         i++;
  9.         i++;
  10.     }   
  11.     </script>
  12. </head>
  13.  
  14. <body onload="init()">
  15. </body>

Um den Web Inspector zu öffnen, klickt man mit der rechten Maustaste auf die HTML-Seite und wählt „Elementinformation”. Falls diese Option nicht vorhanden sein sollte, muss man zuerst die Entwicklerfunktionen freischalten unter „Einstellungen… > Erweitert”.

Im Menü „Skripts” muss man das „Debugging aktivieren” und danach die Seite neu laden.

Breakpoint setzen

Jetzt kann man durch einen Klick auf eine Zeilennummer einen Breakpoint setzen. An dieser Stelle wird der Code dann unterbrochen.

Variablenwerte auslesen

Lädt man die Seite erneut, wird beim Erreichen des Breakpoints der Web Inspector sichtbar und die Ausführung des Codes gestoppt. Geht man mit der Maus über eine Variable, erscheint deren aktueller Wert als Tooltip. Sehr Praktisch :-)

Rechts oben findet man die gewohnt Bedienelemente eines Debuggers, um den Code schrittweise oder in größeren Schritten weiter auszuführen.