Я не новичок в отладке. Как новому разработчику мне часто приходится выполнять свой код в отладчике браузера. Для тех, кто не знаком, отладка включает в себя установку точек останова в коде, а затем паузу в этих точках, чтобы увидеть изменения в переменных или объектах. Цель состоит в том, чтобы точно определить, где вносится ошибка.

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

Тем не менее, в этом случае, когда я просмотрел отладчик, я не смог увидеть источник проблемы. Я решил попробовать более жестко запрограммированный метод отладки. Я добавил console.log () в код, в котором я видел ошибку, в надежде, что я найду ее источник.

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

Именно тогда я позвал свою живую резиновую утку *! Хорошо, ничего такого драматичного. Я застрял и сделал то, что должен делать каждый новый разработчик (а точнее, каждый застрявший разработчик): Я попросил помощи у коллеги.

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

Следующий час мы провели, возвращаясь к начатому мной процессу, медленно проходя через него и объясняя, что делает каждая функция. Удивительно, насколько проще отладка, когда у вас есть вторая пара глаз. Вместо того, чтобы самостоятельно прорабатывать то, что казалось бессвязным беспорядком, внимание моего коллеги и вопросы исследования помогли мне перейти от работы наугад к организованному процессу устранения.

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

Разрешение:

Самая большая ошибка, которую я сделал при отладке, заключалась в том, что ошибка была внесена в код во время преобразования необработанных данных. Это ошибка «нового разработчика», но оказалось, что я рекурсивно манипулировал данными после точки, в которой, как я предполагал, возникла ошибка. В конечном итоге виновником стало неправильное использование мной функции Lodash «слияние», которая,

«Рекурсивно объединяет собственные и унаследованные перечислимые строковые ключевые свойства исходных объектов в целевой объект».

-Lodash Документация

const dataIsMutated = _.merge(data, source);
const dataIsSafe = _.merge({}, data, source);

Рекурсивное «слияние» вызывало странные различия в отладке, которые я видел. Я случайно поставил точку останова до, что рекурсивная функция изменила мои данные. Таким образом, во время паузы я не видел мутации в отладчике. Когда я не использовал точку останова, в моих журналах отображалась ошибка, потому что данные были изменены путем «слияния».

Уроки:

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

Тайна:

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

// Shows mutated data object
console.log(data);
// Shows non-mutated property
console.log(data.property);
const dataIsMutated = _.merge(data, source);

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

9 октября 2017 г. - Тайна разгадана:

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

«Я думаю, что ответ на вашу загадку кроется в том, как работает console.log. Хотя консоль получает ссылки на объекты синхронно, свойства объекта не извлекаются, пока объект не будет развернут. В вашем случае первая инструкция console.log `console.log (data);` показывает измененные данные, потому что значения не извлекаются, пока они не будут развернуты вручную в окне консоли, после того, как мутация произошел. Во втором console.log `console.log (data.property);` вы напрямую регистрируете значение свойства, которое будет немедленно отображаться в окне консоли ». - Эван Лори