Как изменить запрос в браузере
3) Можно ли при передаче http-запроса методом "POST" в теге данные передать не только в теле запроса, но и в URL-е (как происходит при методе "GET")?
4) Можно ли при передаче http-запроса методом "POST" в теге данные передать только в URL-е (как происходит при методе "GET"), но не передавать через тело запроса?
Куда мне это вбивать?
6) Можно ли часть сайта запросить у веб-сервера методом "GET", а остальное методом "POST"? Например, чтобы основная часть html-страницы запрашивалась методом "GET", а форма (тег "form") в ней методом "POST"?
Может я не совсем правильно сформулировал вопрос. Просто меня меня интересует принципиальная разница. Например, я создаю сайт. Я разве не сам задаю, каким методом будет обрабатываться мой запрос, GET или POST? В этом плане касаемо вопроса 2) Если я сам задаю метод, то я могу указать для сайта без формы метод "POST"? Или все же смысл метода "POST", как пишут в интернете, что данные методом "POST" передаются только при отправке формы в теле запроса, но не в URL-e и принимающий сервер просто не обработает такой запрос т.к. нет формы?
3 ответа 3
- Да.
- Да, но не штатными средствами браузера. Только если с помощью инструментов разработчика или другим HTTP-клиентом, коих великое множество во главе с curl . И уж точно не стоит ожидать, что ответ будет таким же, т. к. разные "методы" предполагают совершение с запрашиваемым ресурсом разных действий (обычно GET это чтение, а POST это добавление нового).
- Не совсем. Формально да, но поля, передаваемые в строке запроса, не могут в такой ситуации быть привязаны к полям формы, т. е. не могут быть изменены при пользовательском взаимодействии с веб-страницей (инструменты разработчика, конечно, могут всё). Что в action -атрибуте формы указано, то в строке запроса и уйдёт.
- Из п. 3 следует, что это должна быть форма без полей. Даже у кнопки отправки формы должен отсутствовать атрибут name , иначе она тоже будет считаться полем формы и её значение будет отправлено в теле запроса.
Я полагаю, что вы должны быть знакомы с браузером Chrome, так как это ближайший партнер разработчиков интерфейса. Мы можем использовать его для просмотра сетевых запросов, анализа производительности веб-страницы и отладки последних функций JavaScript.
В дополнение к этому, он также предоставляет множество мощных, но необычных функций, которые могут значительно повысить эффективность нашей разработки.
В нашей работе нам часто приходится отлаживать интерфейс с back-end разработчиками. Использование этой функции может повысить эффективность нашей стыковки.
Вам просто нужно сделать эти шаги:
Выберите вкладку Network
Щелкните правой кнопкой мыши и выберите Replay XHR
2. Быстро отправлять запросы в консоли
Вам просто нужно сделать эти шаги:
Выберите вкладку Network .
Выберите Copy затем Copy as fetch .
Измените входной параметр и отправьте его повторно.
3. Переменные JavaScript можно копировать
Это потрясающе. Вы можете скопировать сложные данные находящиеся в переменных, используя функцию Copy , предоставляемую браузером Chrome.
Примечание переводчика: также можно копировать JSON-объекты возвращаемые сервером (на вкладке Network -> Preview) если нажать правую кнопку мыши и copy object
4. Получить выбранный элемент DOM в консоли
Как мы можем вывести в консоль некоторые атрибуты (такие как ширина, высота, положение и т. д.) элемента DOM выбранного через панель «Элементы»?
Выберите элемент DOM через вкладку Elements .
Напишите в консоли $0 для доступа к элементу
5. Делайте полноразмерные скриншоты
Если мы хотим сделать скриншот всей страницы, состоящей из более чем одного экрана, браузер Chrome может сделать это легко?
Подготовьте содержимое страницы, которую вы хотите захватить
Откройте средства разработчика и нажмите комбинацию клавиш - на Windows/Unix Ctrl + Shift + P на MacOS CMD + Shift + P откроется консоль Command
Введите Сделать полноразмерный скриншот (если язык ОС английский, то Capture full size screenshot ) и нажмите Enter
А если мы хотим сделать скриншот части страницы, что нам делать?
Это также очень просто, просто введите «Сделать скриншот узла» (Capture node screenshot если ОС на англ.языке) на третьем шаге:
6. Разверните все дочерние узлы
Как развернуть все дочерние узлы элемента DOM одновременно, не выбирая их по одному? Вы можете использовать комбинацию клавиш «Alt + клик» на вкладке «Elements», чтобы развернуть все дочерние узлы сразу.
7. Используйте «$» для ссылки на результат последнего выполнения.
Давайте посмотрим на эту сцену: мы выполнили различные операции над строкой, а затем мы хотим узнать результат каждого шага, что нам делать?
Вы можете сделать что-то вроде этого
Более простой способ:
Используйте $ чтобы получить результат последней операции
8. Быстро переключайте цвета темы
Кому-то нравится белая тема Chrome, а кому-то черная. Мы можем использовать сочетания клавиш для быстрого переключения между двумя темами.
cmd + shift + p выполнить командную команду
Введите «Переключиться на темную тему» или «Переключиться на светлую тему», чтобы переключить тему.
Примечание от переводчика: светлая тема хороша когда на экран попадает много яркого света, например если Вы работаете на пляже в солнечный день
9. Используйте $ и $$ для быстрого выбора элементов DOM
Использование document.querySelector и document.querySelectorAll для выбора элементов текущей страницы в консоли является наиболее распространенным способом, но это слишком длинно, и мы можем использовать $ и $$ вместо этого (даже если на страницу не подключен JQuery):
10. Используйте $I, чтобы установить пакет npm в консоли.
Иногда я хочу использовать NPM-пакеты такие, как dayjs или lodash , но я не хочу заходить на официальный сайт, чтобы проверить это. Было бы неплохо, если бы мы могли попробовать это прямо на консоли, и мы можем!
$i('имя') установить пакет npm
11. Добавьте условную точку останова
Мы хотим приостановить выполнение кода, когда при переборе объекта столкнёмся с едой, которая называется 🍫 Как это сделать?
В случае больших объемов данных использование условных точек останова будет очень полезно для разработки и значительно повысит эффективность! Берите на вооружение.
Спасибо за внимание!
От переводчика: я случайно наткнулся на эту статью, и счёл её полезной для себя. Очень рад, если этот перевод кому то оказался полезным 🤠
Есть ли какие-либо расширения или функции в Chrome и / или Firefox, которые мне не хватает?
Сделайте AJAX-вызов в консоли Chrome. Расширение не требуется. Это хороший способ отправлять POST-запросы без необходимости получать файлы cookie для аутентификации. $.post('/resource/path/')
В то время как добавление необходимо, закрытие - чепуха. Он запрашивал функциональность в Chrome или Firefox, или если ему нужен плагин. То, что для этого может потребоваться указанный или неуказанный плагин, не имеет значения
Пост закрыт некорректно. Он не просит инструмента, но для функциональности в инструментах, с которыми автор уже работает. Таким образом, мы должны закрыть все вопросы о том, как сделать то или иное на каком-либо инструменте - и это будет хорошая десятая часть SO.
Я заметил эту функцию в Firefox, когда вы открываете вкладку сети и выбираете случайный запрос, который вы можете Edit and Resend сделать, что довольно круто.
Я делал приложение для Chrome под названием Postman для такого рода вещей. Все остальные расширения выглядели немного устаревшими, поэтому я сделал их самостоятельно. Он также имеет множество других функций, которые были полезны для документирования нашего собственного API здесь.
Почтальон теперь также имеет собственные приложения (то есть автономные) для Windows, Mac и Linux! Сейчас предпочтительнее использовать нативные приложения, читайте больше здесь .
При использовании POST в Postman добавьте свои ключи и значения в тело после выбора x-www-form-urlencoded. @Abhivav Я просто хочу сказать спасибо за отличное приложение. Работает очень хорошо при тестировании RESTful.
Убедитесь, что вы также установили плагин-перехватчик Postman, если хотите использовать куки браузера.
Я с удовольствием читаю этот пост спустя 9 лет и думаю, как почтальон станет неотъемлемой частью жизни разработчиков. Спасибо @Abhinav и команде за его разработку.
CURL УДИВИТЕЛЬНО делать то, что вы хотите! Это простой, но эффективный инструмент командной строки.
Остальные реализации тестовых команд:
Я голосую за это, хотя это неправильный ответ на вопрос: это то, что мне нужно было знать вместо этого.
Это не работает для меня, я не могу использовать одинарные кавычки на OSX с zsh и bash, оболочка переходит в quote> режим. Мне нужно использовать -d "
Fire Fox
Эта функция нарушена для кого-то еще? При редактировании параметров в поле «Строка запроса» после изменения одного символа он отказывается изменять запрос дальше. Единственный способ сделать это помимо этого - отредактировать весь URL / запрос (что сложно, потому что все вместе)
@Coldblackice Можете ли вы опубликовать скриншот или проблемный регистратор шагов? Я могу редактировать строку запроса просто отлично. Чтобы добавить новую строку запроса, я использую & = или просто начинаю новую строку. Чтобы редактировать, измените отдельные k, v или я просто удалите и начните все сначала.
Если вам нужно поле для строки запроса ( ?key=value ), где вы можете вводить пары значений ключа построчно, просто добавьте a ? и букву в URL поле вверху, и Query String поле отобразится.
Если вы настаиваете на расширении браузера, то:
Хром :
Firefox :
@akostadinov Я не могу использовать аддон тестирования ресурсов в Mozilla, инструмент не отображается (даже после установки и перезапуска) под инструментами разработчика в последней версии Firefox.
Только что попробовал REST Easy. Деинсталлируется на месте: интерфейс слишком сильно держит руки и заставляет пользователя использовать жесткие сценарии использования. Не подходит для разработки API.
Перепробовал все предложенное выше для Firefox, но не нашел ничего более удобного, чем Postman для Chrome . REST Easy , кстати, не обрабатывает пустые ответы.
Будучи очень вдохновленным Postman для Chrome , я решил написать нечто подобное для Firefox.
REST Easy * - это перезапускаемое дополнение Firefox, целью которого является максимально возможный контроль над запросами. Надстройка все еще находится в экспериментальном состоянии (она еще даже не проверялась Mozilla), но разработка идет неплохо.
Кажется приятным, но не имеет возможности полностью контролировать тело запроса. В настоящее время он предлагает возможности «ключ / значение», но полный контроль над телом поста был бы неплохим.
@Pacerier: это функция, над которой я сейчас работаю, и она завершена примерно на 90%. Надеюсь, он выйдет до конца года. Похоже, существует отставание в получении аддонов, одобренных Mozilla.
После месяца ожидания новая версия была одобрена. Поддержка PUT и DELETE прибыла! И в этом месяце я также внес множество других новых изменений, которые скоро появятся в следующем выпуске. (Надеюсь, на этот раз он будет одобрен раньше.)
с формой, просто установите method для "post"
Т.е. создайте себе очень простую страницу, чтобы проверить действия поста.
Я искал способ изменить запрос XHR, сделанный в моем браузере, а затем воспроизвести его снова. Скажем, у меня есть полный запрос POST, сделанный в моем браузере, и единственное, что я хочу изменить, - это небольшое значение, а затем воспроизвести его снова. Это было бы намного проще и быстрее сделать прямо в браузере.
Я немного погуглил и не нашел способа сделать это в Chrome или Firefox. Есть ли способ сделать это в одном из этих браузеров или, может быть, в другом?
Если вы приземлились здесь после того, как поняли, что «Replay XHR» не работает в Chrome, обратите внимание, что в случаях с OPTIONS запросами preflight ( ) вам нужно нажимать «replay» на предполетном запросе, а не на самом окончательном запросе.
Хром:
- На панели Network инструментов разработчика щелкните правой кнопкой мыши и выберите Копировать как cURL.
- Вставьте / отредактируйте запрос, а затем отправьте его с терминала, если у вас есть curl команда
Fire Fox :
Firefox позволяет редактировать и повторно отправлять XHR прямо из панели «Сеть». Снимок ниже взят из Firefox 36:
Это может быть то, что я ищу. Я знал, что могу скопировать вызов cURL, но не мог запустить его напрямую с терминала, так как я буду аутентифицирован. Но с терминалом, встроенным непосредственно в Chorme, я бы предположил, что вызов осуществляется «внутри» браузера. Если так, то это должно заключить сделку.
Небольшая хитрость: если вы хотите увидеть вывод cURL в браузере, запустите его в CLI, как это, а curl . > preview.html затем откройте файл в браузере.
@afilina, чтобы еще больше автоматизировать этот процесс, вы можете добавить && open preview.html на macOS, и файл открывается сразу после запроса
В версии 67 Chrome теперь имеет функцию копирования как выборки :
Копировать как выборку
Щелкните правой кнопкой мыши сетевой запрос, затем выберите Копировать> Копировать как выборку, чтобы скопировать fetch() эквивалентный код этого запроса в буфер обмена.
Разница в том, что Copy as cURL также будет включать все заголовки запроса (например, Cookie и Accept) и подходит для воспроизведения запроса вне Chrome. fetch() Код подходит для воспроизведения внутри одного и того же браузера.
Спасибо тебе за это. Для всех, кому интересно - вы можете просто вставить fetch команду прямо в консоль Chrome и воспроизвести запрос.
Вы можете использовать следующее после выборки, чтобы разрешить обещание, возвращаемое выборкой, и просмотреть тело ответа (при условии, что это JSON) .then(r => r.json()).then(json => console.log(json))
@ Джош Ли, я думаю, что советы по POSIX-совместимости были хорошими и могут быть добавлены к этому ответу.
Есть ли расширение или функциональность в Chrome и/или Firefox, которые мне не хватает?
ОТВЕТЫ
Ответ 1
Я делаю приложение Chrome под названием Postman для этого типа вещей. Все остальные расширения казались немного устаревшими, поэтому я сделал свой собственный. Он также имеет множество других функций, которые были полезны для документирования нашего собственного API здесь.
Postman теперь также имеет родные приложения (то есть автономно) для Windows, Mac и Linux! Теперь лучше использовать собственные приложения, более подробно здесь.
Ответ 2
CURL УДИВИТЕЛЬНО делать то, что вы хотите! Это простой, но эффективный инструмент командной строки.
Остальные реализации тестовых команд:
Ответ 3
Если вы настаиваете на расширении браузера, то:
Хром:
Firefox:
Ответ 4
Fire Fox
РЕДАКТИРОВАТЬ: Добавлено изображение.
Ответ 5
Будучи очень вдохновленным Postman для Chrome, я решил написать что-то подобное для Firefox.
REST Easy * - это перезагружаемое дополнение Firefox, которое предназначено для обеспечения максимально возможного контроля над запросами. Дополнение все еще находится в экспериментальном состоянии (оно еще не было просмотрено Mozilla), но развитие идет хорошо.
Ответ 6
Это немного уродливо, но есть расширение Простой клиент REST для Chrome.
Это отлично работает для меня - помните, что вы все равно можете использовать отладчик с ним. Панель "Сеть" особенно полезна; он предоставит вам предоставленные объекты JSON и страницы ошибок.
Ответ 7
с формой, просто установите method в "post"
т.е. создайте себе очень простую страницу для проверки действий после публикации.
Ответ 8
Для firefox есть также расширение, называемое RESTClient, которое довольно приятно:
Ответ 9
Может не иметь прямого отношения к браузерам, но Fiddler - еще одно хорошее программное обеспечение.
Ответ 10
Читайте также: