Конечно, вы можете использовать console.log, чтобы следить за своим JavaScript, но если вы действительно хотите знать, что происходит с вашим кодом, вам понадобится полноценный отладчик. И, конечно же, вам нужно знать, как им пользоваться. Вот почему я и мои коллеги из Mozilla добавили в Firefox DevTools Playground новый раздел, посвященный отладке.

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

Площадка для отладчика

Уроки совершенно бесплатные. Сначала загрузите код приложения с GitHub.

Эти уроки - новый формат для нас, и мы очень рады представить их вам. Мы всегда ищем новые способы помочь разработчикам узнать что-то новое и улучшить повседневный рабочий процесс. Если у вас есть идея, дайте нам знать. В ближайшие месяцы мы будем расширять Playground и будем рады услышать от таких разработчиков, как вы.

Если вы не знакомы с отладчиком Firefox, ознакомьтесь с документацией по отладчику на MDN и посмотрите это короткое вступительное видео:

Https://youtu.be/yueecwKDZxQ

А теперь давайте взглянем на урок, полученный на новой площадке отладчика. Вы когда-нибудь использовали console.log, чтобы найти значение переменной? Есть более простой и точный способ сделать это с помощью отладчика.

Используйте отладчик, чтобы найти значение переменной

В отладчике Firefox гораздо проще найти переменную, чем в console.log. Вот как это работает:

Давайте посмотрим на простое приложение с делами. Открыть список дел в новой вкладке.

В этом приложении есть функция с именем addTodo, которая принимает значение формы ввода, создает объект и затем помещает этот объект в массив задач. Давайте проверим это, добавив новую задачу. Вы ожидали, что эта новая задача будет добавлена ​​в список, но вместо этого вы увидите «[object HTMLInputElement]».

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

const addTodo = e => {
 e.preventDefault();
 const title = document.querySelector(".todo__input");
 console.log('title is: ', title);
 const todo = { title };
 console.log('todo is: ', todo');
items.push(todo);
 saveList();
 console.log(‘The updated to-do list is: ‘, items);
 document.querySelector(".todo__add").reset();
 };

Это может сработать, но это громоздко и неудобно. Мы также должны не забыть удалить эти строки после исправления кода. Есть гораздо лучший способ сделать это с помощью отладчика, используя так называемую точку останова ...

Узнайте больше на игровой площадке отладчика

Площадка отладчика охватывает основы использования отладчика Firefox, изучение стека вызовов, установку условных точек останова и многое другое. Мы знаем, что использование отладчика (и отладки JavaScript) требует сложного обучения, поэтому мы составили простое приложение, которое легко понять и расшифровать. Также полезно запустить в браузере, чтобы следить за происходящим в течение рабочего дня. Приложение доступно для скачивания на GitHub. Возьмите его и отправляйтесь на Игровую площадку, чтобы пройти там уроки.

Сообщите нам, что вы хотите увидеть дальше. Мы работаем над новыми уроками о новейших веб-технологиях и будем рады услышать от вас. Напишите в комментариях ниже.