76 подписчиков

Язык JavaScript - 1. Введение

3 дня назад3 дня назад

20 мин

Представьте, что веб-страница - это дом. HTML - это кирпичи, стены и фундамент (структура). CSS - это обои, краска и дизайн интерьера (стиль). А JavaScript (JS) - это электричество, водопровод, сигнализация и робот-пылесос. Это то, что заставляет дом жить и реагировать на вас. Без JS страницы напоминают музейные экспонаты: красиво, но статично. С JS они начинают думать, двигаться и общаться. В 1995 году интернет был похож на газету: нажал на ссылку - загрузилась новая страница. Брендан Эйх из Netscape за 10 дней создал язык, который мог бы работать прямо в браузере, не отправляя каждое действие на сервер. Ключевая идея: JS позволяет выполнять код на стороне клиента (в вашем браузере), а не на сервере. Это даёт молниеносный отклик: проверил форму, анимировал меню, подгрузил данные без перезагрузки страницы. Сейчас JS - это не просто «плюшевый язык для кнопочек». На нём пишут серверы (Node.js), мобильные приложения (React Native), игры и даже управляют роботами. Чтобы вы не ждали чуда та

Оглавление

Введение в JavaScript: Не просто «скрипт», а стихия живого Интернета
Откуда взялся этот «магический язык»?
Что умеет JS в браузере? (И чего не умеет - это тоже важно)

Введение в JavaScript: Не просто «скрипт», а стихия живого Интернета

Представьте, что веб-страница - это дом. HTML - это кирпичи, стены и фундамент (структура). CSS - это обои, краска и дизайн интерьера (стиль). А JavaScript (JS) - это электричество, водопровод, сигнализация и робот-пылесос. Это то, что заставляет дом жить и реагировать на вас.

Без JS страницы напоминают музейные экспонаты: красиво, но статично. С JS они начинают думать, двигаться и общаться.

Откуда взялся этот «магический язык»?

В 1995 году интернет был похож на газету: нажал на ссылку - загрузилась новая страница. Брендан Эйх из Netscape за 10 дней создал язык, который мог бы работать прямо в браузере, не отправляя каждое действие на сервер.

Ключевая идея: JS позволяет выполнять код на стороне клиента (в вашем браузере), а не на сервере. Это даёт молниеносный отклик: проверил форму, анимировал меню, подгрузил данные без перезагрузки страницы.

Сейчас JS - это не просто «плюшевый язык для кнопочек». На нём пишут серверы (Node.js), мобильные приложения (React Native), игры и даже управляют роботами.

Что умеет JS в браузере? (И чего не умеет - это тоже важно)

Чтобы вы не ждали чуда там, где его нет, давайте честно.

Суперсилы JS (на фронтенде):

Изменять HTML и CSS на лету. Можно добавить новый абзац, скрыть картинку или поменять цвет кнопки после клика.
Реагировать на действия пользователя. Клик, движение мыши, нажатие клавиши, отправка формы - JS слышит всё.
Общаться с сервером без перезагрузки (AJAX/Fetch). Когда вы ставите лайк в соцсети и счётчик обновляется, а страница не мигает - это JS сходил на сервер шепотом и вернулся с ответом.
Хранить данные в браузере (LocalStorage). Например, запомнить, что вы выбрали тёмную тему, и при следующем визите применить её.
Показывать уведомления, создавать таймеры, анимации, игры.

Где JS бессилен (безопасность превыше всего):

Читать/писать файлы на вашем компьютере. JS не может украсть ваш passwords.txt. Это было бы катастрофой.
Запускать другие программы на вашем ПК.
Работать с сетью напрямую вне браузера (без спец. разрешений).

Это ограничения песочницы - специального изолированного пространства в браузере. Без них интернет превратился бы в вирусную помойку.

Первый контакт: как подружить JS с HTML?

Есть три способа, но для старта используйте самый простой - тег <script>.

Как это работает:

Браузер читает HTML сверху вниз.
Встречает тег <script> - останавливается и выполняет код.
Код говорит: «Найди объект с id="magicButton" и запомни его».
Код вешает слушатель события click на эту кнопку.
Пользователь кликает → функция внутри выполняется → текст меняется.

Мозг JS: переменные, типы и простые правила

JS - язык с динамической типизацией. Это умное словосочетание значит: вы можете положить число в коробку, а потом через минуту положить туда строку текста. JS не будет ругаться (хотя иногда лучше бы ругался).

Три главных кита для хранения данных:

let - обычная переменная, которую можно менять. (let age = 25;)
const - константа, которую нельзя переназначить. (const birthYear = 1990;)
var - старый дедушка. Не используйте его в новом коде (у него странные правила видимости).

Базовые типы данных (то, что можно хранить):

number - 42, 3.14 (и не надо делить на целые и дробные, как в других языках).
string - текст в кавычках: "Привет", 'Мир', `Шаблон`.
boolean - только true или false (как да/нет).
null - намеренное «ничего нет».
undefined - переменная создана, но значения ей не дали.
object - сложная структура (пользователь, массив, дата).

Маленькая магия «правды и лжи»

В JS есть понятие truthy и falsy. Это важно для условий.

Falsy значения (лжецы): false, 0, "" (пустая строка), null, undefined, NaN.
Всё остальное — truthy (даже пустой массив [] и пустой объект {}).

Как не наделать ошибок новичку (психологический аспект)

Точка с запятой (;) - JS умеет их подставлять сам, но лучше ставить. Иначе он однажды неправильно поймёт вашу мысль.
Регистр имеет значение. myVar и myvar - это две разные переменные. Браузер не прощает опечатки.
Ошибки не ломают страницу (всегда есть консоль). Нажали F12 в браузере → вкладка Console. Там красным написано, что пошло не так. Не бойтесь красного - это подсказка, а не проклятие.

--------------------------------------------------------------------

Навигация в мире JavaScript: Полный путеводитель по справочникам и спецификациям

Представьте, что вы учитесь готовить. Можно действовать наугад, комбинируя ингредиенты, а можно - заглянуть в рецепт. А если вы хотите стать шеф-поваром мирового уровня, вам нужно понимать не только рецепты, но и саму «физику» приготовления: почему белок сворачивается при нагреве, как работают эмульгаторы.

В мире JavaScript всё точно так же. Есть рецепты (туториалы и статьи), есть поваренные книги (справочники), а есть научные труды по молекулярной гастрономии (спецификации). И каждый разработчик, который хочет не просто «копипастить», а действительно понимать язык, должен знать, где что искать.

Эта статья - ваша карта сокровищ в мире документации JavaScript. Мы разберемся, чем отличается скучная, но великая ECMAScript от удобного MDN, зачем смотреть на Can I use? и как не утонуть в море информации.

Часть 1. Спецификация ECMAScript: «Святая Святых» языка

Что это такое?

Спецификация ECMAScript (официальное название - ECMA-262) - это главный документ, который определяет, как должен работать JavaScript. Это не учебник и не справочник для ежедневного использования. Это закон.

Представьте, что это Конституция JavaScript. В ней прописаны правила игры для всех: разработчиков браузеров (Chrome, Firefox, Safari), создателей инструментов и теоретиков.

Кому и зачем это нужно?

Создателям браузеров (движков): Они читают спецификацию, чтобы понять, как именно должен работать Array.map или что происходит при вызове new Promise().
Создателям фреймворков: Глубокое понимание спецификации позволяет писать более эффективный и безопасный код.
Любопытным разработчикам: Иногда только в спецификации можно найти ответ на вопрос «Почему это работает именно так?».

Почему новичок испугается, а профи улыбнется?

Честно говоря, читать спецификацию с первой главы - это мазохизм. Она написана сухим, формальным языком, использует кучу специфических терминов (TypeScript-разработчики, привет, Abrupt Completion!). Вот как выглядит описание даже простой вещи:

"Return the result of evaluating AdditiveExpression."

Тем не менее, когда вы станете опытным разработчиком, вы начнете получать странное удовольствие, открывая спецификацию, чтобы разрешить спор с коллегой: «А точно ли {} + [] вернет 0?». Да, точно. И ответ есть в секции о преобразовании типов.

Где живет спецификация и как ее читать?

Главный адрес: tc39.es/ecma262. Это актуальный черновик, в котором уже есть все фишки, которые войдут в следующий официальный релиз.

Каждый год выходит новая версия спецификации: ES2022, ES2023, ES2024. Язык развивается не рывками, а плавно.

Как подступиться?
Не читайте её от корки до корки. Используйте её как энциклопедию:

Возник спор о том, как работает for...in? Идите в главу про итерации.
Нужно понять детали работы this? Ищите главу «Execution Contexts».

Совет бывалого: Начните со спецификации поменьше, которая уже обработана людьми. Например, книгу "JavaScript. Подробное руководство" (Flanagan) часто называют «спецификацией для людей».

Часть 2. MDN Web Docs: «Википедия» фронтендера

Если спецификация - это закон, то MDN (Mozilla Developer Network) — это понятный комментарий к этому закону с примерами из жизни.

Это ваш главный инструмент каждый день.

Почему MDN - король?

Дружелюбность: Вместо сухого «Return the result of evaluating...» вы увидите: «Метод parseInt принимает строку и возвращает целое число. Вот пример: parseInt('42') // 42».
Актуальность: MDN обновляется очень быстро. Как только новая фишка попадает в черновик спецификации, на MDN уже появляется статья о ней с пометкой "Experimental".
Интеграция с реальностью: Там объясняют не только чистый JS, но и то, как он взаимодействует с браузером (Web API): fetch, DOM, setTimeout.

Как правильно «гуглить» через MDN?

Золотое правило профессионала: всегда добавляйте "MDN" к вашему запросу в Google.

❌ javascript array join
✅ mdn array join

Первый вариант может выдать какую-то старую статью с форума, второй - гарантированно отправит вас на страницу Array.prototype.join() на MDN.

Структура страницы на MDN (научитесь читать их правильно):
Когда вы откроете, скажем, Array.map, вы увидите:

Синтаксис: let newArray = arr.map(callback(currentValue[, index[, array]])[, thisArg])
Параметры: Что такое callback и какие аргументы у него есть.
Возвращаемое значение: Всегда ли возвращается новый массив? Да.
Примеры: От простого к сложному.
Спецификация: Ссылка на нужный раздел ECMA-262 (замыкается круг).
Совместимость с браузерами: Таблица, в каких версиях это работает.

Часть 3. Таблицы совместимости: Детектор лжи для браузеров

Написали красивый код с использованием новомодного оператора ?. (опциональная цепочка)? Прекрасно. Но откроется ли он у вашего клиента на старом Samsung Galaxy с древним браузером?

Вот тут на сцену выходят таблицы совместимости.

Can I use? (caniuse.com)

Это простой и наглядный инструмент. Вбиваете в поиск optional chaining и видите зеленые (работает) и красные (не работает) квадратики напротив всех версий браузеров.

Когда использовать: Когда вы сомневаетесь, можно ли использовать фичу прямо сейчас в продакшене.

Kangax compat-table

Более сложный и детальный инструмент. Он показывает поддержку фич самого языка (ES5, ES6, ES7...) в различных движках (V8, SpiderMonkey, Chakra).

Когда использовать: Когда вы разрабатываете библиотеку или инструмент, который должен работать на сотнях разных сред, включая серверные (Node.js) и мобильные.

Часть 4. Когда учебник уже не нужен: Следующий уровень

Когда вы перерастаете начальный уровень, у вас формируется личный набор источников:

Блоги команд браузеров: Блоги Chrome (V8), Firefox (SpiderMonkey) и WebKit (Safari). Там разработчики движков сами рассказывают, как они ускоряют ваш код и какие новые фичи внедряют.
Репозиторий TC39 на GitHub: Хотите быть в курсе, что появится в JavaScript через год? Следите за «предложениями» (proposals) на github.com/tc39/proposals.
WHATWG (для браузерных API): Есть еще спецификации HTML и DOM (Document Object Model). Их развивает WHATWG.

------------------------------------------------------------------

Инструмент мастера: Полный гид по редакторам кода для JavaScript

Представьте, что вы учитесь играть на гитаре. Можно пытаться играть на консервной банке с натянутыми резинками. А можно взять качественный инструмент, который не будет резать пальцы, будет звучать чисто и вдохновлять на творчество.

В мире JavaScript редактор кода - это та самая гитара. Можно писать код в «Блокноте» (и да, так делали легенды в 90-х), а можно использовать современные инструменты, которые будут думать вместе с вами, исправлять ошибки и даже предсказывать мысли.

Эта статья - не просто список «скачай то, скачай это». Это размышление о том, как выбрать идеальный инструмент под ваш стиль работы, уровень и задачи. Поехали.

Часть 1. Философия выбора: Кем вы будете завтра?

Прежде чем нырять в обзоры, задайте себе честные вопросы:

Вы новичок, который учит for и if? Вам нужна простота, подсветка синтаксиса и отсутствие «взрослых» настроек, которые отвлекают.
Вы делаете пет-проект в одиночку? Хочется красоты, умного автодополнения и быстрой навигации.
Вы работаете в команде над большим проектом? Тут потребуются линтеры (стражи чистоты кода), интеграция с Git, дебаггер и куча плагинов.
Вы случайно открыли ноутбук на пляже и хотите подправить строчку? Вам нужен онлайн-редактор прямо в браузере.

Редакторы делятся на два лагеря: легковесы (как блокнот на стероидах) и тяжелая артиллерия (среда разработки, IDE). Для JavaScript грань между ними размыта, но она есть.

Часть 2. Тяжеловесы: IDE для профессионалов

WebStorm - «Танк» для джедаев

Кто это: JetBrains. Та же компания, что делает IntelliJ IDEA для Java. WebStorm - его младший брат, заточенный под JavaScript/TypeScript.

Что внутри коробки:

Рефакторинг, от которого у новичка закружится голова (выделил код → «Extract Component» - и вуаля).
Глубокое понимание кода. WebStorm не просто подсвечивает синтаксис, он знает, что у вас за фреймворк (React, Vue, Angular) и подсказывает специфичные вещи.
Дебаггер с красивым интерфейсом.
Встроенный терминал, Git, интеграция с баг-трекерами.

Почему это может быть сложно:

Платный. Да, есть бесплатный пробный период и скидки для студентов, но после придется платить ($/мес).
Тяжелый. На старом ноутбуке будет подтормаживать. Жрет память (привет, 2-4 ГБ ОЗУ).
Своя экосистема. Привыкаешь к «вебштормовским» комбинациям клавиш, а в другом редактере теряешься.

Вердикт: Если вы профессиональный фронтендер, который пишет код 8 часов в день, и работодатель готов оплачивать лицензию - WebStorm окупит себя за неделю. Вы будете писать быстрее, а ошибок - меньше.

VS Code - «Швейцарский нож» победитель

Кто это: Microsoft. Бесплатный, открытый, и за пару лет он выиграл войну редакторов. Сейчас примерно 70% JS-разработчиков используют VS Code.

В чем магия?
VS Code - это легковесный каркас, который превращается в монстра через плагины. Из коробки он умеет немного: подсветку, базовое автодополнение. Но устанавливаете:

Prettier - форматирует код за вас (забудьте о спорах про табы и пробелы).
ESLint - тычет носом в плохие практики.
GitLens - видит историю каждой строчки.
Live Server - показывает изменения в браузере мгновенно.

Почему любят:

Бесплатно и быстро. Открывается за секунду.
Терминал встроен. Не надо прыгать между окнами.
Миллион плагинов. На любой вкус: иконки, темы, поддержка Docker, Remote SSH (кодите на сервере).
Git работает из коробки очень прилично.

Минусы:

Настройка под себя может занять дни (но это и весело).
Иногда тормозит с гигантскими файлами или монстр-проектами.
Без плагинов - просто красивый блокнот.

Вердикт: Идеальный выбор для 95% задач. И новичку, и профи. Если сомневаетесь - ставьте VS Code.

Часть 3. Легкая кавалерия: Быстрые и простые

Sublime Text - «Феррари» среди редакторов

Легенда. Он появился, когда IDE были медленными и жирными. Sublime Text молниеносен. Открывает файл на 100 МБ быстрее, чем VS Code - пустой файл.

Особенности:

Мульти-курсоры (это божественно: вы меняете одно слово сразу в 10 местах).
Командная палитра (Ctrl+Shift+P) - делаете всё с клавиатуры, не отвлекаясь на мышь.
Очень плавная работа даже на слабом железе.

Минусы:

Условно-бесплатный (бесконечный триал, но иногда выскакивает окно "Buy license").
Из коробки почти ничего не умеет в JS. Надо ставить пакеты через Package Control.
Конфигурация через JSON-файлы (меняете настройки текстом, нет галочек).

Вердикт: Отличный выбор для тех, кто ценит скорость и минимализм. Или кто сидит на древнем ноутбуке.

Vim / Neovim - «Дзен» и модальность

Здесь начинается секта. Vim - это не редактор, это образ жизни. У него два режима: в одном вы пишете текст, в другом - команды.

Как это выглядит: Вы не тянетесь к мышке. Нажимаете dd - удалили строку. yy - скопировали. /search - нашли. Это невероятно эффективно, когда мозг перестроится.

Почему JS-разработчики любят Vim:

Работает везде: в терминале на сервере, по SSH, на встраиваемых системах.
Невероятно быстр.
Глубокое удовлетворение, когда работаете без мыши.

Сложности:

Крутая кривая обучения. Первые дни вы будете ненавидеть Vim и не понимать, как выйти (спойлер: :q!).
Чтобы превратить в современную JS-среду, надо настроить плагины для автодополнения, линтера, файлового дерева. Это квест.

Вердикт: Не для новичков. Но если вы в IT надолго - выучить базовые команды Vim полезно. Они есть как плагин в VS Code и WebStorm.

Часть 4. Онлайн-песочницы: Кодим из браузера

Бывает, что не хочется ничего ставить. Или вы на чужом компьютере. Или хотите быстро поделиться примером.

CodePen / JSFiddle - «Блокноты» для демок

Вбиваете HTML слева, CSS в середине, JS справа - справа результат. Идеально для:

Быстрого эксперимента.
Вопроса на StackOverflow («Смотрите, вот тут ошибка»).
Создания портфолио-демки.

Минусы: Не для больших проектов. С git не интегрируются.

StackBlitz / CodeSandbox - «Взрослые» IDE в браузере

Это уже полноценный VS Code в браузере. Они поднимают контейнер с Node.js на сервере, и вы можете писать React/Vue/Angular проект, видеть результат, даже коммитить в GitHub.

Магия: Проект работает в облаке. Открыли ссылку - и через секунду видите работающее приложение. Не надо ничего устанавливать локально.

Когда использовать:

Показать работу заказчику.
Поучиться по туториалу (многие курсы используют StackBlitz).
Работать с iPad (да, на iPad тоже можно).

Минусы: Зависите от интернета. Бесплатные тарифы ограничены по ресурсам.

Часть 5. Как новичку не утонуть? Конкретный план действий

Вы только начинаете учить JavaScript. Вокруг советуют VS Code, WebStorm, Vim, Emacs... Голова идет кругом.

Мой вам чек-лист:

Скачайте VS Code. Это самый безопасный и популярный выбор. Поддержка огромная, ответы на любой вопрос гуглятся.
Поставьте тему оформления. Глаза должны отдыхать. Поставьте темную тему (например, One Dark Pro или Tokyo Night). Светлая тоже подойдет, но настройте яркость.
Установите 3 критических плагина для JS:
JavaScript (ES6) code snippets - куча сокращений (ввел clg → получил console.log()).
Prettier - сохранили файл, он сам расставил отступы и точки с запятыми.
Live Server — правый клик на HTML → "Open with Live Server" → страница обновляется сама при каждом сохранении.
Настройте автосохранение. Файл → Автосохранение (включить). Забыли нажать Ctrl+S? Не страшно.
Выучите 5 горячих клавиш (это изменит всё):
Ctrl + S - сохранить.
Ctrl + C / V - копировать/вставить.
Ctrl + Z / Y - отменить/вернуть.
Ctrl + D - выделить следующее такое же слово (волшебство).
Ctrl + / - закомментировать строку.

Всё. Этого хватит на первые 3 месяца обучения. Не превращайте изучение редактора в прокрастинацию. Лучше напишите свою первую функцию sum(a, b).

Часть 6. Опасные грабли: Чего не стоит делать

Гнаться за «модными» плагинами. Установить 50 плагинов легко. Потом редактор тормозит, конфликты, и вы не понимаете, откуда берется ошибка. Ставьте только то, что реально нужно сейчас.
Использовать онлайн-редактор для реальных проектов. Хранить код только в CodePen - потерять данные. Git + локальный редактор - стандарт индустрии.
Игнорировать линтеры. Если ESLint подчеркивает красным - не затирайте это. Он учит вас писать правильно. Читайте ошибку, гуглите, исправляйте.
Бояться терминала. Встроенный терминал редактора - друг. Научитесь запускать node script.js из него. Это быстрее, чем кликать мышкой.

-------------------------------------------------------------------------------

Консоль разработчика: Ваш личный детектор лжи, сканер и машина времени

Представьте, что вы хирург, которому сделали операцию... с завязанными глазами. Вы режете, шьете, но не видите, что происходит внутри. Примерно так чувствует себя веб-разработчик, который не использует консоль браузера.

А теперь представьте, что вам дали рентген, эндоскоп и пульт управления всем телом пациента. Это - консоль разработчика.

Эта статья не про то, как нажать F12 (это вы и сами знаете). Это про то, как превратить консоль из «странного окошка с красными ошибками» в ваш главный супер-инструмент. Мы разберем не только console.log(), а настоящие детективные техники, о которых молчат в туториалах.

Часть 1. Анатомия чуда: Из чего состоит консоль?

Когда вы нажимаете F12 (или Ctrl+Shift+I в Chrome, Cmd+Option+I в Mac), открываются Инструменты разработчика. А консоль - это одна из вкладок (обычно называется "Console").

Но консоль - это не просто лог ошибок. Это интерактивная среда выполнения кода. Вы можете прямо там писать JavaScript, и он выполнится мгновенно в контексте текущей страницы.

Проведите эксперимент прямо сейчас:

Откройте любую страницу (хоть эту статью).
Нажмите F12 → вкладка Console.
Напишите document.title и нажмите Enter.
Увидели заголовок страницы? Поздравляю, вы только что взломали (в хорошем смысле) эту страницу.

Теперь напишите document.body.style.backgroundColor = "purple". Enter. Страница стала фиолетовой? Добро пожаловать в мир божественного контроля.

Часть 2. console.log() - только начало. Что еще умеет console?

Все начинают с console.log('Hello') и останавливаются. А зря. У объекта console есть целый арсенал.

2.1. Уровни серьезности (не кричите на ошибки)

В консоли браузера эти строки будут разного цвета. warn - желтым, error - красным. Это помогает визуально сканировать лог. Не используйте console.error для обычных сообщений - вы приучите свой мозг игнорировать красный цвет.

2.2. Группировка (когда лог на 100500 строк)

Это превращает хаос в аккуратный отчет. Идеально для отладки сложных объектов.

2.3. Таблицы - ваши лучшие друзья

Забудьте про for для просмотра массивов объектов.

Вы увидите красивую таблицу с сортировкой по колонкам. Глаза скажут вам спасибо.

2.4. Тайминг (измеряем скорость)

Хотите узнать, какая функция быстрее?

Без костылей с Date.now().

2.5. След на стеке (где вы меня вызвали?)

Иногда console.log() показывает значение, но вы не помните, из какой строчки оно прилетело. Особенно если логов много.

console.trace("Я здесь!");

Консоль напечатает стек вызовов - цепочку функций, которая привела к этому моменту.

Часть 3. Магия: Консоль как REPL-среда

REPL (Read-Eval-Print Loop) — читай, вычисли, напечатай, повтори. Это как разговор с кодом.

Что можно делать в консоли:

Вычислять математику: 2 + 2 → 4.
Создавать переменные: let x = 10; (она живет, пока вы не обновите страницу).
Вызывать функции, которые есть на странице: Если на странице есть глобальная функция calculateTax(), вы можете ее вызвать.
Изменять DOM на лету: document.querySelector('h1').innerText = 'Новый заголовок!'.

Супер-фишка: Автодополнение. Начните печатать docu и нажмите Tab — консоль предложит document. Изучайте API прямо в браузере!

Секретная клавиша: Стрелка ↑ (вверх) вызывает последнюю выполненную команду. Не надо перепечатывать длинные строчки.

Часть 4. Живой дебаггинг: debugger и точки останова

console.log() - это круто, но представьте, что вы ловите момент, когда переменная становится undefined. Вы не знаете почему. Тут на сцену выходит debugger.

Как это работает:

Поставьте в коде строчку: debugger;
Откройте консоль (инструменты разработчика).
Обновите страницу.

Магия: Выполнение кода заморозится на этой строчке. Страница не дышит. Вы можете:

Навести мышкой на переменную - увидеть её значение.
Перейти на следующую строчку (F10).
Зайти внутрь функции (F11).
Посмотреть весь стек вызовов.

Это как нажать паузу в фильме и рассмотреть каждый кадр.

Точки останова без debugger

В вкладке Sources (Исходники) инструментов разработчика можно кликнуть на номер строки. Появится синий маркер - точка останова. Она сработает, даже если вы убрали debugger из кода. Это чище, потому что вы не засоряете код отладочными командами.

Часть 5. Практические детективные истории

История 1: Поймать неуловимый клик

Вы повесили обработчик на кнопку, но он не срабатывает. Почему?

Расследование в консоли:

Еще круче: В вкладке Elements выберите кнопку → в правой панели вкладка Event Listeners. Консоль покажет все обработчики на этом элементе.

История 2: Утечка памяти или кто тормозит?

Страница тормозит через минуту работы. Может быть, массив растет бесконтрольно?

console.log(massiveArray.length); // 1, 10, 1000, 100000...

А если хочется мониторить в реальном времени — используйте setInterval:

История 3: Стилизованный лог (да, можно и такое)

Хотите, чтобы ваше сообщение в консоли заметили?

Маркетологи так любят здороваться в консоли (загляните в консоль VK или Google - там пасхалки). Но и для дебага пригодится: выделите критический лог жирным красным.

Часть 6. Жизненные советы: Чего НЕ надо делать

Оставлять console.log в продакшене. Это как забыть дневник на парте. Во-первых, пользователь увидит (если откроет консоль) и подумает: «Какие у них там логи». Во-вторых, это замедляет работу (хоть и чуть-чуть). Есть линтеры, которые ругаются на console.log в коде перед коммитом.
Логировать пароли. Никогда. Даже для отладки. Вы отправите скриншот коллеге - и пароль утек.
Пытаться дебажить асинхронный код только через console.log. Там порядок выполнения может обмануть. Используйте debugger или точки останова.

Часть 7. Консоль как учебник: Изучаем JS на ходу

Хотите узнать, как работает Array.prototype.reduce? Не открывайте MDN (хотя MDN хорош). Откройте консоль и создайте массив:

А потом нажмите стрелку вверх и измените функцию. Экспериментируйте без страха. Страница не сломается, если вы напишете что-то не так. Консоль просто выдаст ошибку. Это идеальная песочница.