jQuery works in Firefox when Firebug is running, does not work when Firebug is NOT running

Question

I have the following Javascript libraries loaded for my page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="./js/jquery.scrollTo-min.js"></script>

I have the div element that I want to place them in:

<div class="content" id="content">
</div>

I have this link:

<a id="changeText" href="rules.html">Click to change</a>

Finally, I have the following jQuery code:

<script>

$(document).ready(function() {
 $("#changeText").click(function(){

  var url = $(this).attr("href");

  $("#content").load(url);

  console.log(url);

  $.scrollTo("0%", 400);
 });
});
</script>

This all works in Safari. The oddest part of the story is that it only works in Firefox when Firebug is on. When Firebug is NOT on, the page seems to be dynamically loaded, but then the page loads rules.html and switches to it, which is not my desired goal.

Also, of course, none of this works in IE8.

What am I doing wrong?

Answer 1

Take out the console.log, it is undefined when firebug is not running.

Answer 2

You'd better wrap all your

console.log(...)

into

if (window.console) {
    console.log(...);
}

Answer 3

Also there is interesting project called fauxconsole: Simulating a Firebug, Safari or Opera debugging console in Microsoft Internet Explorer with Faux Console