Comment déboguer Javascript avec IE 8

Question

Comment déboguer JavaScript avec IE 8 ?

Le débogage JavaScript avec Visual Studio ne fonctionne pas après une mise à jour vers IE 8.

Answer 1

J'ai découvert aujourd'hui que nous pouvons maintenant déboguer Javascript avec les plugins de la barre d'outils du développeur intégrés dans IE 8.

• Cliquez sur ▼ Outils dans la barre d'outils, à droite des onglets.
• Sélectionner Outils du développeur . La boîte de dialogue Developer Tools s'ouvre.
• Cliquez sur le bouton script dans la boîte de dialogue.
• Cliquez sur le bouton Démarrer le débogage bouton.

Vous pouvez utiliser la surveillance, les points d'arrêt, voir la pile d'appels, etc., de la même manière que les débogueurs des navigateurs professionnels.

Vous pouvez également utiliser la déclaration debugger; dans votre code JavaScript pour définir un point d'arrêt.

Answer 2

Vous pouvez obtenir plus d'informations sur le débogage de la barre d'outils du développeur d'IE8 à l'adresse suivante Débogage de JScript o Débogage de script avec les outils de développement .

Answer 3

Cela ne vous aidera pas à avancer dans le code ou à casser les erreurs, mais c'est un moyen utile d'obtenir la même console de débogage pour votre projet sur tous les navigateurs.

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

Ce document a été élaboré à la hâte et est un peu bâclé, mais il est néanmoins utile et peut être amélioré facilement !

Answer 4

Peut-être que cela aidera les autres développeurs. Autre que le débogueur intégré d'IE9, Débogueur javascript Splinetech vaut la peine d'être examinée. Il n'est pas très connu, mais c'est le seul débogueur que j'utilise pour déboguer le javascript dans IE.

Note : Je n'en suis pas le développeur. Et il n'est pas gratuit. Je crois qu'il coûte 90 $. Je ne peux que constater par moi-même qu'il a valu chaque centime pour moi.

Answer 5

J'espérais ajouter ce commentaire à la réponse de Marcus Westin, mais je ne trouve pas de lien - peut-être ai-je besoin d'une plus grande réputation ?

---

Quoi qu'il en soit, merci, j'ai trouvé cet extrait de code utile pour un débogage rapide dans IE. J'ai apporté quelques modifications rapides pour résoudre un problème qui m'a empêché de le faire fonctionner, ainsi que pour faire défiler la page vers le bas automatiquement et utiliser un positionnement fixe pour qu'elle apparaisse dans la fenêtre de visualisation. Voici ma version au cas où quelqu'un la trouverait 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]) + '<br />';
    }

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

    myLog._div.appendChild(logEntry);

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

}