Wie man JavaScript mit IE 8 debuggiert

Question

Wie können wir JavaScript mit IE 8 debuggen?

Das JavaScript -Debbuging mit Visual Studio funktioniert nach einem Update auf IE 8 nicht.

Answer 1

Ich habe heute entdeckt, dass wir jetzt JavaScript mit den in IE 8 integrierten Entwickler -Tool -Bar -Plugins debuggen können.

• Klicken ▼ Werkzeuge In der Symbolleiste rechts von den Registerkarten.
• Auswählen Entwicklerwerkzeuge. Der Dialog für Entwickler -Tools sollte sich öffnen.
• Drücke den Skript Registerkarte im Dialog.
• Drücke den Beginnen Sie mit Debuggen Taste.

Sie können Watch, Breakpoint, sehen Sie sich den Call Stack usw. an, ähnlich wie bei Debuggern in professionellen Browsern.

Sie können auch die Anweisung verwenden debugger; In Ihrem JavaScript -Code setzt der Haltepunkt.

Answer 2

Weitere Informationen zum IE8 -Entwickler -Symbolleiste -Debugging erhalten Sie unter Debugging Jscript oder Debugging des Skripts mit den Entwickler -Tools.

Answer 3

Dies hilft Ihnen nicht, den Code zu durchlaufen oder Fehler zu brechen, aber es ist eine nützliche Möglichkeit, die gleiche Debug -Konsole für Ihr Projekt für alle Browser zu erhalten.

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

Dies wird ziemlich hastig zusammengestellt und ist ein bisschen schlampig, ist aber dennoch nützlich und kann leicht verbessert werden!

Answer 4

Ich hatte gehofft, dies als Kommentar zu Marcus Westins Antwort hinzuzufügen, aber ich kann keinen Link finden - vielleicht brauche ich mehr Ruf?

---

Wie auch immer, danke, ich fand diesen Code -Snippet nützlich für das schnelle Debuggen in IE. Ich habe einige schnelle Änderungen vorgenommen, um ein Problem zu beheben, das es für mich beendet hat, um auch nach unten zu scrollen und die feste Positionierung zu verwenden, damit es im Ansichtsfenster angezeigt wird. Hier ist meine Version, falls jemand es nützlich findet:

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;

}