Console.log(); Как отладить javascript

Хорошо, поэтому я надеюсь, что это вопрос, который не является основным для вас, ребята.

Я знаю достаточно jQuery, чтобы попасть в беду, а это значит, что я могу захватывать элементы и делать с ними все, писать свои собственные небольшие функции для интерактивности и т.д. Но тогда что-то не так, как ожидалось, прежде чем я отправляю вопросы в stackoverflow и получаю ответы, которые заставляют меня ударить себя в лоб, я бы сам отлаживал его и мне было больно вставлять alert(); в мой код. При чтении по теме упоминается console.log();, console.info(); и такое, но я не могу найти какой-либо ресурс, который объясняет, как использовать их в реальных сценариях для отладки.

Знаете ли вы кого-нибудь из хорошего ресурса или учебника (не боясь читать книгу), который может объяснить, как использовать эти функции для layman. Похоже, что учебники и такие, которые я нахожу, - это либо способ продвинуться, либо просто обрезать поверхность и не показывать, как их использовать. Я понимаю, что могу вставить console.log();, и он будет выплевывать информацию в консоли для firebug или element inspector. Но что, если моя рука испекла функция делает что-то неожиданное где-то вверх по линии, как я могу найти проблему, поскольку браузер анализирует javascript.

Любая помощь будет очень благодарна, поскольку я чувствую, что это поможет мне понять, что происходит в моем коде, поэтому я могу перестать смотреть на экран, идущий "Почему это не работает, он работал в jsfiddle!"

Ответ 1

console.log() просто берет все, что вы передаете, и записывает их в окно журнала консоли. Если вы пройдете массив, вы сможете проверить содержимое массива. Передайте объект, вы можете изучить атрибуты/методы объекта. передать строку, она будет записывать строку. В основном это "document.write", но может разумно разделить его аргументы и записать их в другом месте.

Полезно выводить случайную информацию для отладки, но не особенно полезно, если у вас имеется огромное количество отладочной информации.

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

Ответ 2

Мне нравится добавлять эти функции в голову.

window.log=function(){if(this.console){console.log(Array.prototype.slice.call(arguments));}};
jQuery.fn.log=function (msg){console.log("%s: %o", msg,this);return this;};

Теперь журнал не будет прерывать IE Я могу включить его или отключить в одном месте Я могу войти в систему

$(".classname").log(); //show an array of all elements with classname class

Ответ 3

По существу console.log() позволяет вам выводить переменные в вашем отладчике javascript по выбору вместо того, чтобы мигать alert() каждый раз, когда вы хотите что-то проверить... дополнительно, для более сложных объектов он даст вам представление дерева для проверки объект далее вместо того, чтобы преобразовать элементы в строки, такие как alert().

Ответ 4

Научитесь использовать отладчик javascript. Venkman (для Firefox) или веб-инспектор (часть Chome и Safari) - отличные инструменты для отладки того, что происходит.

Вы можете установить контрольные точки и опросить состояние машины, когда вы взаимодействуете с вашим script; перейдите по частям вашего кода, чтобы убедиться, что все работает как запланировано, и т.д.

Вот отличная запись из WebMonkey для отладки JavaScript для начинающих. Это отличное место для начала.

Ответ 5

Точки останова и особенно условные точки останова - ваши друзья.

Также вы можете написать небольшую функцию типа assert, которая проверяет значения и генерирует исключения, если это необходимо, в отладочной версии сайта (для некоторой переменной задано значение true или url имеет некоторый параметр)