relddif – fiddler для macOS

на прошлом месте работы разработка фронтенда в 99% случаев происходила через подмену удаленных модулей на тестовых стендах файлами этих же модулей, но собранных локально

на windows есть fiddler с функционалом подмены ответа запроса. в нем указываем регулярку для url'ов файлов фронтенд модуля, путь до локально собранных файлов модуля и профит – видим на тестовом стенде локальные изменения

на маке, к сожалению, фиддлера с такой же функциональностью нет и одним из аналогов является mitmproxy. правда у mitmproxy нет пользовательского интерфейса и он запускается через терминал. флоу работы с mitmproxy выглядит так:

1. указываешь необходимые модули и стенды для подмены в словаре из скрипта для mitmproxy
2. запускаешь скрипт с mitmproxy через терминал
3. включаешь прокси через сетевые настройки мака или запускаешь bash скрипт, который делает то же самое

если хочешь отключить/включить подмену какого-то модуля или отключить/включить подмену на определенном стенде, необходимо:

1. вручную поправить словарик в скрипте
2. перезапустить mitmproxy

если работаешь дома то через проводное соединение, то через wifi, тогда при каждом переподключении необходимо:

1. зайти в сетевые настройки мака, переключить прокси с одного адаптера (wifi) на другой (ethernet)
2. перезапустить mitmproxy

всё это выглядит как куча ненужной ручной работы

поэтому я начал делать relddif – аналог виндоусовского фиддлера с необходимой функциональностью

прототипировал в блокнотике, потом перенес все в фигму

дизайнить и придумывать, как все будет выглядеть с точки зрения ui, не пришлось – создавал нужный пример в демках material ui, скринил и закидывал в фигму

фичи:

• включение/отключение подмены одной кнопкой
• добавление/удаление фронтенд модулей для подмены (указываешь название модуля и путь, где он расположен локально)
• включение/отключение подмены для конкретного модуля кликом на чекбокс
• добавление/удаление адресов стендов, на которых подменяются модули (например, pre-test.app.ru, test.app.ru, dev.app.ru и т.д.)
• включение/отключение подмены на конкретном стенде кликом на чекбокс
• переключение сетевого адаптера (wifi/ethernet/etc), на котором работает прокси с подменой

получившееся приложение:

front stack: react.js, typescript, material ui, react query, vite
back stack: express.js, mitmproxy

работает это так:

1. на время работы запускаются серверы фронта и бэка
2. фронт дергает бэкендовские ручки
3. бэкенд работает с mitmproxy и операционной системой, отдает на фронт результат

профит: мне как пользователю не надо работать с терминалом, текстовым редактором и сетевыми настройками мака, достаточно нажимать кнопочки в интерфейсе на http://localhost:5173