Редактировать и воспроизводить XHR chrome / firefox и т. Д.?

152

Я искал способ изменить запрос XHR, сделанный в моем браузере, а затем воспроизвести его снова. Скажем, у меня есть полный запрос POST, сделанный в моем браузере, и единственное, что я хочу изменить, - это небольшое значение, а затем воспроизвести его снова. Это было бы намного проще и быстрее сделать прямо в браузере.

Я немного погуглил и не нашел способа сделать это в Chrome или Firefox. Есть ли способ сделать это в одном из этих браузеров или, может быть, в другом?

Madsobel
источник
Если вы приземлились здесь после того, как поняли, что «Replay XHR» не работает в Chrome, обратите внимание, что в случаях с OPTIONSзапросами preflight ( ) вам нужно нажимать «replay» на предполетном запросе, а не на самом окончательном запросе.
Джанака Бандара

Ответы:

197

Хром:

  • На панели Network инструментов разработчика щелкните правой кнопкой мыши и выберите Копировать как cURL.
  • Вставьте / отредактируйте запрос, а затем отправьте его с терминала, если у вас есть curlкоманда

Смотрите захват:

введите описание изображения здесь

В качестве альтернативы, и в случае, если вам нужно отправить запрос в контексте веб-страницы , выберите «Копировать как выборку» и отредактируйте-отправьте контент с панели консоли javascript.


Fire Fox :

Firefox позволяет редактировать и повторно отправлять XHR прямо из панели «Сеть». Снимок ниже взят из Firefox 36:

введите описание изображения здесь

Майкл П. Базос
источник
2
Это может быть то, что я ищу. Я знал, что могу скопировать вызов cURL, но не мог запустить его напрямую с терминала, так как я буду аутентифицирован. Но с терминалом, встроенным непосредственно в Chorme, я бы предположил, что вызов осуществляется «внутри» браузера. Если так, то это должно заключить сделку.
madsobel
15
Я добавил информацию о Firefox в ответ
Майкл П. Базос
Небольшая хитрость: если вы хотите увидеть вывод cURL в браузере, запустите его в CLI, как это, а curl ... > preview.htmlзатем откройте файл в браузере.
Афилина
@afilina, чтобы еще больше автоматизировать этот процесс, вы можете добавить && open preview.htmlна macOS, и файл открывается сразу после запроса
CodeBrauer
3
В этом случае Firefox работает намного лучше!
jpenna
49

В версии 67 Chrome теперь имеет функцию копирования как выборки :

Копировать как выборку

Щелкните правой кнопкой мыши сетевой запрос, затем выберите Копировать> Копировать как выборку, чтобы скопировать fetch()эквивалентный код этого запроса в буфер обмена.

https://developers.google.com/web/updates/2018/04/devtools#fetch

Пример вывода:

fetch("https://stackoverflow.com/posts/validate-body", {
  credentials: "include",
  headers: {},
  referrer: "https://stackoverflow.com/",
  referrerPolicy: "origin",
  body:
    "body=Chrome+now+has+_Copy+as+fetch_+in+version+67%3A%0A%0A%3E+Copy+as+fetch%0ARight-click+a+network+request+then+select+**Copy+%3E+Copy+As+Fetch**+to+copy+the+%60fetch()%60-equivalent+code+for+that+request+to+your+clipboard.%0A%0A&oldBody=&isQuestion=false",
  method: "POST",
  mode: "cors"
});

Разница в том, что Copy as cURL также будет включать все заголовки запроса (например, Cookie и Accept) и подходит для воспроизведения запроса вне Chrome. fetch()Код подходит для воспроизведения внутри одного и того же браузера.

Джош Ли
источник
11
Спасибо тебе за это. Для всех, кому интересно - вы можете просто вставить fetchкоманду прямо в консоль Chrome и воспроизвести запрос.
Эрик Кигати
9
Вы можете использовать следующее после выборки, чтобы разрешить обещание, возвращаемое выборкой, и просмотреть тело ответа (при условии, что это JSON).then(r => r.json()).then(json => console.log(json))
POSIX-совместимый
1
@ Джош Ли, я думаю, что советы по POSIX-совместимости были хорошими и могут быть добавлены к этому ответу.
Nabi KAZ
@ POSIX-совместимые хорошие советы, есть ли команда поменьше, о которой я мог бы помнить ?!
Nabi KAZ
Для тех, кто
задается
22

Мои два предложения:

  1. Плагин Chrome Postman + плагин Postman Interceptor . Дополнительная информация: Почтальон, захват документов с запросами

  2. Если вы используете Windows, то вам подойдет Telerik's Fiddler. У него есть опция композитора для воспроизведения HTTP-запросов, и это бесплатно.

zszep
источник
8
С тех пор, как я начал использовать Postman + Chrome-расширение Interceptor, мне не понадобился Fiddler.
threadster 03
3
Приложение FYI Postman для Chrome теперь устарело, и настроить его в автономной версии немного сложнее
yefrem
4

Для Firefox проблема решилась сама собой. В нем реализована функция «Редактировать и повторно отправить».

Для Chrome Tamper расширение, похоже, помогает.

Яри ​​Туркиа
источник
Которая больше не обновляется и имеет довольно плохие отзывы. Лучшая альтернатива - использовать Firefox для такой работы imo.
T3rm1
Да уж. Ситуация с повторной отправкой меняется довольно быстро. Теперь в Chrome есть Resend-for XHR-запросы, но он не позволяет редактировать.
Яри ​​Туркиа
остерегайтесь Firefox версии 76, у которой, похоже, есть проблема с CSRF-токеном в файлах cookie при редактировании и повторной отправке. Пробовал с версией 37, она работала хорошо, но с версией 76 есть проблема с проверкой токена CSRF.
puppyceceyoyo,
2

Прошло 5 лет, и разработчики Chrome не проигнорировали это важное требование.
Хотя они не предлагают никакого метода редактирования данных, как в Firefox, они предлагают полное воспроизведение XHR.
Это позволяет отлаживать вызовы ajax. «Replay XHR» повторит всю передачу.
введите описание изображения здесь

Джон
источник
0

Как упоминалось выше, есть несколько способов сделать это, но, по моему опыту, лучший способ манипулировать запросом XHR и повторной отправкой - использовать инструменты chrome dev для копирования запроса как запроса cURL (щелкните правой кнопкой мыши запрос на вкладке сети ) и просто импортировать в приложение Postman (гигантская кнопка импорта в верхнем левом углу).

Quinlo
источник
0

Не нужно устанавливать сторонние расширения!

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

введите описание изображения здесь

Для дальнейших инструкций просмотрите страницу github.

Т. Тодуа
источник
0

Edge на основе Microsoft Chromium поддерживает запросы «Редактировать и воспроизводить» на вкладке «Сеть» в качестве экспериментальной функции:

введите описание изображения здесь

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

Арик
источник
Спасибо за то, что поделился этим. К вашему сведению, это все еще экспериментальная функция. Вам нужно будет включить эксперимент, перейдя по этой ссылке: Включить экспериментальные функции
gimp3695