web-dev-qa-db-fra.com

Comment déboguer Javascript avec IE 8

Comment pouvons-nous déboguer JavaScript avec IE 8?

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

javascriptinternet-explorer-8ie-developer-tools
63
Cédric Boivin

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 ▼ Tools dans la barre d'outils, à droite des onglets.
  • Sélectionnez Developer Tools. La boîte de dialogue Outils de développement devrait s'ouvrir.
  • Cliquez sur l'onglet Script dans la boîte de dialogue.
  • Cliquez sur le bouton Démarrer le débogage.

Vous pouvez utiliser watch, breakpoint, voir la pile d'appels, etc., de la même manière que les débogueurs dans les navigateurs professionnels.

Vous pouvez également utiliser l'instruction debugger; dans votre code JavaScript, définissez un point d'arrêt.

81
Cédric Boivin

Vous pouvez obtenir plus d'informations sur le débogage de la barre d'outils du développeur IE8 sur Debugging JScript ou Debugging Script with the Developer Tools .

8
Lil'Monkey

Cela ne vous aidera pas à parcourir 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' });

Ceci est assemblé assez rapidement et est un peu bâclé, mais il est néanmoins utile et peut être amélioré facilement!

6
Marcus Westin

J'espérais ajouter ceci en tant que commentaire à la réponse de Marcus Westin, mais je ne trouve pas de lien - peut-être ai-je besoin de plus de 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 fait quelques ajustements rapides pour résoudre un problème qui l'empêchait de fonctionner pour moi, aussi pour faire défiler automatiquement et utiliser un positionnement fixe pour qu'il apparaisse dans la fenêtre. 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;

}
3
poshaughnessy