Иногда вам не нужен отладчик, чтобы выяснить, что не так.
В чем разница между опытным программистом и новичком? Опытный чаще использует операторы печати. И в то же время начинающему программисту нужен console.log в JavaScript (или echo в PHP, printf в C… вы поняли) больше, чем опытному программисту. Вот почему.
Просто зарегистрируйте это
Если бы я мог дать начинающим программистам один совет, я бы научился отлаживать. Нет, на самом деле отладка - это важный навык, который может повлиять на всю вашу карьеру. И я сейчас даже не говорю об отладчиках или установке точек останова; есть один универсальный совет, который настолько прост, что многие новички просто игнорируют его. Когда что-то не работает, не пытайтесь угадать, что не так. Вместо этого просто зарегистрируйте это.
Ведение журнала - самый простой способ найти ошибку. Его можно использовать на любом языке программирования с минимальными настройками и без дополнительных инструментов. Лучшая часть? Это поможет вам понять, как на самом деле работают ваши программы. И это просто делает вас лучшим разработчиком, способным исправить собственный беспорядок, когда это необходимо. Отладчики - это круто, но знание того, как использовать простой оператор печати, - это первый шаг к тому, чтобы стать разработчиком. Это также сэкономит вам часы разочарования, особенно если вы научитесь самостоятельно.
Отладка в React: простой пример
Возьмем простой пример из Открытого курса Fullstack, где в console.log исправляют приложение React.
Примечание. Когда вы используете команду console.log для отладки в JavaScript, не связывайте вещи «в стиле Java» с плюсом.
Вместо того, чтобы писать:
console.log('props value is' + props)записывать:
console.log('props value is', props)Первый оператор может привести к некоторым бесполезным результатам, таким как [Object object], в то время как во втором примере содержимое объекта выводится на консоль разработчика в виде информативных строк.
Всегда держите консоль разработчика открытой в браузере рядом с веб-страницей. Вкладка Console , в частности, всегда должна быть видна.
Если и когда ваш код не компилируется и ваш браузер становится опасно красным:
Сделайте глубокий вдох и не пытайтесь писать больше кода, чтобы исправить это. Это не поможет, никогда не поможет. Вместо этого ваша цель - остановить и решить проблему немедленно. Обычно есть три основных способа использовать console.log:
- Если вы не знаете, где что-то ломается, добавьте в код несколько операторов console.log. Вначале console.log («1»), затем «2» и так далее. У вас может быть идея, где что-то пошло не так, поэтому напишите больше заявлений. Если приложение печатает «1», но не «2», проблема где-то посередине. У тебя есть идея.
- На скриншоте выше мы видим, где именно возникла проблема. Он на линии 48, да. Отсюда нам решать, была ли это опечатка или мы передаем неправильный параметр. Опечатки легко исправить (и это именно то, что там происходит). Но что, если что-то не так с передаваемой переменной или параметрами?
- Когда вы точно знаете, что это не опечатка и что проблема возникает в определенном месте, самое время занести в console.log все, что мы пытаемся распечатать, передать или использовать.
Здесь, например, мы отлаживаем компонент React с помощью console.log. Если вы не знаете React, относитесь к нему как к функции JavaScript. Опечаток нет, мы точно знаем, где программа ломается, поэтому может быть что-то не так с используемыми переменными. Что внутри них?
Начнем с вывода его переменных на консоль. В этом примере мы должны сначала преобразовать нашу функцию в менее компактную форму и получить весь объект props (наш параметр) без его деструктуризации:
Это немедленно покажет, был ли, например, один из атрибутов написан с ошибкой или не включен. Простой!
Вход в консоль - далеко не единственный способ отладки приложений React. Вы можете приостановить выполнение кода приложения в отладчике консоли разработчика Chrome, написав команду debugger в любом месте вашего кода. Но вопрос не в том, как пользоваться отладчиком. Дело в том, чтобы напомнить новичкам, как недооцененные, но эффективные операторы печати могут спасти положение. У вас может не быть возможности использовать отладчик на другом языке программирования, но у вас всегда будет старый добрый оператор печати. Распечатка всего также поможет вам думать, как ваша программа, и ответить на такие вопросы, как:
- Что называется первым?
- Что мне передать этой функции?
- Что возвращает эта функция?
- Куда мне идти дальше?
Методы ›Инструменты
Мне грустно, что многие учебники по программированию для начинающих пропускают этот важный шаг. Поэтому, когда новичок сталкивается со своей первой ошибкой, он приходит в ужас. Учебник по кодированию продолжается и продолжается, и той же ошибки нигде не видно. Что пошло не так? Разочарованный новичок снова начинает смотреть видео и проверяет каждого персонажа; гуглит ошибку, создает свой первый пост на Stack Overflow. Через 5 часов он замечает опечатку.
Вы не поверите, но базовое понимание того, как отлаживать ваше приложение, может иметь решающее значение. Новички часто уделяют больше внимания инструментам, чем методам, и попадают в ловушку под названием «для этого есть приложение!». Это правда, что многие вещи уже существуют и упрощены до такой степени, что некоторые разработчики понятия не имеют, как они работают под капотом. Но иногда, особенно когда вы только учитесь, хорошо отложить инструменты на секунду и отладить вручную, как это делали программисты в течение многих лет.
Если вам понравилась эта история, вам также может понравиться членство Medium. Это всего 5 долларов в месяц (цена чашки кофе!), Но это даст вам неограниченный доступ к рассказам, поддерживая ваших любимых писателей. Если вы зарегистрируетесь по этой ссылке, я получу небольшую комиссию. Спасибо!
