Моя целевая аудитория для этого учебника - начинающие программисты. Вы узнаете о простой отладке с помощью инструментов Chrome для разработчиков.

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

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

Как вы, должно быть, уже поняли, лучший способ научиться программированию - это делать. Теперь, когда вы начнете практиковаться в кодировании, иногда (или в большинстве случаев) ваш код не работает; другими словами, в вашем коде будет ОШИБКА. И вы, возможно, уже пробовали и изучили некоторые подходы к отладке. Эта статья не о каком-либо одном подходе к отладке, а скорее о настройке для отладки вашего кода для практики программирования.

Если вы практикуетесь в среде онлайн-разработки, скорее всего, у вас есть установка, в которой есть редактор, проблема и набор тестов, который тестирует вашу программу.

Вы написали код, и в нем есть некоторые ошибки, и в какой-то момент ошибки, выдаваемые набором тестов, не очень полезны.

Я не буду вдаваться в подробности о том, насколько утомительной может стать отладка - скорее позвольте сразу перейти к нескольким советам для новичков.

Эта проблема

В качестве примера я пишу средство проверки палиндрома в редакторе FreeCodeCamp. Мое решение терпит неудачу. В этом случае мы могли бы использовать результаты набора тестов для отладки.

Но давайте предположим, что этот набор тестов не дает мне точных указателей на точную ошибку. (Возможно, это не идеальный пример с точки зрения логической ошибки. Дело в том, что вы столкнетесь с проблемами, когда набор тестов не будет напрямую указывать на логическую ошибку.)

Совет. Используйте консоль инструментов разработчика.

Я запускаю тот же код в консоли с неудачным тестовым примером и вижу, что он возвращает «undefined». Это означает, что код не вернул никакого значения. Я быстро вижу, что забыл вернуть «истину», если строка оказалась палиндромом.

Это была очень простая ошибка. В большинстве случаев у вас будут ошибки, требующие проверки ваших переменных. Один из подходов к проверке переменных - это открыть в программе console.log (‹variables›).

Однако я бы посоветовал вам использовать вместо этого отладчик инструментов разработчика. В своей программе вы можете указать точку, с которой вы хотите начать получать помощь от отладчика.

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

Вы научитесь пользоваться отладчиком после того, как воспользуетесь им несколько раз. Обратите внимание на стрелки в нижнем левом поле? Это позволит вам управлять ходом программы и показывать переменные по мере их изменения.

А теперь давайте попробуем.

Уловка: сделайте персональную настройку отладки

Как видно выше, с помощью отладчика и консоли мы можем легко определить проблемы. Однако, если я хочу снова запустить исправленную программу на консоли, изменив всего одну строку, мне придется перепечатать ее.

Даже после этого я получаю сообщение об ошибке:

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

Давайте найдем обходной путь. В вашей системе создайте каталог и cd в этот каталог.

Теперь создайте два файла: index.js и index.html. Введите следующий HTML-код в index.html:

Теперь переместите свой код из консоли в index.js. Обратите внимание, я запустил отладчик в строке 2 кода.

Теперь запустите файл index.html в браузере. Откройте инструменты разработчика или консоль (возможно, вам придется обновить, чтобы увидеть отладчик). Здесь вы можете отладить свой код.

Теперь каждый раз, когда вы вносите изменения в index.js, вы просто нажимаете «Обновить» на этой вкладке, и код запускается повторно. Не нужно закрывать и открывать вкладки, не набирать целые программы заново.

Держите только что созданную папку под рукой. Всякий раз, когда вам нужно попробовать или отладить фрагмент кода, вставьте его в index.js и поэкспериментируйте !!

Заключительные мысли

Если вы уже знали это, поздравляю, вы потратили ценные 4 минуты;)

Наконец, помните, что ошибаться - это человек! Не беспокойтесь об ошибках - они преподают вам самые ценные уроки программирования ... а затем ... О! куда вы пойдете…