Как найти участок проблемного кода если исходники не поддаются анализу?

Question

[Александр]

на одном из собеседований получил вопрос, на который до сих пор пока не нашел ответа.

Задача: я новый разраб в проекте, на проде есть баг, например изменился цвет какой-то кнопки.
Исходники по любым причинам (минифицированы или написаны максимально непонятно) не поддаются анализу.

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

Comments

[WbICHA]

Единственное, что приходит в голову, это пройтись дебаггером.
Впрочем, как это фиксить и почему исходников нет не очень понятно.

Answer 1

[dmitry-toster]

Как выявить то самое проблемное место в коде, где добавляется лишний класс к кнопке?

1. Брейкпоинтом браузера

Также можно отследить любые события и манипуляции с DOM
2. Поиск по коду проекта (искать по названию класса). В любой современной IDE это делается за пару секунд
3. Браузерным расширением фреймворка (если таковой используется). Которое покажет название компонента и его искать уже в исходниках проекта

Comments

[G F]

Про брейкпойнт на элементе не знал, спасибо)

Answer 2

[Яков Е]

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

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

Как верно заметил Василий Банников, если есть репозиторий, то там тоже можно делать бинарный поиск коммита, в котором всё сломалось, возможно там маленький diff.

Comments

[Александр]

про поиск в гите мне пока что больше всего нравится, спасибо

Answer 3

[Василий Банников]

Сдаётся мне, это вопрос на умение рассуждать => нужно задавать наводящие вопросы тому, кто этот вопрос задал, тк не достаточно информации.

Можно начать с поиска причины, почему в принципе кнопка стала красной - какой css класс сообщил ей, что она должна быть красной.

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

Answer 4

[Сергей delphinpro]

Если билд минифицирован и обфусцирован и нет карты, то соотнести проблемное место с исходником будет весьма проблематично.
Если только минификация, то определить место в исходнике можно по именам какиих-то глобальных переменных или функций.

А вообще-то, я считаю, правильный ответ — никак.
Если исходники есть, и билд является актуальным (не правленным отдельно от исходников), то следует включить sourcemaps и пересобрать проект. Далее анализ будет намного проще.
Если исходников нет, или использовать их нет возможности по другим причинам, то и соотносить проблемное место с исходником не имеет смысла.