🎉💖✨ Сообщения об ошибках отличные!

Я давно думал, что сообщения об ошибках не должны быть красными по умолчанию – они должны быть радужными цветами и наполнены смайликами 😍 Почему? Потому что сообщения об ошибках замечательны! Они обычно полезны, и они также означают, что есть интересная работа 👩‍ 💻

Честно говоря, потребовалось немного времени, чтобы почувствовать сообщения об ошибках. Как я это сделал? Я создал структурированный процесс отладки 🐛 Если вы чувствуете себя подавленным, когда ваш код бросает сообщение об ошибке, или вы паникуете каждый раз, когда тест не пройдет, тогда попробуйте этот двухэтапный подход к поиску и разрешению ошибок.

1. 🔎 Найти точную строку, генерирующую ошибку

Иногда вы можете сделать это, просто прочитав сообщение об ошибке, иногда вам нужно начать копать немного глубже (второй шаг может помочь с этим).

Например:

var example = new Example()
Uncaught ReferenceError: Example is not defined
    at :1:15

Это сообщение об ошибке говорит нам о том, что ошибка в строке 1. Когда вы видите сообщение об ошибке, потратьте некоторое время, чтобы внимательно прочитать его и отметьте всю полезную информацию, которую она включает. Сделайте это, пока не сможете с первого взгляда на поиски следующей информации:

• Тип ошибки
• Точная линия, создавая ошибку

Есть другая полезная информация в сообщениях об ошибках, но этого достаточно, чтобы начать отладку. Как только вы приблизитесь к источнику ошибки, вы готовы к шагу 2.

2. 👀 Посмотрите, что происходит в коде

У всех нас есть несколько предположений о коде, над которым мы работаем, на следующем этапе протестируется эти предположения, видя, что на самом деле происходит!

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

Например, этот код в настоящее время нарушен, и сообщение об ошибке не выбрасывается:

var fizzbuzz = function(num) {
    if (num % 3 == 0) {
        return 'fizz';
    } else if (num % 5 == 0) {
        return 'buzz';
    } else if (num % 15 == 0) {
      return 'fizzbuzz';
    } else {
      return num
    }
}

Функция не возвращает Fizzbuzz Когда я прохожу в число, которое делится на 15. Поскольку нет сообщения об ошибке, я собираюсь использовать Консоль.log Чтобы увидеть, что происходит в коде

Вот код снова, с некоторыми полезными Консоль.log заявления:

var fizzbuzz = function(num) {
    if (num % 3 == 0) {
        console.log(num, 'is divisible by 3');
        return 'fizz';
    } else if (num % 5 == 0) {
        console.log(num, 'is divisible by 5');
        return 'buzz';
    } else if (num % 15 == 0) {
      console.log(num, 'is divisible by 15');
      return 'fizzbuzz';
    } else {
      console.log(num, 'is not divisible by 3 or 5');
      return num
    }
}

Теперь, когда я запускаю функцию и передаю 15, я вижу этот вывод:

fizzbuzz(15);
15 "is divisible by 3"
"fizz"

Это показывает мне, что, поскольку число, которые делятся на 15, делится как на 3, так и 5, код никогда не доходит до второго иначе, если условие. Теперь я знаю, что мне нужно изменить порядок условных проверок.

Помимо регистрации параметров и переменных, вы также можете регистрировать различные части кода. Например:

var fizzbuzz = function(num) {
    console.log('remainder of dividing by 3:', num % 3);
    if (num % 3 == 0) {
        return 'fizz';
    } else if (num % 5 == 0) {
        return 'buzz';
    } else if (num % 15 == 0) {
      return 'fizzbuzz';
    } else {
      return num
    }
}

Это Консоль.log Помогает нам понять условные проверки.

Попробуйте зарегистрировать разные части кода и посмотрите, что они показывают вам.

Вывод

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

Иногда у вас может быть несколько ошибок в коде, поэтому вам нужно повторить этот процесс, пока они не решены!

Оригинал: “https://dev.to/sophg/error-messages-are-great-4nhb”