[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 38713
  • Last Modified:

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.
0
inq123
Asked:
inq123
2 Solutions
 
stefanaichholzerCommented:
inq123,

Try writing to the status bar.

Let me know how it goes...

;)
0
 
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.
0
 
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.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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>
0
 
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).
0
 
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>
0
 
inq123Author Commented:
Very nice!  Thanks!  Now, if only the left frame scrolls with the output, :) it'd be the perfect JS debugging system.
0
 
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>
0
 
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.
0
 
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>
0
 
inq123Author Commented:
Hi, dakyd, thanks a lot for your excellent answers!
0
 
carachoCommented:
You can use FireBug (specially FireBug-Lite)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now