Как отлаживать Javascript с помощью IE 8 - PullRequest
Новая
       18

Как отлаживать Javascript с помощью IE 8

63 голосов
/ 20 августа 2009

Как мы можем отлаживать JavaScript в IE 8?

Отладка JavaScript в Visual Studio не работает после обновления до IE 8.

Ответы [ 4 ]

81 голосов
/ 20 августа 2009

Сегодня я обнаружил, что теперь мы можем отлаживать Javascript с помощью плагинов панели инструментов разработчика, интегрированных в IE 8.

  • Нажмите ▼ Инструменты на панели инструментов справа от вкладок.
  • Выберите Инструменты разработчика . Диалог инструментов разработчика должен открыться.
  • Перейдите на вкладку Сценарий в диалоговом окне.
  • Нажмите кнопку Начать отладку .

Вы можете использовать наблюдение, точку останова, просмотр стека вызовов и т. Д., Аналогично отладчикам в профессиональных браузерах.

Вы также можете использовать оператор debugger; в своем коде JavaScript для установки точки останова.

8 голосов
/ 20 августа 2009

Более подробную информацию об отладке панели инструментов разработчика IE8 можно получить по адресу Отладка JScript или Сценарий отладки с помощью инструментов разработчика .

6 голосов
/ 20 августа 2009

Это не поможет вам пройти через код или исправить ошибки, но это полезный способ получить одинаковую консоль отладки для вашего проекта во всех браузерах. 

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

Это составлено довольно поспешно и немного небрежно, но, тем не менее, полезно и может быть легко улучшено!

3 голосов
/ 27 сентября 2010

Я надеялся добавить это как комментарий к ответу Маркуса Уэстина, но я не могу найти ссылку - может быть, мне нужно больше репутации?

В любом случае, спасибо, я нашел этот фрагмент кода полезным для быстрой отладки в IE. Я сделал несколько быстрых настроек, чтобы исправить проблему, которая перестала работать на меня, а также автоматически прокрутить вниз и использовать фиксированное позиционирование, чтобы оно появилось в окне просмотра. Вот моя версия на случай, если кто-нибудь найдет ее полезной: 

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;

}
...