Код вразливий щодо помилок. В будь-якому проекті будуть зустрічатися помилки.
Але за замовчуванням у браузері помилок не видно. Тобто якщо щось піде не так ми не побачимо, що саме зламалося і не зможемо це полагодити.
Для вирішення завдань такого роду в браузер вбудовані так звані інструменти розробки (Developer tools або скорочено devtools).
Chrome і Firefox здобули прихильність багатьох програмістів багато в чому завдяки своїм чудавими інсрументами розробника. Інші браузери, хоч і оснащені подібними інструментами, але всее таки найчастіше перебувають у ролі наздоганяючих і за якістю, і за кількістю властивостей та особливостей. Загалом, майже всі програмісти мають свій «улюблений» браузер. Інші використовуються тільки для вилову та виправлення специфічних «браузерозалежних» помилок.
Для початку знайомства з цими потужними інструментами давайте з’ясуємо, як їх відкривати, дивитися помилки та запускати команди JavaScript.
Google Chrome
Якщо в JavaScript-коді закралася помилка, то її не видно звичайному відвідувачеві, тому знайдемо її за допомого інструментів розробки.
Натисніть F12 або, якщо ви використовуєте Mac, Cmd+Opt+J.
За замовчуванням в інстументах розробника відкривається вкладка Console (консоль).
Вона виглядає приблизно так:
Точний зовнішній вигляд інструментів розробки залежить від версії Chrome. Іноді деякі деталі змінюються, але в цілому зовнішній вигляд залишається приблизно схожим на попередні версії.
У консолі ми можемо побачити повідомлення про помилку, текст виділяється червоним кольором. Праворуч є посилання на вихідний код з номером рядка коду в якому ця помилка і сталася.
Під повідомленням про помилку знаходиться синій символ >. Він позначає командний рядок, у ньому ми можемо редагувати та запускати JavaScript-команди. Для їхнього запуску потрібно натиснути Enter.
Багаторядкове введення
Зазвичай при натисканні Enter введений рядок коду відразу виконується.
Щоб перенести рядок, потрібно натиснути Shift+Enter. Так можна вводити довший JS-код.
Firefox, Edge та інші браузери
Інструменти розробника у більшості браузерів відкриваються при натисканні F12.
Їх зовнішній вигляд та принципи роботи мало чим відрізняються. Розібравшись з інструментами в одному браузері ви легко зможете працювати з ними і в іншому.
Safari
Safari (браузер для Mac, не підтримується в системах Windows/Linux) все ж таки має невелику відмінність. Для початку роботи потрібно включити «Меню розробки» («Developer menu»).
Відкрийте Налаштування (Preferences) та перейдіть до панелі «Просунуті» (Advanced). У самому низу ви знайдете чекбокс:
Тепер консоль можна активувати натисканням клавіш Cmd+Opt+C. Також зверніть увагу на новий елемент меню Розробка (Develop). У ньому міститься велика кількість команд та налаштувань.
Висновки
Інструменти розробника дозволяють нам дивитися помилки, виконувати команди, перевіряти значення змінних та ще багато всього корисного. У більшості браузерів, що працюють під Windows, можна відкрити інструменти розробника, натиснувши F12. У Chrome для Mac використовуйте комбінацію Cmd+Opt+J, Safari: Cmd+Opt+C (необхідне попереднє включення меню розробника). Тепер наше оточення повністю налаштоване.