CODEWITHSUNDEEP
javascriptbrowser
user181548
user181548

Reputation:

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, 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.

Upvotes: 20

Views: 16957

Answers (7)

Michal Sznajder
Michal Sznajder

Reputation: 9406

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

Upvotes: 34

Sumit
Sumit

Reputation: 11

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

Upvotes: 1

Gabriel
Gabriel

Reputation: 18780

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

Upvotes: 0

Pascal
Pascal

Reputation: 16941

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

Upvotes: 0

Artelius
Artelius

Reputation: 49089

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

Upvotes: 0

Dave Markle
Dave Markle

Reputation: 97701

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.

Upvotes: 3

shuckster
shuckster

Reputation: 5427

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.

Upvotes: 0

Related Questions