Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Отладка 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 этого не происходит.