Отладка JavaScript

Тэги: 

Почему-то во многих статьях и учебниках для новичков в качестве функции для отладки кода советуют alert() что в корне неправильно, т.к. во время остановки скрипта мог быть запущен AJAX-запрос или Timeout, что может привести к нарушению дальнейшей работы всего скрипта в целом.

Для отладки скриптов нам понадобится консоль и отладчик. которые есть в любом современном браузере.

Если все таки нужно тормознуть скрипт, можно использовать в коде ключевое слово debugger.

Для вывода значений лучше всего использовать метод console.log(). Он кстати поддерживает форматирование строк аналогично функции printf() в других языках.
Вот небольшой пример:

  1. var foo = {string: "this is string", number: 100500}, vrbl = "ololo";
  2. console.log(
  3. "String: %s; number: %d; custom string: %s; custom number: %d; string variable: %s",
  4. foo.string, foo.number, "lalala", 111, vrbl
  5. );

Вот результат:
snimok_ekrana_2013-09-28_v_13.10.50.png

вывод объекта:

  1. var foo = {string: "this is string", number: 100500};
  2. console.log(foo);

Результат:
snimok_ekrana_2013-09-28_v_13.16.09.png

Аналогичные console.log() команды:
console.info(), console.warn() и console.error() - выделят ваши логи нужным цветом.

Объекты лучше всего выводить при помощи console.dir():

  1. var foo = {string: "this is string", number: 100500}, vrbl = "ololo";
  2. console.dir(foo);
  3. console.dir(document.body);

Результат:
snimok_ekrana_2013-09-28_v_13.23.05.png

Для отладки DOM элементов удобно использовать console.dirxml(). Не проверял в других браузерах, но хром будет подсвечивать выделенные в консоли элементы:

  1. some_node = jQuery('#node-57');
  2. console.dirxml(some_node);

Результат:
snimok_ekrana_2013-09-28_v_13.37.04.png

Группировка логов, используем console.group(), console.groupCollapsed() и console.groupEnd():

  1. some_node = jQuery('#node-57');
  2.  
  3. console.group("Group level 1");
  4. console.log("level 1 logs");
  5.  
  6. console.group("Group level 2");
  7. console.log("level 2 logs");
  8.  
  9. console.group("Group level 3");
  10. console.log("level 3 logs");
  11. console.dirxml(some_node);
  12. console.groupEnd();
  13.  
  14. console.groupEnd();
  15. console.groupEnd();
  16.  
  17. console.groupCollapsed("Group level 1 collapsed");
  18. console.log("logs");

Результат:
snimok_ekrana_2013-09-28_v_14.04.52.png

Так же еще стоит упомянуть метод assert, используемый для проверки кода, чтобы быть уверенным, что он будет выполняться так, как было задумано.
Первым аргументом принимается условие, вторым - сообщение в случае его невыполнения:

  1. var a = 123, b = "123";
  2. console.assert(a === b, "тип A не соответствует типу B");

Профилирование:

  1. console.profile();
  2. // наш код
  3. console.profileEnd();

Замер времени выполнения кода:

  1. console.time("some_timer_name");
  2. // наш код
  3. console.timeEnd("some_timer_name");