De laatste paar dagen ben ik nogal intensief bezig geweest met een Javascript project. Ik had voor de gelegenheid nog snel even het boek DOMScripting van Jeremy Keith gelezen om toch stevig in mijn schoenen te staan.

Dat er verschillen bestaan tussen de verschillende browsers is voor iedereen allang duidelijk. Bij ontwikkeling met CSS vind ik dat net een uitdaging om een website perfect functioneel te krijgen in de meest courante browsers, nl. Firefox, Internet Explorer en Safari. Maar al gauw leek Javascript toch een grotere inspanning te vergen dan dat.

Om dus je scripts perfect te krijgen in elk van die browsers is het belangrijk dat je kan rekenen op de juiste tools. En waar ik het meeste hulp aan had was de ingebouwde foutconsole van Firefox. Hiermee heb ik makkelijk 90% van de fouten kunnen traceren en snel oplossen, vooral omdat er duidelijk wordt aangegeven op welke regel en in welk bestand de fout zit.

Internet Explorer geeft slechts een zielig dialoogvenster weer met daarin de melding dat er een fout is opgetreden. Wanneer je meer details ervan wil bekijken wordt je echter niet veel wijzer, en dit zowel in IE6 als IE7. Gelukkig kan je aan de hand van de Microsoft Script Debugger toch meer inzicht verkrijgen bij de foutmeldingen in de scripts en beschikken over betere debugging info. Die optie leek voor mij wel te volstaan, mede omdat ik de meeste fouten dus al kon opsporen via de Firefox foutconsole.

Safari heeft me op een bepaald moment ook wel parten gespeeld. Ook hier zit echter een Javascript debugger ingebouwd, alleen zit die nogal verscholen voor de gewone gebruiker. Via de terminal kan je echter een extra menu activeren in Safari. Open hiervoor een nieuwe terminal sessie en voer dit in:

  defaults write com.apple.Safari IncludeDebugMenu 1

Als je Safari dan opnieuw opstart, dan kan je via het debug menu de optie Log JavaScript Exceptions aanvinken. De foutmeldingen worden dan in de Javascript console getoond.

Je kan dan bijvoorbeeld volgende functie toevoegen aan je javascript:

function logMsg(msg) {
  if(window.console) {
    window.console.log(msg);
  }
}

Zo kan je op een makkelijke manier en zonder irritante alert boxes in Safari informatie opvragen , om sneller en efficiënter te debuggen.

Ik heb hiermee alleszins veel opgestoken over Javascript en het smaakt zeker naar meer. Ik voel dat hier wel een nieuwe passie in de maak is. Het worden nog interessante tijden.

Gerelateerde artikels

• Firebug, een onmisbare extensie voor Firefox
• Verschillende versies van Internet Explorer naast elkaar draaien
• Handige Firefox extensies voor webontwikkelaars
• Adobe Apollo en Flash Blaze
• Optimaal structureren van CSS files