JS для початківців. Урок 1.6: Вчимося використовувати js-консоль
Написані вами скрипти, особливо на перших парах, далеко не завжди будуть працювати так, як вам хочеться. Цього не потрібно боятися, помилки при написанні коду здійснюють і досвідчені програмісти.
типи помилок
Можна виділити кілька типів помилок, які допускаються при написанні коду.
- Синтаксичні помилки. При наявності таких помилок скрипт навіть не почне працювати. До таких помилок можна віднести, наприклад, наявність в коді ідентифікатора, який починається з цифри, або строкового літерала, записаного в кілька рядків і т.д.
- Помилки, що виникли в ході виконання скрипта. Наприклад, звернення до неоголошеної змінної.
- Логічні помилки. Скрипт, що містить подібного роду помилки буде виконуватися, але робити буде не те, що вам потрібно. Наприклад, ви хотіли скласти 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: Сервіс -> Засоби розробника.
Спробуйте, виконати код
У цьому прикладі опущений html-код, в подальшому я часто буду його опускати в прикладах.
Якщо до завантаження сторінки з цим кодом у вас була відкрита js-консоль, то ви виведіть на ній повідомлення про помилку. В опері, наприклад, воно буде виглядати приблизно ось так:
У цьому повідомленні міститься номер рядка, що допоможе вам знайти помилку.
функція console.log
Виводити щось на консоль можна і самостійно за допомогою методу console.log. Наприклад, код
console. log ( 'Hello World!');
console.log ( 'Hello World!');
виведе на консоль напис, вітає світ. Зверніть увагу, що цей код виконається, тільки якщо в браузер підтримує відповідні інструменти налагодження. Крім того в ie відбудеться помилка якщо інструменти налагодження закриті.
Виконуємо js-код в консолі
Якщо надрукувати в консолі рядок js-коду і натиснути enter, то ви побачите або повідомлення про помилку, якщо вона була допущена в набраному вами коді, або результат виконання коду (Повернені значення). Якщо виконується в консолі код маніпулює з вмістом сторінки, то результат його виконання може на ній відобразиться. Спробуйте, наприклад, перебуваючи на своїй сторінці Вконтакте виконати код:
fadeOut (ge ( 'content'), 5000);
fadeOut (ge ( 'content'), 5000);
Ви побачите, як тематична частина сторінки плавно розтанула. Не лякайтесь. Просто поновіть сторінку і все повернеться на свої місця.
Так само можна набрати
alert ( 'Привіт прекрасний світ!');
alert ( 'Привіт прекрасний світ!');
і ви побачите сумне сіре віконце, радісно вітає світ.
Можна так само використовувати змінні. (Після кожного рядка натискайте enter)
var hello = 'Привіт!' ; var bye = 'Поки!' ; hello; bye;
var hello = 'Привіт!'; var bye = 'Поки!'; hello; bye;
Крім того, змінні і функції в глобальному контексті, оголошені в js-коді на сторінці, доступні з консолі.
На цьому можливості js-консолі не закінчуються. Це дуже потужний інструмент, що допомагає в налагодженні. Не нехтуйте його використанням. У цьому уроці я лише познайомив вас з ним, докладніше про його використанні ви будете дізнаватися по ходу уроків.
Перейти до змісту курсу «Javascript для початківців»
11. Чому?