Инструмент для отладки ререндеров Vue: как знание «компонент перерисовался» ломает прод

Автор поднимает известную боль фронтенд-разработки: инструменты вроде Vue DevTools с галкой «Highlight updates» и react-scan лишь показывают факт перерисовки компонента, но не отвечают на главный вопрос — что именно изменилось и почему это привело к ререндеру. Знание «компонент перерисовался» само по себе почти бесполезно, ведь визуально дёрганье страницы и так заметно.

В статье описывается попытка написать собственный инструмент для Vue, который должен закрыть этот пробел и дать разработчику причинно-следственную картину обновлений. По ходу повествования автор трижды ломает чужой прод — что делает материал не только техническим, но и честным рассказом о цене экспериментов на живых системах.

Для инженеров, работающих с производительностью Vue-приложений, это полезный кейс о том, как устроена диагностика ререндеров и какие подводные камни ждут при построении собственного тулинга. Подробности и код — на Хабре.