开发者

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

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, Op开发者_开发问答era 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.


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


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.


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


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.


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


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


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;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜