asked on

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.

SOLUTION

stefanaichholzer

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

inq123

ASKER

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.

inq123

ASKER

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.

dakyd

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>

inq123

ASKER

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).

ASKER CERTIFIED SOLUTION

dakyd

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

inq123

ASKER

Very nice! Thanks! Now, if only the left frame scrolls with the output, :) it'd be the perfect JS debugging system.

dakyd

>> 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>

inq123

ASKER

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.

dakyd

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>

inq123

ASKER

Hi, dakyd, thanks a lot for your excellent answers!

caracho

You can use FireBug (specially FireBug-Lite)