Автор оригинала: FreeCodeCamp Community Member.
Приянка Гарг
Моя предполагаемая аудитория для этого руководства является начинающим программистам. Вы узнаете о отладке без расстройства с помощью инструментов Chrome Dev.
Уважаемый новичок, какое-то время назад я был там, где ты! После многих борьбы, я чувствую, что я далеко в моем обучении. В настоящее время я нахожусь на старшей фазе погруженного Bootcamp, где я строю полный стек.
Каждый день я учусь и наткнуться на так много вещей, которые я хотел, чтобы я раньше знал. Эта статья является попыткой поделиться одной такой идеей, которая облегчает вашу жизнь.
Как вы, должно быть, выучили, лучший способ изучить программирование. Теперь, когда вы начинаете практиковать кодирование, иногда (или большую часть времени) ваш код не будет работать; Другими словами, в вашем коде будет ошибка. И вы, возможно, уже попробовали и узнали некоторые подходы к отладке. Эта статья не о каком-либо одном подходе отладки, а скорее установка для отладки вашего кода для практики программирования.
Если вы практикуете в онлайн-среде разработки, скорее всего, у вас есть настройка, в которой у вас есть редактор, проблема и тестовый набор, который тестирует вашу программу.
Вы написали код, и есть некоторые ошибки, и в какой-то момент ошибки, выброшенные тестовым набором, не очень полезны.
Я не буду уточнить, насколько утомительная отладка может стать здесь – скорее позвольте мне прыгать прямо к некоторым советам для начинающих.
Эта проблема
В качестве примера я пишу Palindrome Checker в редакторе FreeCodeCamp. Мое решение терпит неудачу. В этом случае мы могли бы использовать результаты тестовых наборов для отладки.
Но давайте предположим, что этот тестовый люкс не дает мне больших указателей на точную ошибку. (Это не может быть идеальным примером в терминах логической ошибки. Дело в том, что вы столкнетесь с проблемами, где тестовый набор не будет напрямую указывать на логическую ошибку.)
Совет: используйте консоль инструментов разработчика.
Я запускаю тот же код в консоли с помощью сбоя теста, и я вижу, что он возвращает «undefined». Это означает, что код не вернул никакого значения. Я могу быстро видеть, что я забыл вернуть «True», если бы строка была найдена палиндром.
Это была очень простая ошибка. В большинстве случаев у вас будут ошибки, которые нуждаются в вас для изучения ваших переменных. Один подход к проверке переменных – это console.log (
Тем не менее, я бы предложил вам использовать Dev Tools Debugger вместо. В вашей программе вы можете указать точку, где вы хотите начать получать помощь от отладчика.
Отладчик покажет вам все переменные в стеке вызовов и позволит вам выйти через вызовы функций, которые вы найдете очень полезны.
Вы получите повешение использования отладчика, как только вы использовали его несколько раз. Обратите внимание на стрелки в левом нижнем углу? Это позволит вам контролировать поток программы и показать вам переменные, когда они меняются.
Теперь давайте отправимся на трюк.
Хитрость: Сделайте личную установку отладки
Как видно выше, с отладчиком и консолью, мы можем легко идентифицировать проблемы. Тем не менее, если я хочу снова запустить исправленную программу на консоли только одной линейкой изменения, я должен был бы повторно ввести ее.
Даже после этого я получаю ошибку:
Эта ошибка заключается в том, что я использовал функцию стрелки и не могу повторно объявить const. Это означает, что мне придется открыть новую вкладку и новую консоль каждый раз, когда я меняю свой код. Дополнительные накладные расходы, верно?
Давайте найдем обходной путь. В вашей системе создайте каталог и компакт-диск в этот каталог.
Теперь создайте два файла: index.js и index.html. Введите следующий HTML в Index.html:
Теперь переместите свой код из консоли на index.js. Обратите внимание, что я начал отладчик на линии 2 в коде.
Теперь запустите файл index.html в браузере. Откройте инструменты разработчика или консоль (вам, возможно, придется обновить, чтобы увидеть отладчик). Вы можете отладить свой код здесь.
Теперь каждый раз, когда вы делаете изменение в Index.js, вы просто нажали обновления на этой вкладке и кода Reruns. Нет необходимости закрывать и открывать вкладки, не вписывающие все программы.
Держите папку, которую вы только что создали удобную. Всякий раз, когда вам нужно попробовать или отладить кусок кода, высказать, что в index.js и эксперимент !!
Закрытие мыслей
Если вы уже знали это, поздравляю, вы потратили впустую ценные 4 минуты;)
Наконец, помните человеку свойственно ошибаться! Не беспокойтесь об ошибках – они научат вас самым ценным уроками программирования … а затем … Ой! Места, которые вы пойдете …
Оригинал: “https://www.freecodecamp.org/news/debugging-javascript-for-beginners-5d4ac15dd1cd/”