Конечно, вы можете использовать console.log
, чтобы следить за своим JavaScript, но если вы действительно хотите знать, что происходит с вашим кодом, вам понадобится полноценный отладчик. И, конечно же, вам нужно знать, как им пользоваться. Вот почему я и мои коллеги из Mozilla добавили в Firefox DevTools Playground новый раздел, посвященный отладке.
Мы создали четыре основных урока, в которых отладчик Firefox используется для проверки и исправления простого приложения на JavaScript. Посмотрите их и дайте нам знать, что еще вы хотели бы увидеть на игровой площадке DevTools.
Площадка для отладчика
Уроки совершенно бесплатные. Сначала загрузите код приложения с GitHub.
Эти уроки - новый формат для нас, и мы очень рады представить их вам. Мы всегда ищем новые способы помочь разработчикам узнать что-то новое и улучшить повседневный рабочий процесс. Если у вас есть идея, дайте нам знать. В ближайшие месяцы мы будем расширять Playground и будем рады услышать от таких разработчиков, как вы.
Если вы не знакомы с отладчиком Firefox, ознакомьтесь с документацией по отладчику на MDN и посмотрите это короткое вступительное видео:
А теперь давайте взглянем на урок, полученный на новой площадке отладчика. Вы когда-нибудь использовали 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. Возьмите его и отправляйтесь на Игровую площадку, чтобы пройти там уроки.
Сообщите нам, что вы хотите увидеть дальше. Мы работаем над новыми уроками о новейших веб-технологиях и будем рады услышать от вас. Напишите в комментариях ниже.