Console.log(); How to & Debugging javascript

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

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

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

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