<
  • Главная
Статьи

JS для початківців. Урок 1.6: Вчимося використовувати js-консоль

  1. типи помилок
  2. JS-консоль
  3. функція console.log
  4. Виконуємо 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: Сервіс -> Засоби розробника.

Спробуйте, виконати код

У цьому прикладі опущений 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;

';  hello;  bye;

Крім того, змінні і функції в глобальному контексті, оголошені в js-коді на сторінці, доступні з консолі.

На цьому можливості js-консолі не закінчуються. Це дуже потужний інструмент, що допомагає в налагодженні. Не нехтуйте його використанням. У цьому уроці я лише познайомив вас з ним, докладніше про його використанні ви будете дізнаватися по ходу уроків.

Перейти до змісту курсу «Javascript для початківців»

11. Чому?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью