Первая часть: знакомство с отладчиком Часто console.log используют, чтобы узнать значение переменной. Есть способ проще и удобнее. Откройте приложение со списком дел в новой вкладке, там же откройте отладчик. Эта версия специально сломана, чтобы мы попрактиковались в отладке. В файле app.js вы найдёте функцию addTodo. Она превращает введённый в <input> текст в объект с данными. Полученный объект кладёт в массив, где хранятся все дела пользователя. Попробуйте ввести в поле какую-нибудь задачу и добавить её в список дел. Наверняка вы ждали, что ваша задача окажется среди других, но вместо неё там . Если ваша задача звучала не как «[object HTMLInputElement]», в чём я сомневаюсь, что-то пошло не так. Давайте искать ошибку. Первым делом захочется всё «законсолить», расставив по коду console.log: Не поддавайтесь соблазну! Способ рабочий, но с лишними телодвижениями: сперва нужно расставить console.log, после не забыть их убрать. Есть способ проще и удобнее — точки останова в отладчике. Точка останова — сигнал отладчику, что в этом месте вы желаете поставить на паузу выполнение кода. И в момент этой остановки значения переменных будут зафиксированы, а все операции приостановлены. В отладчике, в области предпросмотра файла app.js поставьте на 13-й строке точку останова. Для этого кликните по номеру строки. Появится синий флажок — знак точки останова: Снова попробуйте ввести в поле какую-нибудь задачу и добавить её в список. Не закрывая отладчик! Из-за точки останова выполнение кода приостановится внутри функции addTodo на 13-й строке. До выполнения кода самой строки. Мы хотим понять, почему в список дел не попадает введённый в <input> текст. Для этого отследим значения переменных title и todo. Сделать это можно несколькими способами: На вкладке «Консоль». Здесь в момент остановки будут доступны переменные из области видимости прерванной функции. Поэтому вы можете просто ввести в консоль имя нужной переменной, нажать Enter и узнать её значение. С помощью курсора. Значение переменной также можно узнать, если в момент остановки навести курсор на неё в области предпросмотра. Давайте узнаем, какие свойства и методы есть у объекта document, для этого наведём на него курсор: В области видимости на панели инструментов. В этом блоке вы можете увидеть все доступные значения на момент остановки. Первой в списке будет область видимости прерванной функции со всеми переменными: Независимо от выбранного способа вы столкнётесь с ма-а-аленькой проблемой: значения переменных title и todo ещё не определены. Дело в том, что выполнение кода приостановилось на 13-й строке, а присваивание значений этим переменным происходит позже. И нам нужно продолжить выполнение кода, пока мы не дойдём до строк 14 и 15. Для этого на панели инструментов есть кнопки навигации: Что зачем нужно: Возобновить-приостановить, чтобы приостанавливать или возобновлять выполнение кода в процессе отладки. Если иконка «треугольная», как в видеоплеере, значит выполнение кода приостановлено. Независимо от того, нажали вы на кнопку или сработала точка останова. Если нажать на кнопку с треугольником, выполнение программы продолжится до следующей точки останова. Если больше точек останова нет, то до конца. Перешагнуть через, чтобы выполнить код на текущей строке и перейти к следующей. Зайти в, чтобы выполнить код на текущей строке и «провалиться» внутрь него. Работает, если на текущей строке есть вызов функции, в которую можно «провалиться». Если вызова нет, поведение аналогично «Перешагнуть через». Выйти из, чтобы выполнить код функции до конца, и «подняться» обратно. Работает, если в текущую функцию вы ранее «провалились». Иначе, поведение аналогично «Перешагнуть через». Мы сфокусируемся на кнопке «Перешагнуть через» или по-человечески — кнопке построчного выполнения кода. И не важно, что это за код. Если это простая операция, вроде сложения, она будет выполнена целиком. Если это вызов функции, он тоже будет выполнен целиком. В этом главное отличие от кнопки «Зайти в», нажатие на которую позволяет «провалиться» в функцию вместо её вызова целиком. Но не будем уходить в сторону. Зачем и когда нужна кнопка «Зайти в», мы разберём в следующей статье. Итак, после остановки нажмите один раз кнопку «Перешагнуть через». Выполнение кода всё ещё приостановлено, но уже на 14-й строке. Предыдущая строка, 13-я, была выполнена. Однако значение переменных всё ещё не определено, потому что остановка происходит до выполнения кода самой строки. Нажимаем «Перешагнуть через» ещё раз, и... 14-я строка теперь тоже выполнена! Значит переменной title было присвоено значение. И мы можем навести на неё курсор и узнать, какое: Теперь, когда мы можем узнать значение title, проблема очевидна. Вместо введённого текста в переменную записывается ссылка на DOM-элемент <input>. Целый объект свойств и методов! Но если мы изучим структуру этого объекта, то найдём нужное нам свойство с введённым текстом — это value. Останется только изменить код, добавив в строку: обращение к свойству value: Когда ошибка будет исправлена, можно удалить точку останова, кликнув по номеру строки с синим флажком, и возобновить выполнение кода, нажав кнопку с треугольником. Но исправления уже за рамками нашей статьи... У нас и так много новой информации. Для её закрепления рекомендуем самостоятельно добавить несколько точек останова в приложение и погулять туда-сюда по коду с помощью кнопок навигации. Набить руку. Это только основы отладчика. Но стоит с ними разобраться, и вы сами увидите, насколько удобнее пользоваться отладчиком вместо console.log. А когда будете готовы, переходите к следующей части, где мы продолжим изучать возможности отладчика Firefox DevTools. Значение переменных можно также отслеживать в блоке «Выражения для отслеживания» на панели инструментов. Для этого кликните в блоке по иконке с плюсом и впишите имя переменной, за которой хотите следить. В нашем случае это будут две переменные: title и todo. Установим за ними слежку. После поставим точку останова всё на той же 13-й строке. Теперь попробуем добавить задачу в список дел, чтобы вызвать функцию addTodo и в итоге приостановить выполнение кода. После начнём построчно выполнять код. Как только переменной, за которой стоит слежка, присвоится значение, мы увидим его в блоке «Выражения для отслеживания». И не нужно наводить курсор или печатать что-то в консоль браузера. Третья часть: стек вызововЧетвёртая часть: точки останова с условием Фронтенд-разработчик