How to print log messages to Firefox JavaScript console in my javascript?

Basically the question is as the title indicates - I tried to find a way to print log message into firefox's JavaScript console but failed.  There's a way that probably works for Mozilla using the Components class, but it fails in firefox.  It would be important for my debugging (alert or document.write won't cut it).

Thanks.
LVL 8
inq123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

stefanaichholzerCommented:
inq123,

Try writing to the status bar.

Let me know how it goes...

;)
inq123Author Commented:
Hi, that works nicely when I minimize the size of my message.  Thanks!  But it's not the ideal solution as it overwrites and can't allow too long a message.  I still hope for a solution that would let me write long (just in case), non-overwriting messages to an easy-to-access place, most likely the javascript console.

I'll leave this question open for a few days.  I'll up the points and split points for you though, even if a better answer arrives.
inq123Author Commented:
After further testing, this solution actually won't work right for my test because it overwrites previous messages.  But still, thanks for the suggestion & as I said, I'll reserve points for you and wait for better solutions.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

dakydCommented:
In order to modify the javascript console, you'd have to sort through & re-write the underlying Java.  Instead, how about writing to a <div>?  I sometimes set up dummy <div>'s and write to the innerHTML as a means of debugging, it gives you unlimited room to output to.  Here's a sample script - someFunction() generates 5 random numbers from 0 to 10.  I don't actually have errors, but the idea is the same - if you want to create an error message, just output to it to the <div>. Hope that helps.

<html>
<head>
<style type="text/css">
#dbg {
  border: 1px solid red;
}
</style>
<script type="text/javascript">
function writeError(str, append)
{
  var dbgObj = document.getElementById("dbg");
  dbgObj.innerHTML = append? (dbgObj.innerHTML + str): str;
}

function someFunction()
{
  writeError("someFunction() called on load<br />", true);
  for (var i = 0; i < 5; i ++)
  {
    var temp = Math.round(Math.random() * 10);
    writeError("produced " + temp + " ... this number is " + ((temp % 2 == 0)? "even": "odd") + "<br

/>", true);
  }
  writeError("someFunction() finished<br />", true);
}


</script>
</head>

<body onload="someFunction();">
<div id="dbg"></div>

<input type="button" value="Call someFunction() again" onclick="someFunction();" />
</body>
</html>
inq123Author Commented:
That's a nice idea and it works well.  Thanks!

Just to stay lazy, I wonder if you could give me sample code for a framed version (that is, right frame is the file I'm working on, while left frame is the error/log message target frame, which also contains the div).  This way I'd be able to watch output while interacting with the page I'm working on.  It's even better than outputing to javascript console.

(points just upped).
dakydCommented:
That can be done, but the only catch is you'll have to add one line of script to every page you work with.  It's the writeError = parent.writeError line, it makes sure that you can call writeError() from the page you're working with.  For example, here's a sample that will hold the frame & the log/output && a sample page to work with.  Hope it helps.

debug.html
======================================
<html>
<head>
<style type="text/css">
#dbg {
  border: 1px solid red;
}

#dbg, iframe {
  float: left;
  width: 49.5%;
  height: 100%;
  overflow: -moz-scrollbars-vertical;
  overflow-y: auto;
}
</style>
<script type="text/javascript">
function writeError(str, append)
{
  var dbgObj = document.getElementById("dbg");
  dbgObj.innerHTML = append? (dbgObj.innerHTML + str): str;
}
</script>
</head>

<body>
<div id="dbg"></div>

<iframe src="fileWorkingWith.html"></iframe>
</body>
</html>


fileWorkingWith.html:
==========================================
<html>
<head>
<script type="text/javascript">
writeError = parent.writeError;

function someFunction()
{
  writeError("someFunction() called on load<br />", true);
  for (var i = 0; i < 5; i ++)
  {
    var temp = Math.round(Math.random() * 10);
    writeError("produced " + temp + " ... this number is " + ((temp % 2 == 0)? "even": "odd") + "<br />", true);
  }
  writeError("someFunction() finished<br />", true);
}
</script>
</head>

<body>
<input type="button" onclick="someFunction();" value="call someFunction();" />
</body>
</html>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
inq123Author Commented:
Very nice!  Thanks!  Now, if only the left frame scrolls with the output, :) it'd be the perfect JS debugging system.
dakydCommented:
>> if only the left frame scrolls with the output
That's actually just a matter of styling ... change the <style> section to the following.  It will only apply the overflow (and hence the scroll bars) to the div on the left.  Hope that helps.

<style type="text/css">
#dbg {
  border: 1px solid red;
  overflow: -moz-scrollbars-vertical;
  overflow-y: auto;
}

#dbg, iframe {
  float: left;
  width: 49.5%;
  height: 100%;
}
</style>
inq123Author Commented:
Thanks!  But it didn't work for me in either Firefox or IE.  the debug html file now looks like below and it doesn't scroll even if content overflows:

<html>
<head>
<style type="text/css">
#dbg {
  border: 1px solid red;
  overflow: -moz-scrollbars-vertical;
  overflow-y: auto;
}

#dbg, iframe {
  float: left;
  width: 49.5%;
  height: 100%;
}
</style>
<script type="text/javascript">
function writeError(str, append)
{
  var dbgObj = document.getElementById("dbg");
  dbgObj.innerHTML = append? (dbgObj.innerHTML + str): str;
}
</script>
</head>

<body>
<div id="dbg"></div>

<iframe src="fileWorkingWith.html"></iframe>
</body>
</html>

But of course, one way to do it is to do str first, innerHTML later.  Just that the reverse order looks a bit funny.
dakydCommented:
Oh ... you want it to scroll to the bottom.  I misunderstood you, I assumed you just wanted the scroll bars to appear for only the left hand side.  That's actually just a one-liner, you just need to add the last line to the writeError() function (like below).  It'll try to scroll the div to whatever the height of the output is, so it forces the <div> to scroll to the bottom.  Hope that helps.

<script type="text/javascript">
function writeError(str, append)
{
  var dbgObj = document.getElementById("dbg");
  dbgObj.innerHTML = append? (dbgObj.innerHTML + str): str;
  dbgObj.scrollTop = dbgObj.scrollHeight;
}
</script>
inq123Author Commented:
Hi, dakyd, thanks a lot for your excellent answers!
carachoCommented:
You can use FireBug (specially FireBug-Lite)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.