How to 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

User · Answer

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;

}

User · Answer

I discovered today that we can now debug Javascript With the developer tool bar plugins integreted in IE 8    Click   Tools on the toolbar  to the right of the tabs  Select Developer Tools  The Developer Tools dialogue should open  Click the Script tab in the dialogue  Click the Start Debugging button    You can use watch  breakpoint  see the call stack etc  similarly to debuggers in professional browsers   You can also use the statement debugger  in your JavaScript code the set a breakpoint

User · Answer

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  lt  arguments length  i              logEntry innerHTML    myLog toJson arguments i       lt br   gt              logEntry innerHTML      lt br   gt         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  lt  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

User · Answer

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

[javascript] How to debug Javascript with IE 8

Examples related to javascript

Examples related to internet-explorer-8

Examples related to ie-developer-tools