Пошук уроків, статей та іншого контенту
Як користуватись консоллю браузера для дебагу та навіщо вмикати сувору перевірку коду.
Developer Tools (F12 або Cmd+Option+I на Mac) — вбудований у браузер набір інструментів: вкладка Elements для перегляду DOM, Console для виконання коду й перегляду логів, Network для аналізу запитів, Sources для дебагу з точками зупину (breakpoints).
console.log("звичайне повідомлення");
console.warn("попередження");
console.error("помилка");
console.table([{ id: 1, name: "Оля" }, { id: 2, name: "Іван" }]);
console.group("Деталі запиту");
console.log("статус: 200");
console.groupEnd();console.table() — недооцінений метод: масив об'єктів виводиться як справжня таблиця, значно зручніше за console.log для масивів даних.
У вкладці Sources можна поставити breakpoint, клікнувши на номер рядка. Виконання коду зупиниться саме там, і можна переглянути значення всіх змінних у поточній області видимості — це швидше за розставляння десятків console.log по коду.
Директива "use strict" вмикає режим, який перетворює «тихі» помилки на справжні винятки:
"use strict";
mistypedVariable = 10; // ReferenceError: mistypedVariable is not defined
// без strict mode це створило б глобальну змінну без попередженняЗабороняє випадкове створення глобальних змінних через пропущений let/const/var.
Забороняє дублювання імен параметрів функції.
this у звичайних функціях, викликаних без контексту, дорівнює undefined, а не глобальному об'єкту.
ES-модулі (<script type="module">) та код усередині класів завжди виконуються в strict mode автоматично — директиву писати не потрібно.
Дебаг лише через console.log там, де точка зупину у вкладці Sources дала б повну картину змінних одразу — швидше і менш захаращено.
Ігнорування console.warn/console.error на користь console.log для всього — втрачається можливість швидко відфільтрувати повідомлення за важливістю в консолі.
Забування, що без strict mode помилка на кшталт друкарської помилки в імені змінної мовчки створює глобальну змінну замість очікуваної помилки.
DevTools — основний робочий інструмент щоденної розробки: Console для швидких перевірок і різних видів виводу (table, group, warn, error), Sources для точок зупину замість розкиданих console.log, Elements і Network — для наступних модулів цього курсу. "use strict" (автоматично увімкнений у модулях і класах) перетворює тихі, непомітні помилки на явні винятки — саме тому весь код на цій платформі вважається таким, що виконується в строгому режимі.
Спробуйте самостійно
Відкрийте консоль і виконайте mistypedVariable = 10; console.log(mistypedVariable); без strict mode — переконайтесь, що це «спрацює» без помилки. Потім спробуйте те саме в модулі з "use strict" і порівняйте поведінку.