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 equi

Answer 1

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 #ffffd;
}
#_debug_console .error{
  color: #FF0000;
}
#_debug_console .warn{
  color: #DDDD00;
}

Answer 2

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

Answer 3

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

Any of these:

Hit F12 or Ctrl+Shift+I
right-click on any element on the page, and "Inspect Element"
Wrench button -> Tools -> Developer Tools

Then go to Console tab

Answer 5

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 6

You have following options

• Chrome: Press Ctrl+Shift+J (Cmd+Option+J on Mac) and it will give similar functionality. Also consider checking out 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 Press F12. The built-in tools are now quiet good.
• Opera: Press Ctrl+Shift+I (Cmd+Option+I on Mac) to launch Opera Drangonfly which is a fully featured development and debugging tool integrated into the Opera browser
• 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