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 для начинающих»