How debug Javascript with IE 8

Question

How can we debug JavaScript with IE 8 ?

The JavaScript debbuging with Visual Studio doesn't work after an update to IE 8.

Answer 1

I discovered today that we can now debug Javascript With the developer tool bar plugins integreted in IE 8.

• Open developer tools bar
• Click script
• Click start debugging

You can use watch, breakpoint, see call stack etc ...

You can also use debugger; in your javascript the set a break point.

I hope this post will help developers who try to debug JavaScript with IE8.

Answer 2

You can get more information about IE8 Developer Toolbar debugging at Debugging JScript or Debugging Script with the Developer Tools.

Answer 3

This won't help you step through code or break on errors, but it's a useful way to get the same debug console for your project on all browsers.

myLog = function() {
    if (!myLog._div) { myLog.createDiv(); }

    var logEntry = document.createElement('span');
    for (var i=0; i < arguments.length; i++) {
     logEntry.innerHTML += myLog.toJson(arguments[i]) + '<br />';
    }
    logEntry.innerHTML += '<br />';

    myLog._div.appendChild(logEntry);
}
myLog.createDiv = function() {
    myLog._div = document.body.appendChild(document.createElement('div'));
    var props = {
     position:'absolute', top:'10px', right:'10px', background:'#333', border:'5px solid #333', 
     color: 'white', width: '400px', height: '300px', overflow: 'auto', fontFamily: 'courier new',
     fontSize: '11px', whiteSpace: 'nowrap'
    }
    for (var key in props) { myLog._div.style[key] = props[key]; }
}
myLog.toJSON = function(obj) {
    if (typeof window.uneval == 'function') { return uneval(obj); }
    if (typeof obj == 'object') {
     if (!obj) { return 'null'; }
     var list = [];
     if (obj instanceof Array) {
      for (var i=0;i < obj.length;i++) { list.push(this.toJson(obj[i])); }
      return '[' + list.join(',') + ']';
     } else {
      for (var prop in obj) { list.push('"' + prop + '":' + this.toJson(obj[prop])); }
      return '{' + list.join(',') + '}';
     }
    } else if (typeof obj == 'string') {
     return '"' + obj.replace(/(["'])/g, '\\$1') + '"';
    } else {
     return new String(obj);
    }
}

myLog('log statement');
myLog('logging an object', { name: 'Marcus', likes: 'js' });

This is put together pretty hastily and is a bit sloppy, but it's useful nonetheless and can be improved easily!

Answer 4

http://bimbim.in/post/2010/08/19/JavaScript-Vb-Script-debugging-Methods.aspx

Answer 5

I was hoping to add this as a comment to Marcus Westin's reply, but I can't find a link - maybe I need more reputation?

---

Anyway, thanks, I found this code snippet useful for quick debugging in IE. I have made some quick tweaks to fix a problem that stopped it working for me, also to scroll down automatically and use fixed positioning so it will appear in the viewport. Here's my version in case anyone finds it useful:

myLog = function() {

    var _div = null;

    this.toJson = function(obj) {

        if (typeof window.uneval == 'function') { return uneval(obj); }
        if (typeof obj == 'object') {
            if (!obj) { return 'null'; }
            var list = [];
            if (obj instanceof Array) {
                    for (var i=0;i < obj.length;i++) { list.push(this.toJson(obj[i])); }
                    return '[' + list.join(',') + ']';
            } else {
                    for (var prop in obj) { list.push('"' + prop + '":' + this.toJson(obj[prop])); }
                    return '{' + list.join(',') + '}';
            }
        } else if (typeof obj == 'string') {
            return '"' + obj.replace(/(["'])/g, '\\$1') + '"';
        } else {
            return new String(obj);
        }

    };

    this.createDiv = function() {

        myLog._div = document.body.appendChild(document.createElement('div'));

        var props = {
            position:'fixed', top:'10px', right:'10px', background:'#333', border:'5px solid #333', 
            color: 'white', width: '400px', height: '300px', overflow: 'auto', fontFamily: 'courier new',
            fontSize: '11px', whiteSpace: 'nowrap'
        }

        for (var key in props) { myLog._div.style[key] = props[key]; }

    };


    if (!myLog._div) { this.createDiv(); }

    var logEntry = document.createElement('span');

    for (var i=0; i < arguments.length; i++) {
        logEntry.innerHTML += this.toJson(arguments[i]) + '<br />';
    }

    logEntry.innerHTML += '<br />';

    myLog._div.appendChild(logEntry);

    // Scroll automatically to the bottom
    myLog._div.scrollTop = myLog._div.scrollHeight;

}