Автор оригинала: Johnny B. (Ionică Bizău).
Наша работа как разработчики – это сломать и исправить вещи каждый день. Иногда некоторые из нас даже делают это на производственных серверах. Но во время чрезвычайных ситуаций они просто склонны применять Быстрое исправление Что на самом деле не может починить все, на самом деле, это даже хуже.
В некоторые дни это работает! Но это все еще очень опасно:
Это хороший пример исправления ошибки на производстве с счастливым концом. [источник]
Эти вещи случаются. Но когда они делают, как мы можем решить эти проблемы с уверенностью и наилучшим образом возможным?
В этой этой статье я покажу вам 7 Общие Шаги, чтобы исправить свой веб-сайт, приложение или код, когда он сломан.
1. Не паникуйте. Расслабиться.
Мы все люди. Мы совершаем ошибки. Когда что-то сломано, не вносят вклад в беспорядок, паникую. Попробуйте сначала успокоить, прежде чем делать что-либо с ним. Попробуйте выпить стакан воды и расслабиться, пытаясь понять, что происходит. Помните, сначала подумайте, прежде чем код!
2. воспроизвести проблему. Затем воспроизведите это локально.
Предположим, что веб-сайт у вас возникла проблема, касается производства, и пользователи начинают жаловаться на определенную функциональность.
Не работает недостаточно. Попросите своих пользователей определить, что не работает средства. Есть ли ошибка? Каковы шаги воспроизведения выпуска? Это происходит всегда?
Можете ли вы воспроизвести ошибку на веб-сайте производства? Если да, то попробуйте воспроизвести его локально (или в вашей среде разработки). Если вы сделаете это, однако, вы должны быть готовы к отладке. Если вы не можете воспроизвести его на месте, проверьте настройки/ресурсы специфики машины. Вот несколько:
- Содержание базы данных : Может быть, ошибка появляется только в конкретном документе, который существует на производстве, но у вас нет его локально.
- Конфигурация окружающей среды Может быть, есть некоторая переменная среды или настройка, необходимая для изменения.
- Убедитесь, что вы синхронизируете с кодом производства сервера (включая версии зависимостей).
Но это работает на моей машине!
Ну, если вы не можете воспроизвести его на производстве, существует высокая вероятность того, что это конкретная проблема браузера. Например, может быть, вы использовали функцию, которая не существует на какой-то старой версии Internet Explorer, или, возможно, вы отправили свой код ES2015 напрямую, не транспортируя его до ES5. В этом случае, если это все еще неясно, что происходит, спросите дополнительную информацию: где появляется проблема? Какая операционная система и какой браузер (включая их версии) они используют?
Если вы используете те же версии ОС и браузера, попросите их очистить кеш браузера, затем повторите попытку. Кроме того, вы также должны очистить Ваш собственный Кэш браузера и повторите попытку.
Ах, да! Опечатки!
Перед началом воспроизведения проблемы и отладка фактического кода убедитесь, что ваши входные данные верны. Вы не можете ожидать правильного вывода, если ваш вход неверный (DUH?).
Иногда просто уставившись в коде/URL-адреса/входное содержимое, вы можете легко исправить вещи. Как разработчики, мы часто тратим много времени отладки материала, которые Выглядит правильно Но оказывается опечатками в конце. И тогда мы как:
После того, как потратить много времени, пытаясь исправить опечатки.
Итак, обратите внимание на опечатки. Они смешно исправить, но разработчики часто забывают думать об этом Ну, может быть, это просто опечатка Отказ
3. Найдите ошибку. Сервер или клиент?
Сегодняшние браузеры есть вещь называется Инструменты разработчика Отказ Обычно ты Щелкните правой кнопкой мыши на странице, а затем выберите Проверять элемент (или просто осматривать ) в меню.
Я всегда чувствовал себя более комфортно в инструментах разработчика Chrome, но путем отладочного кода, специфичного браузера в других браузерах, я узнал, как использовать отладчик на других браузерах (Firefox, Safari, Internet Explorer и т. Д.). Не волнуйтесь, они очень похожи.
Как только вы откроете инструменты разработчика, вы увидите вкладку под названием Консоль Отказ Нажмите на нее.
Стоп Вот как это выглядит на Facebook.com. Facebook и другие популярные веб-сайты добавляют четкие сообщения, предоставляющие людям запустить фрагменты JavaScript, скопированные из разных источников. Но мы разработчики! Мы должны использовать этот инструмент для отладки наших приложений.
Итак, после того, как вы откроете консоль браузера, проверьте, есть ли там какие-либо ошибки.
Например, давайте предположим, что у нас есть следующий фрагмент:
function foo () {
undefined.baz;
}
function bar () {
foo();
}
bar();
При выполнении этого, очевидно, мы получим ошибку. Консоль покажет нам, почему:
Не может прочитать свойство ‘BAZ’ undefined
Нажав на значок треугольника ошибки, мы расширим ошибку и смотрите стек вызова. Первая ссылка – это именно то место, где появляется ошибка. Нажав на Scripts.js: 2 Мы откроем Script.js Файл в инструментах разработчика, и мы увидим, что ошибка приходит, потому что мы пытались получить доступ к Баз Собственность undefined Отказ Подобная ошибка появится, если мы попытаемся сделать null.baz Отказ
Стек вызовов полезен. Возможно, в конкретных случаях функция бросает ошибку, потому что мы передаем неверные данные к нему. В этом случае нам не интересно исправить функцию (первый в стеке), но место, где мы отправляем данные.
Давайте возьмем еще один пример. Следующий код имеет ошибку в этом Отказ
// We have a function which receives the user object
// and returns the email field
function getEmail (user) {
return user.email;
}
// This function is asynchronous and fetches a fake user
function loadUser (cb) {
// Do it asynchronously, simulating a database call
setTimeout(function() {
cb(null, {
email: "foo@bar.com"
});
}, 1000);
}
// Here we want to get the email
var email = getEmail(loadUser());
Давайте посмотрим, как мы можем отладить это. Просто посмотрев на консоль, мы видим два ошибки:
Всегда пытайтесь решить ошибки в том порядке, в котором они появляются (если вы действительно не знаете, что ошибка появляется из-за конкретной причины, и вы просто игнорируете ее).
В этом случае ошибка исходит от Script.js: 2 : Не удается прочитать свойство «Email» undefined Отказ На линии два у нас есть user.email Отказ Так как Пользователь является параметром, отправленным из другой функции (в основном из главного скрипта), мы заинтересованы, чтобы увидеть, откуда это происходит. В стеке вызовов у нас есть эта информация: (Анонимная функция) @ Script.js: 14 (Вторая строка в стеке вызовов первой ошибки).
На линии 14, у нас есть var (loaduser ()); Отказ Это означает, что мы отправляем то, что LoadUser () Возврат звонка. Глядя на LoadUser Определение, мы видим, что функция ничего не возвращает. Но он принимает функцию обратного вызова (аргумент CB ) – это в настоящее время undefined Потому что мы не просив его в LoadUser () вызов.
Вместо этого мы должны сделать:
loadUser(function (email) {
// Do something with the email
alert(email);
});
После применения этого вторая ошибка будет исчезнет (поскольку мы передаем функцию).
Надеюсь, вы получите некоторые первоначальные идеи о том, как вы можете осмотреть сторону клиента для ошибок, исходящих из клиентского кода.
Ошибка приходит с сервера?
Если вы делаете не У вас есть ошибка клиента, которая похожа на тот, который я написал выше, может быть, проблема приходит с сервера. В таких случаях вы можете:
- Получите 500 ответ (который появится в консоли)
- Получить неправильные данные с сервера, который интерпретируется неправильно на клиенте
- Не получить ответ вообще
Затем, как только вы откроете инструменты разработчика, вы увидите вкладку под названием Сеть Отказ Нажмите на нее.
Похоже, в хроме
В Сеть Вкладка мы можем увидеть все запросы, которые сделаны.
Кончик! Используя инструменты разработчика Chrome, вы можете отключить кэш, когда окно «Инструменты разработчика открыты» (обратите внимание на флажок в верхнем центре). Firefox имеет аналогичный флажок.
Теперь попробуйте воспроизвести ошибку, в то время как окно инструментов разработчика открыто. После открытия его обновите страницу, а затем следуйте шагам, чтобы воспроизвести проблему. Следите за вкладкой сети.
Есть ли новые запросы?
Проверить для В ожидании и ответы ошибок (они цветные красные).
В этих случаях вы не можете решить проблему на стороне клиента – вам нужно изменить код, который способствует серверу.
Есть разные языки для создания сайта, но я собираюсь показать вам быстрый способ отладить код Node.js, поскольку он является популярным языком для сторон сервера (JavaScript на стороне сервера).
4. Отладка Node.js.
Многие из нас используют терминал (это черное окно, где вы можете войти в команды, которые выполняются компьютером).
Мы запускаем сценарии Node.js, используя Узел