Взлом скриптов с живого сайта с помощью ChromeDev Tools для локального разработчика
Попытка создать более простой рабочий процесс dev-test-prod для моего клиентского разработчика, где у меня нет опции для сайта разработчика.
У меня есть живой сайт, на котором у меня есть доступ только для добавления скриптов в HEAD через интерфейс на основе браузера (например, Wordpress/Shopify/etc). Используя эту опцию, я смог развернуть работающие клиентские приложения, добавив ссылки на пакеты JavaScript (созданные с помощью webpack4), которые я размещаю в CDN, которым я управляю (с включенным CORS). Там нет разработки сайта. Когда я хочу внести изменения в приложение, я внедряю эти изменения в тестирование на производстве. Чтобы не нарушать изменения для моих пользователей, я итеративно делаю очень незначительные изменения, чтобы быстро откатываться.
То, что я хотел бы сделать, - это найти способ изменить только мой опыт, чтобы я просто перехватывал запросы к определенным файлам JS при использовании живого сайта.
Я попытался использовать локальную рабочую область и функцию автономных файлов Chrome, но у меня возникают проблемы, при которых сгенерированные в веб-пакете файлы JS не могут загружаться из моей локальной среды с ошибками CORS. Однако другие скрипты загружаются просто отлично.
В частности: у меня есть три файла: alpha.js, beta.bundle.js и charlie.bundle.js... последние два представляют собой пакеты веб-пакетов, файл "alpha" представляет собой простой файл JS, который выполняет код в глобальной области видимости (это похоже на то, что делает скрипт Google Analytics). Все три размещены и загружены из одного CDN. Я могу без проблем использовать автономные файлы Chrome и перехватывать alpha.js, но пакеты beta и charlie сообщают о проблемах CORS.
Два вопроса: (1) почему пакеты веб-пакетов вызывают проблемы с CORS, а файл alpha.js - нет; (2) есть ли лучший вариант для достижения моих целей (без создания сайта разработчика, который не является вариант)?
1 ответ
Местные переопределения должны делать свое дело.
Посмотрите другой ответ о переполнении стека, где я объясняю, как настроить переопределения и как они работают.
Как только вы включите переопределения, вы захотите alpha.js, beta.bundle.js а также charlie.bundle.js в вашу папку переопределений. Я думаю, что путь к файлам должен совпадать с путями, указанными в продукции.