How to debug Javascript with IE 8

Question

How can we debug JavaScript with IE 8?

JavaScript-debbuging with Visual Studio does not work after updating IE 8.

Answer 1

I discovered today that we can now debug Javascript. With developer toolbar plugins integrated in IE 8.

• Click ▼ Tools on the toolbar to the right of the tabs.
• Select Developer Tools . The Developer Tools dialog box opens.
• Click the Script tab.
• Click the Start Debugging button.

You can use the clock, breakpoint, see the call stack, etc., similar to debuggers in professional browsers.

You can also use the debugger; statement debugger; in your JavaScript code to set a breakpoint.

Answer 2

You can get more information about debugging the IE8 Developer Toolbar on Debugging JScript or Debugging Script using the developer tools .

Answer 3

This will not help you execute code or break errors, but it is a useful way to get the same debug console for your project in 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 a rather complicated combination and a little messy, but nonetheless useful and can be easily improved!

Answer 4

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

---

Anyway, thanks, I found this piece of code useful for quick debugging in IE. I did some quick tricks to fix the problem that stopped it for me, as well as automatically scroll down and use fixed positioning so that it appears in the viewport. Here is my version in case anyone finds this 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; }