If you’re tired of digging through the Firebug scripts tab to find and insert breakpoints, I was told today about a little-known trick in Firebug that allows you to add breakpoints directly in the source JS file itself.
By issuing the ‘debugger’ statement anywhere in your code, Firebug will halt execution of the script at that location, popping up it’s debugger and highlighting the line where it was used. Example:
<body>
Debugging:
<script type="text/javascript">
for (var i=0; i<100; i++) {
if (i === 50) {
debugger;
}
document.write(i+"<br>");
}
</script>
Page end!
</body>
Unfortunately, this feature seems to be specific to Firebug only, although the Chrome Javascript Debugger (CTRL + SHIFT + L) allows you to use the “break” command with an optional conditional. There does not seem to be any similar functionality in IE8, Opera, and Safari, although I would be glad to hear if it did.