Я предполагал, что будет много хромированного расширения для мониторинга HTTP-запросов от вызовов AJAX, но эти немногие нашли, такие как Chrome Chrome Postman InterClex, кажется, только захватывает только запрос, а не от ответ. Несмотря на то, что Chrome devtools имеет сетевую вкладку, трудно поделиться этими захваченными трассами HTTP с товарищами по команде.
Наши инженеры на Moesif Разделите обязанности между передней и задней частью, поэтому мы постоянно должны копировать/вставлять заголовки HTTP и полезную нагрузку JSON из Devtools в электронную почту или расслаиваться при отладке проблем API. Отправка мульти-мегабайта * .har files через слабину так же громоздким. В дополнение к нелегко поделиться, осматривая HTTP-трафик в Chrome devtools не идеально, потому что нет простого способа отфильтровать вызовы API или проверять полезные нагрузки JSON. Вкладка «Сеть» предназначена для традиционных веб-сайтов HTML, а не современных одностраничных приложений и API, которые возвращают JSON.
Благодаря этому времени мы решили построить Chrome расширение Чтобы сделать захват и отладки этих запросов AJAX (и ответы) с любого самого веб-сайта. Расширение предназначено для API для отдыха, таких как те, которые питает одностраничные приложения. Тем не менее, некоторое обезьяненное дело было необходимо для захвата, которые пошли вокруг API-хромированного расширения из-за ограничений в API Chrome.
Вопросы с подходом WebRequest
Chrome WebRequest API является частью хромированного набора API.
Первоначально я посмотрел на API на WebRequest Chrome для захвата вызовов API с вкладки с открытым браузером. Мы используем эти API раньше для наших CORS и Origin Changer Отказ Казалось, было самым естественным местом для захвата данных.
Тем не менее, мы столкнулись с ошибкой, где API WebRequest не раскрывает интерфейс для чтения тела ответа. Смотрите проблему Здесь на хроме.
Хотя мы были удивлены отсутствием отклика, мы теперь понимаем возможную причину, почему большинство других расширений не захватывают ответы. Наше требование было захватить ответ, чтобы их можно было поделиться с членами команды. Без ответов отладки были бы болезненными и разрешением проблемы будут медленными.
Слушатели событий XMLHTTPREQUEST
С XMLHTTPREQUEST Используется всеми браузерами для вызовов AJAX, я использую это, чтобы отслеживать вызовы API через Patching Monkey.
Есть несколько слушателей XMLHTTTPREESEST для подключения:
- loadstart.
- прогресс
- прервать
- ошибка
- нагрузка
- время ожидания
- переход
- ReadyStateChange
Из обратных вызовов слушателя я могу получить цель события, которая является сама объекта XMLHTTPREQUEST. Глядя на документацию API XMLHTTPREQUEST, я понял, что она имеет точную противоположную проблему как API WebRequest. Объект имеет интерфейсы, чтобы получить ответ HTTP, но не оригинальный запрос. Есть setrequestheers () , но нет метода Getter для пары с ним, чтобы получить заголовки запроса HTTP. На самом деле, у него даже нет публичного метода или имущества, чтобы получить оригинальный URL или путь.
XMLHTTPREQUEST Обезьяна Патч.
Чтобы по-настоящему следить за всеми данными (I.E. Запросить заголовки/заголовки/тело и ответа/тело/тело), мне придется обезьяна. Патч обезьян позволяет нам регистрировать данные.
Ключевые методы исправления
Открыть ()Этот метод вызывается всякий раз, когда инициирован новый вызов AJAX, который я могу затем захватить метод и URL.setrequesthever ()Этот метод называется, когда заголовок запроса установлен. Я могу исправить его, чтобы каждый раз, когда этот метод называется, я спасаю заголовки как хеш.Отправить() Этот метод используется для отправки данных как часть запроса. Я могу захватить тело запроса из этого патча.
Теперь я могу просто добавить addeventListener ('load', событие) Для захвата данных ответа.
Есть несколько ресурсов в Интернете, например Эта статья Объясняя, как обезьяна.
Среда выполнения
С кодом готов к патчению обезьян, мы должны выполнить его. Chrome Extension Tabs API имеет метод для выполнения кода: executeScript () Отказ Тем не менее, код выполнен executeScript () выполняется в другом контексте, чем код на веб-странице, где сделаны вызовы AJAX. Это означает, что Bonkey Patch не будет иметь никакого эффекта на открытом веб-сайте.
Чтобы узнать больше о том, как работает казнь среда, см. Это Видео на сценариях контента Отказ
Решение: вводящий скрипт
Благодаря изолированному контексту, мне пришлось сделать другой подход к успешному обезьяне. Я должен был использовать Chrome.tabs.executeScript () создать