JavaScript Logging

by David F. Miller

43 Reader Comments

Back to the Article
  1. At about line 43 of the index.html example, the line needs to be changed to:

    <dd class=“info”>info</dd>

    The line needs the onclick to show the Info blocks. 

    Thanks for a great little tool.

    Copy & paste the code below to embed this comment.
  2. I believe it would be beneficial to add onkeypress=”?showInfo();” to those links, for keyboard users.

    Copy & paste the code below to embed this comment.
  3. IE has a JavaScript debugger too. Visual Interdev & VS.NET can be used for interactive JavaScript debugging in IE at about the same level of functionality as Venkman. There are a few options you have to enable in IE to turn on script debugging.

    Logging is powerful for tracking down problems you didn’t expect to happen, assuming logging is occuring in the right places and there’s a way to get at the log output. A nice feature for fvlogger would be “crash report” submission UI so users could report failures back to the site maintainer.

    When you know a problem exists interactive debuggers are often more efficient than trial-and-error logging, and are worth the effort spent learning thier quirks. Plus, you get to skip the frustrating “trial-and-error” step.

    Copy & paste the code below to embed this comment.
  4. This is very nice. 

    A couple of features I would add:

    1) Date/Timestamps prefixing each log, – auto generated.

    2) A global switch to turn logging on and off.

    All up, – very sweet!  Nice article.

    - James

    Copy & paste the code below to embed this comment.
  5. This logging script looks very nice and I’m certainly going to give it a try. If it’s of any use to anyone, there is another logging mechanism I have been using for several years. This is IE only, and only of use for debugging scripts running on your local box. Despite these limitations, if that’s the setup you are debugging, it is quite powerful. This is an activex dll, originally made available by Microsoft in the IIS 4 resource kit, called IISSamples.Tracer. It is a very light c++ wrapper round the printDebugString windows api call. All messages logged via this utility can be viewed in the (free) debugviewer utility from sysinternals. The main advantage of this mechanism is that the logging is very fast, particularly useful when debugging mousemovements etc where the overhead of javascript logging methods may interfere with the script you’re trying to debug. It also prints accurate timings with the messages. I don’t beleive this is available on the web anymore, and I have no means of posting it but if you want a copy, email me and I’ll send it to you.

    Copy & paste the code below to embed this comment.
  6. James,

    Thanks for your comments; you can turn logging on/off by setting the value of FVL_LOG_ON to false in logger.js. As for the timestamping of logging statements, I’ll definitely consider it for a future version, although it’s relatively simple to implement if you’re familiar with JavaScript. If you need a hand, let me know. Cheers!

    Dave

    Copy & paste the code below to embed this comment.
  7. Someone was wondering if this is correct:
    [removed]
    They were correct, script is not an empty element in the (X)HTML DTD, so must be written as:
    [removed][removed]

    Copy & paste the code below to embed this comment.
  8. Great article.

    I think that you could also use this technique to write out javascript errors to a logfile on the server. This would be a handy way to catch user-generated js errors in production. Instead of writing the errors to a document object, write them to a variable, and then pass that variable using XMLHttpRequest to a server-side script which then captures the message to a file. Only problem I can think of is that this script is then exposed to the public, and someone mischievous could write tons of messages to your server. But perhaps this would be something you would deploy only on a case-by-case basis when you want to track down elusive, idiosyncratic bugs.

    Copy & paste the code below to embed this comment.
  9. I enjoyed looking at your take on the javascript logger.  If you are looking for something that acts more like Log4J, I wrote a quick logging class for some of my own projects called log4js – “http://log4js.sf.net”:http://log4js.sf.net .  It is a little more robust in that it allows for multiple loggers per page (each is an object), and multiple targets, such as alerts, a popup dialog, or the safari javascript console…

    Then again, it is written by a java programmer returning to javascript after a long hiatus.

    Copy & paste the code below to embed this comment.
  10. Nice stuff. I have already started using it and find it quite useful.

    ALA, Keep such article coming. ALA has saved me so much time with such high class material.

    Thanks for the Good stuff,
    Venkat.

    Copy & paste the code below to embed this comment.
  11. I very much enjoyed this article, but I found the statement “The concept of logging was popularized by Apache’s Log4J package for Java” curious. I have heard of log4j but I was not aware that it has popularized the field of logging – is that to suggest that prior to log4j, logging was uncommonly used? Perhaps it depends what field you are in, but in UNIX we’ve enjoyed the syslog daemon (syslogd) for quite some time, and logging is standard practise in most applications.

    Copy & paste the code below to embed this comment.
  12. Noticed a couple bumps:

    1. Putting very simple function names like “show” and “hide” in the top-level namespace is bound to cause problems. I’m working on a web app that already has these functions defined, and adding the logger will override them. I had to change all the fvlogger functions to have a “fvl_” prefix to them.

    2. The logger won’t catch errors that occur as the page is parsed—for example, if you have a javascript in the BODY that just runs immediately (before the page finishes loading), fvlogger won’t catch it.

    What’s worse, if the offending code is placed AFTER the logger.js include, but BEFORE the fvlogger DIV, it becomes invisible, since the window.onerror is redirected: No error message shows up in the javascript console. This seems like a big flaw to me.

    Copy & paste the code below to embed this comment.
  13. I know Venkman has a cool Profile feature which I’ve used manually and which allows you to log data about which javascipt functions are being called and the min/max/avg process times per function.  Is there any way to automate this in Venkman ?

    Is anyone aware of another tool that would do this ? 

    Thx !

    Copy & paste the code below to embed this comment.
  14. The Dashboard widget API already has a great console logger built in. In fact, all alert()s go straight to the console. This works well: if you forget to remove your logging code before release users won’t be pestered by pop-up windows or other unsightly logging messages.

    Copy & paste the code below to embed this comment.
  15. We are stuck with a Javascript call creating a div and a class name. In FF it works great, but in IE it is not passing any of the class elements and as a result the effect we want, rows and columns, are lost and just one column is left.

    here is the code we are using:

    // This is the div that contains each image and it’s browse box.
    var newElement = document.createElement(‘div’);
    newElement.setAttribute(‘id’, ‘previewDiv’);
    newElement.setAttribute(‘class’, ‘uploadBox’);


    // This is the image!
    var imgDiv = document.createElement(‘div’);
    imgDiv.setAttribute(‘id’, ‘preview-img’);
    imgDiv.setAttribute(‘class’, ‘previewImgDiv’);

    I have gone through some articles here and tried some other ways of doing this and IE just won’t play nice. Any direction would be appreciated.

    thanks.

    Copy & paste the code below to embed this comment.
  16. I had been itting the problem of how to set the class attribute in Javascript and having IE render it. I found this discussion, which gave me a part of the solution.

    I had been trying to use
    el.classname = ‘someclass’;
    (el = document.getElementByID(‘divname’) was assumed here)
    But that created an attribute of classname – not class – so CSS rendering was not occurring. This discussion indicated that I could use the
    el.setAttribute(‘someclass’,‘divname’);

    I would then appendChild to the divname and – no CSS rendering.
    But the el[removed] = “<h3>somehtml</h3>” always worked.

    So I turned it on itself -  el[removed] = el[removed]
    and it rendered.

    I have been getting back into Javascript to use some Ajax techniques so I feel like I am learning this again – and these problems could be my own lack of understanding.
    It was helpful to have this discussion available – thanks.

    Copy & paste the code below to embed this comment.
  17. http://jstracer.sourceforge.net/

    jsTracer performs similar logging functionality but also allows you to denote or highlight logged messages.  It also provides a stack viewer and won’t cause slow script warnings on complex JavaScript code.

    Copy & paste the code below to embed this comment.
  18. http://www.timdown.co.uk/log4javascript

    log4javascript offers similar ease of logging to fvlogger but with far more flexibility. Logging may be done to a searchable, filterable pop-up/in-page console window and/or back to the server via Ajax. It is closely modelled on log4j and has been rigorously tested on all major browsers.

    Disclaimer: I am the author of log4javascript.

    Copy & paste the code below to embed this comment.
  19. in firefox 2.0, when I include fvlogger, it overrides my console errors, and doesn’t display them in the fvlogger div either, so I can’t see any javascript errors caught by the browser.  To see them I have to comment out the inclusion of the fvlogger script, which breaks all the manual ‘debug’ and ‘info’ entries I’ve made.. darnit!

    Copy & paste the code below to embed this comment.
  20. in firefox 2.0, when I include fvlogger, it overrides my parse errors, but doesn’t display them in the fvlogger div either, so I can’t see any javascript errors caught by the browser anywhere.  To see them I have to comment out the inclusion of the fvlogger script, which breaks all the manual ‘debug’ and ‘info’ entries I’ve made.. darnit!

    Copy & paste the code below to embed this comment.
  21. Hey David, thanks for fvlogger. I was using it to debug some Flash/Javascript integration, then, just for the hell of it, hooked up our Flash tracing to a separate window with fvlogger in it using the Flash ExternalInterface calls. Brilliant.

    We’ve had Flash debuggers inside Flash before… but at runtime they can’t really handle the volume of debug info that can come out. Hell, even the Flash IDE has the poorest output log ever.

    fvlogger was easy to get working.

    Thanks.

    Copy & paste the code below to embed this comment.
  22. Keep the great work going. The tips are really helpful, as are some of the discussions. Learnt a lot. Thank you.

    “tigi bed head”:http://www.salon-collective.co.uk/tigi_bed_head.php
    “tigi bed head dumb blonde”:http://www.salon-collective.co.uk/tigi_bed_head.php?query=dumb+blonde
    “tigi bed head shampoo”:http://www.salon-collective.co.uk/tigi_bed_head.php?query=shampoo
    “tigi bed head hair products”:http://www.salon-collective.co.uk/tigi_bed_head.php
    “tigi bed head control freak”:http://www.salon-collective.co.uk/tigi_bed_head.php?query=control+freak
    “tigi self absorbed”:http://www.salon-collective.co.uk/tigi_bed_head.php?query=self+absorbed

    Copy & paste the code below to embed this comment.
  23. Thanks Tom for the tips and inspiration. I’m beginning to dig fvlogger. Maybe I’ll share my results some time. :)

    Regards,
    Kenneth Lee
    Webmaster of
    “Make money online”:http://mrdefinite.com

    Copy & paste the code below to embed this comment.