Cómo depurar JavaScript con IE 8

Question

¿Cómo podemos depurar JavaScript con IE 8?

El JavaScript Debbuging con Visual Studio no funciona después de una actualización de IE 8.

Answer 1

Descubrí hoy que ahora podemos depurar JavaScript con los complementos de la barra de herramientas de desarrollador integrados en IE 8.

• Hacer clic ▼ Herramientas en la barra de herramientas, a la derecha de las pestañas.
• Seleccione Herramientas de desarrollo. El diálogo de herramientas de desarrollador debe abrir.
• Haga clic en el Guion pestaña en el diálogo.
• Haga clic en el Empiece a depurar botón.

Puede usar Watch, Breakpoint, ver la pila de llamadas, etc., de manera similar a los depuradores en los navegadores profesionales.

También puedes usar la declaración debugger; En su código de JavaScript, establece un punto de interrupción.

Answer 2

Puede obtener más información sobre la depuración de la barra de herramientas de desarrollador de IE8 en Depuración jscript o Script de depuración con las herramientas de desarrollador.

Answer 3

Esto no lo ayudará a pasar el código o romper los errores, pero es una forma útil de obtener la misma consola de depuración para su proyecto en todos los navegadores.

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

Esto se junta bastante apresuradamente y es un poco descuidado, pero es útil, ¡y se puede mejorar fácilmente!

Answer 4

Esperaba agregar esto como un comentario a la respuesta de Marcus Westin, pero no puedo encontrar un enlace, ¿tal vez necesito más reputación?

---

De todos modos, gracias, encontré este fragmento de código útil para una depuración rápida en IE. He hecho algunos ajustes rápidos para solucionar un problema que lo impidió funcionar para mí, también para desplazarse hacia abajo automáticamente y usar el posicionamiento fijo para que aparezca en la ventana gráfica. Aquí está mi versión en caso de que alguien lo encuentre útil:

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;

}