Вы когда-нибудь хотели знать, как ваши изменения работают в продакшене, без фактического «развертывания в продакшн»?

Возможность удаленного редактирования кода может значительно сэкономить время, и я надеюсь, что эта статья поможет вам понять, почему. Используя такие инструменты, как Requestly, вы можете следовать своей процедуре отладки (добавлять журналы консоли и использовать точки останова) даже на сайтах, где у вас нет исходного кода!

Настройка всего

Во-первых, мы идентифицируем запрос для нашего удаленного ресурса. Для этого вы можете использовать вкладку Chrome Network. Найдите файл javascript или CSS, который вы хотите отладить. Нажмите на журнал запросов и скопируйте URL-адрес запроса, это пригодится позже.

У меня есть отладочная версия скрипта, обслуживаемая локально с использованием сервера Python. Вся идея удаленной отладки состоит в том, чтобы заменить удаленный файл локальным файлом. У меня есть скрипт запуска для adobe target, который я нашел на t-mobile.com, и я также разминифицировал его для удобства.

Теперь нам нужно будет обслуживать этот файл с локального сервера. Вы можете легко сделать это с помощью python или node. С python вы можете запустить следующую команду.

python3 -m http.server <port> --bind 127.0.0.1

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

Если вы еще этого не сделали, скачайте расширение Requestly для Chrome и создайте Правило перенаправления с помощью кнопки Создать правило на панели инструментов.

Для этого просто требуется простое правило перенаправления в Requestly. Нажмите Создать новое правило в правом верхнем углу и выберите Правило перенаправления.

В исходном URL-адресе вставьте исходный URL-адрес (тот, который вы ранее скопировали), а в месте назначения введите путь к локальному файлу, обслуживаемому с сервера Python.

Дайте вашему правилу имя и нажмите «Сохранить».

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

Начать отладку.

Теперь на вкладке сети, если вы ищете тот же запрос, он должен выглядеть примерно так

Это показывает, что правило сработало, и теперь вы получаете локальную версию этого файла. Но перед тем, как начать отлаживать свой сайт с помощью этого файла, убедитесь, что мы добавим простой журнал консоли.

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

Заключение

Теперь вы можете использовать все инструменты отладчика Chrome, такие как точки останова и трассировки стека, для отладки этого файла.

Если вы все еще не понимаете, как выполнять удаленную отладку с помощью Requestly, вот видео, которое поможет вам увидеть эти шаги в действии.

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

Если вы нашли это полезным, вот еще 5 способов использования Requestly для отладки ваших веб-приложений — https://requestly.io/blog/5-ways-to-make-debugging-easy/

Удачной отладки

Первоначально опубликовано на https://requestly.io.