Equivalent of Firefox's "error console" in other browsers

Question

Is there an equivalent to Firefox's "Error console" in other browsers? I find the error console handy for finding JavaScript errors, but there doesn't seem to be an equivalent simple way to see error messages on other browsers. I'm interested in Internet Explorer, Opera and Google Chrome.

Post script: I'm not looking for an alternative to Firefox's error console, it is fine for me. I don't need FireBug. Also I am aware of the Developer Tools in Google Chrome, but I can't make sense of it. I just want to get the error messages. Is there some way to get sane error messages out of it? I haven't been able to. My default browser is Chrome on Windows and Linux, but if I do something in JavaScript, I end up having to switch to Firefox to get the error messages from the error console.

Answer 1

If you use Firefox's error-console you should consider the Firebug plugin.

There is also Firebug Lite -- a bookmarklet that brings a scaled-down version of Firebug to other browsers.

Answer 2

I use Ctrl+Shift+J in Chrome, and it's got something close in there. IE -- there's the IE Developer Toolbar, and I think IE8 has something like that, but let's face it, if you're using IE for Javascript debugging, you basically hate yourself and have more serious personal issues regarding your self-esteem to deal with.

Answer 3

You have following options

• Chrome: Press Ctrl+Shift+J and it will give similar functionality. Also consider this info on JavaScript debugger in Chrome.
• IE7: Nothing built in. But have a look at IE Developer Toolbar.
• IE8: Just hit F12 and you will get access to some very capable built-in tools. Error console is on Script tab.
• Firefox: Just use FireBug.
• Opera: Look at Tools->Advanced->Error Console. Also read some info from developers of Opera.
• Safari: Enable the Developer Menu from Safari's preferences. It will give access the various tools (Error Console, Web Inspector, JavaScript Profiler, etc). Of course there are also shortcuts, like Cmd + Alt + C for the console.

Answer 4

In Opera it's under Tools->Advanced->Error Console. I find it very handy.

Answer 5

• Safari: Enable the Developer Menu from Safari's preferences, then use that menu to access the various tools (Error Console, Web Inspector, JavaScript Profiler, ...). Of course there are also shortcuts, like CMD + ALT + C for the console. :)

Answer 6

I, too, am looking for a console in IE8. I can see something named "console" if I press F12 but I want something I can update with console.log() in my JS. I don't see a way to write to the console in IE8.

Answer 7

Really appreciate, I am using this in daily work, specially to find JS error or warning in different browsers.

Answer 8

I have taken to the practice of the following before DOM load:

(function(window, undefined){
  var debug_print = (location.search.indexOf('debug') != -1);
  if(window['console'] == undefined){
    var _logs = [];
    var _console = {
      log : function(){
        _logs.push({'msg':Array.prototype.slice.call(arguments, 0), 'type':null});
        this._out();
      },
      warn : function(){
        _logs.push({'msg':Array.prototype.slice.call(arguments, 0), 'type':'warn'});
        this._out();
      },
      error : function(){
        _logs.push({'msg':Array.prototype.slice.call(arguments, 0), 'type':'error'});
        this._out();
      },
      _out : function(){
        if(debug_print && typeof this['write'] == 'function'){
          this.write(_logs.pop());
        }
      },
      _print : function(){return debug_print;},
      _q : function(){return _logs.length;},
      _flush : function(){
        if(typeof this['write'] == 'function'){
          _logs.reverse();
          for(var entry; entry = _logs.pop();){
            this.write(entry);
          }
        }
      }
    }
    window['console'] = _console;
  }
})(window)

and this after domload (place it at the end of the body tag):

(function(window, undefined){
  if(window['console']){
    if(console['_print']){
      var console_pane = document.createElement('div');
      console_pane.id = '_debug_console';
      document.body.appendChild(console_pane);
      console.write = function(log){
        var msg = [new Date(), log.msg].join("$/> ");
        var entry_pane = document.createElement('div');
        if(log.type !== undefined){
          entry_pane.className = log.type;
        };
        console_pane.appendChild(entry_pane);
        entry_pane.innerHTML = msg;
      };
      console._flush();
    };
  }
})(window)

This allows you to do all the basics and turn the actual console display mechanism off and on with the ?debug querystring (it can be placed anywhere in the querystring). To make it look less atrocious you might also want to bundle in the following css:

#_debug_console{
  background : #ffffff;
  margin: 0px;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 20%;
  font-family: Arial;
  font-size: 10px;
  border-top: solid 5px #ddd;
}
#_debug_console .error{
  color: #FF0000;
}
#_debug_console .warn{
  color: #DDDD00;
}