Come eseguire il debug di Javascript con IE 8

Come possiamo eseguire il debug di JavaScript con IE 8?

Il JavaScript che sta eseguendo con Visual Studio non funziona dopo un aggiornamento a IE 8.

Oggi ho scoperto che ora possiamo eseguire il debug di Javascript con i plug-in della barra degli strumenti degli sviluppatori integrati in IE 8.

  • Fai clic su ▼ Strumenti nella barra degli strumenti, a destra delle tabs.
  • Seleziona Strumenti per sviluppatori . Il dialogo Strumenti per sviluppatori dovrebbe aprirsi.
  • Fare clic sulla scheda Script nel dialogo.
  • Fai clic sul pulsante Avvia debug .

Puoi usare watch, breakpoint, vedere lo stack di chiamate ecc., In modo simile ai debugger nei browser professionali.

Puoi anche usare il debugger; istruzioni debugger; nel codice JavaScript l’impostazione di un punto di interruzione.

È ansible ottenere ulteriori informazioni sul debug della barra degli strumenti di sviluppo di IE8 in Debug di JScript o Debugging Script con gli Strumenti per sviluppatori .

Ciò non ti aiuterà a passare attraverso il codice o ad infrangere gli errori, ma è un modo utile per ottenere la stessa console di debug per il tuo progetto su tutti i browser.

 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]) + '
'; } logEntry.innerHTML += '
'; 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' });

Questo è messo insieme abbastanza frettolosamente ed è un po 'sciatto, ma è comunque utile e può essere facilmente migliorato!

Speravo di aggiungere questo come commento alla risposta di Marcus Westin, ma non riesco a trovare un link – forse ho bisogno di più reputazione?


Comunque, grazie, ho trovato questo snippet di codice utile per il debugging veloce in IE. Ho apportato alcune modifiche veloci per risolvere un problema che ha impedito di funzionare per me, anche per scorrere verso il basso automaticamente e utilizzare il posizionamento fisso in modo che appaia nella finestra. Ecco la mia versione nel caso qualcuno la trovi utile:

 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]) + '
'; } logEntry.innerHTML += '
'; myLog._div.appendChild(logEntry); // Scroll automatically to the bottom myLog._div.scrollTop = myLog._div.scrollHeight; }