Отладка javascript скриптов

Рано или поздно, вы столкнетесь с проблемой отладки своих javascript скриптов. И если в Mozilla FireFox существует отличный FireBag, то с Internet Explorer все обстоит гораздо хуже. Вы можете сказать: "ну и зачем мне отлаживаться в Internet Explorer?". Отвечу: А как же быть с несовместимостью браузеров!? Когда объектная модель одного и другого очень сильно различаются. Ваш скрипт может замечательно работать в Mozilla FireFox, и безбожно ругаться в Internet Explorer. Вот в этой ситуации Вам и помогут некоторые готовые кусочки скриптов для отладки.

Следующая функция Вас выручит, когда вам нужно получить какой-то объект из DOM-модели, но вы все время получаете ошибку или undefined.

function aaa(s)
{    if (typeof(s)=="object") {
        var o = s;
        s = "";
        for (var i in o)
            s += i+"="+o[i]+"\n";
    alert(s);
    }else alert(typeof(s));
}

Примеры использования:

<script>
    tobj=document.getElementById('id1');
    aaa(tobj);
</script>

Встраивание в обработчик нажатия кнопки мыши:

<div id='id1' onclick="aaa(this)">
    Нажмите СЮДА!
</div>

<script>
function aaa(s)
{    if (typeof(s)=="object") {
        var o = s;
        s = "";
        for (var i in o)
            s += i+"="+o[i]+"\n";
    alert(s);
    }else alert(typeof(s));
}
</script>

Исключения в JavaScript

Для обработки ошибок этапа выполнения используется следующая конструкция:

try {
    //код, приводящий к ошибке
}
catch(ошибка) {
    //действия при обнаружение ошибки
}

Для вызова ошибки в любой момент времени используется оператор throw.Он используется со значением любого типа:

throw 12345;

function process(values) {
    if (!(values instanceof Array)) {
        throw new Error(“process(): Аргумент должен быть массивом.”);
    }
    values.sort();
    for (var i=0, len=values.length; i < len; i++) {
        if (values[i] > 100) {
            return values[i];
        }
    }
    return -1;
}

Strict Mode

В пятой редакции ECMAScript был представлен строгий режим (Strict Mode). Strict Mode накладывает слой ограничений на JavaScript, он отгораживает вас от опасных частей языка (которые есть исторически, но могут привести к проблемам и ошибкам) и позволяет снизить вероятность ошибки.

Чтобы включить Strict Mode для всего кода нужно добавить "use strict" в начало вашего JavaScript кода:

"use strict";
012; //Восьмеричный литерал запрешен. Выбросит исключение SyntaxError в Strict Mode

В качестве альтернативы вы можете включить Strict Mode только в отдельной функции, добавив "use strict" в начало тела вашей функции:

012; //Нет ошибки (Strict Mode не включен глобально)
function foo() {
    "use strict";
    x=3; //Strict Mode выбросит исключение - запрещено неявно создавать глобальные переменные
}
foo(); //ReferenceError (Strict Mode включен для функции)

Внутренняя функция, объявленная внутри внешней, в которой включен Strict Mode тоже будет иметь Strict Mode:

var wrapper = function(fn) {
    'use strict';
    var deleteNonConfigurable = function () {
        var obj = {};
        Object.defineProperty(obj, "name", {
            configurable: false
        });
        delete obj.name; // Выбросит исключение TypeError в Strict Mode
    }
    return deleteNonConfigurable;
}
wrapper()(); //TypeError (Strict Mode включен)

На что влияет "use strict"

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

• Не допускает дублирование ключей в объекте
  

  Пример

  (function() {
  "use strict";
      var x = {
          a: 1,
          b: 2,
          a: 3
      }
  }());

  Приведёт к возникновению ошибки

  Uncaught SyntaxError: Duplicate data property in object literal not allowed in strict mode
• Требует всегда явного объявления переменных через var
  

  (function() {
  "use strict";
      var a = 1; // правильно
      x = 2; // ошибка: нет var
  }());

  Приведёт к возникновению ошибки

  Uncaught ReferenceError: x is not defined
• Запрещаются дублирования аргументов
  

  function sum(a, a) {...

  Приведёт к возникновению ошибки

  Uncaught SyntaxError: Strict mode function may not have duplicate parameter names
• Происходит заморозка arguments
  Тут можно потерять обратную совместимость. Массив arguments в strict mode начинает вести себя подобно обычным массивам (хотя, он не становится от этого обычным массивом):

  function a(x) {
      arguments[0] = 2;
      console.log(x); // напечатает 2
  }
  function b(x) {
      "use strict";
      arguments[0] = 2;
      console.log(x); // напечатает 1
  }
  a(1);
  b(1);

  То есть, в обычном режиме изменение arguments приводит к изменению соответствующих переменных, а в strict mode этого не происходит.

Другие полезные при отладке скрипты из коллекции скриптов:
• Исследователь событий DOM
• Исследователь объектов DOM
• JavaScript консоль
• Исследование W3C Модели событий
• Просмотр стека вызова функций в JavaScript

.
Прокомментировать/Отблагодарить