JS для начинающих. Урок 1.6: Учимся использовать js-консоль


Написанные вами скрипты, особенно на первых парах, далеко не всегда будут работать так, как вам хочется. Этого не нужно бояться, ошибки при написании кода совершают и опытные программисты.

Типы ошибок

Можно выделить несколько типов ошибок, которые допускаются при написании кода.

  1. Синтаксические ошибки. При наличии таких ошибок скрипт даже не начнёт работать. К таким ошибкам можно отнести, например, наличие в коде идентификатора, который начинается с цифры, или строкового литерала, записанного в несколько строк и т.д.
  2. Ошибки, возникшие в ходе выполнения скрипта. Например, обращение к необъявленной переменной.
  3. Логические ошибки. Скрипт, содержащий подобного рода ошибки будет выполнятся, но делать будет не то, что вам требуется. Например, вы хотели сложить 11 и 2 и записали 011 + 2. Сложно представить, что заставило бы вас так сделать, но если вы всё же так сделаете, то вопреки ожиданиям получите не 13, а 11. Почему? см урок 1.1. Литералы.

Какого рода ошибка бы ни была, лучшим способам понять откуда она взялась, является вывод как можно большого количества информации о ней. Для этой цели не всегда подойдёт alert или document.write, поэтому во многих браузерах есть javascript-консоль, на которую и выводится информация об ошибках.

JS-консоль

Открыть инструменты отладки, содержащие js-консоль в опере и хроме можно нажав ctrl+shift+i, в мозиле она открывается нажатием ctrl+shift+k, в ие F12.

Это можно сделать и без горячих клавишь. В опере: Opera -> Страница -> Средства разработки -> Opera Dragonfly, в Google Chrome: Иконка гаечного ключа в верхнем правом углу -> Инструменты -> Консоль JavaScript, в FF: Firefox -> Веб-разработка -> Веб-консоль, в IE: Сервис -> Средства разработчика.

Попробуйте, выполнить код

 

alert('
 ');

В этом примере опущен html-код, в дальнейшем я часто буду его опускать в примерах.

Если до загрузки странички с этим кодом у вас была открыта js-консоль, то вы уведите на ней сообщение об ошибке. В опере, например, оно будет выглядеть примерно вот так:

В этом сообщении содержится номер строки, что поможет вам найти ошибку.

Функция console.log

Выводить что-то на консоль можно и самостоятельно при помощи метода console.log. Например, код

console.log('Hello World!');

выведет на консоль надпись, приветствующую мир. Обратите внимание, что этот код выполнится, только если в браузер поддерживает соответствующие инструменты отладки. Кроме того в ie произойдёт ошибка если инструменты отладки закрыты.

Выполняем js-код в консоли

Если напечатать в консоли строчку js-кода и нажать enter, то вы увидите либо сообщение об ошибке, если она была допущена в набранном вами коде, либо результат выполнения кода (возвращённое значение). Если выполняемый в консоли код манипулирует с содержимым странички, то результат его выполнения может на ней отобразится. Попробуйте, например, находясь на своей страничке Вконтакте выполнить код:

 

fadeOut(ge('content'), 5000);

Вы увидите, как контентная часть странички плавно растаяла. Не пугайтесь. Просто обновите страничку и всё вернётся на свои места.

Так же можно набрать

alert('Привет прекрасный мир!');

и вы увидите унылое серое окошко, радостно приветствующее мир.

Можно так же использовать переменные. (После каждой строчки нажимайте enter)

var hello = 'Привет!';
var bye = 'Пока!';
hello;
bye;

Кроме того, переменные и функции в глобальной области видимости, объявленные в js-коде на странице, доступны из консоли.

На этом возможности js-консоли не заканчиваются. Это очень мощный инструмент, помогающий в отладке. Не пренебрегайте его использованием. В этом уроке я лишь познакомил вас с ним, подробнее о его использовании вы будете узнавать по ходу уроков.

Перейти к содержанию курса «Javascript для начинающих»

  • Александр

    Отличные статьи. С нетерпением жду продолжения…

  • Автор, офигенная статья, спасибо. То, что искал)

  • Давно хотел понять как эти консоли работают, никак руки не доходили почитать, а тут само в руки пришло) Спасибо

  • Рус

    почему может не работать window.onresize = function(){window.location.reload()} в Firefox

    • Браузер может не давать так часто перезагружать страницу.

      • Рус

        Думаю проблема не в этом, потому что если оставить голый window.location.reload() в Firefox, то он перезагружает страницу (естественно постоянно), т.е. window.location.reload() работает, а функция window.onresize = function() почему то не хочет работать у меня в Firefox, в остальных браузерах работает…
        Может для Firefox надо иначе прописывать?
        Цель: обновление страницы, после изменения размеров окна браузера (для того чтобы динамические элементы приобрели ширину в окно браузера)

      • Рус

        window.onresize = function() работает и в Firefox, но без связки window.location.reload().
        «Браузер может не давать так часто перезагружать страницу.» — возможно это и есть причина.
        А как решить эту проблему? Что можно добавить или изменить?

        • Рус, изменяйте размеры динамических элементов при помощи js, а лучше смотрите в сторону адаптивной вёрстки. Незачем для этого перезагружать страницу.