Hacer solicitudes HTTP usando las herramientas de desarrollador de Chrome

¿Hay alguna manera de hacer una solicitud HTTP usando las herramientas de desarrollador de Chrome sin usar un complemento como POSTER?

Dado que la API de Fetch es compatible con Chrome (y la mayoría de los otros navegadores), ahora es bastante fácil hacer solicitudes HTTP desde la consola de devtools.

Para OBTENER un archivo JSON, por ejemplo:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(console.log)

O para PUBLICAR un nuevo recurso:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
})
.then(res => res.json())
.then(console.log)

Chrome Devtools también es compatible con la nueva sintaxis asíncrona / espera (aunque esperar normalmente solo se puede usar dentro de una función asíncrona):

const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
console.log(await response.json())

Tenga en cuenta que sus solicitudes estarán sujetas a la política del mismo origen , al igual que cualquier otra solicitud HTTP en el navegador, por lo tanto, evite las solicitudes de origen cruzado o asegúrese de que el servidor establezca encabezados CORS que permitan su solicitud.

Usando un complemento (respuesta anterior)

Además de las sugerencias publicadas anteriormente, he encontrado que el complemento Postman para Chrome funciona muy bien. Le permite establecer encabezados y parámetros de URL, usar autenticación HTTP, guardar solicitudes que ejecuta con frecuencia, etc.

Si desea editar y volver a emitir una solicitud que ha capturado en la pestaña Red de Herramientas para desarrolladores de Chrome:

• Haga clic derecho en Namela solicitud
• Seleccione Copy > Copy as cURL
• Pegar en la línea de comando (el comando incluye cookies y encabezados)
• Edite la solicitud según sea necesario y ejecútela

Lo sé, publicación anterior ... pero podría ser útil dejar esto aquí.

Los navegadores modernos ahora son compatibles con la API Fetch .

Puedes usarlo así:

fetch("<url>")
    .then(data => data.json()) // could be .text() or .blob() depending on the data you are expecting
    .then(console.log); // print your data

ps: realizará todas las comprobaciones CORS, ya que es una mejora XmlHttpRequest.

Si su página web tiene jquery en su página, puede hacerlo escribiendo en la consola de desarrolladores de Chrome:

$.get(
    "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + data);
    }
);

¡Es una forma jquery de hacerlo!

Ampliando en @dhfsk respuesta

Aquí está mi flujo de trabajo

1. Desde Chrome DevTools, haga clic con el botón derecho en la solicitud que desea manipular> Copy as cURL

2. Cartero abierto

3. Haga clic Importen la esquina superior izquierda y luegoPaste Raw Text

Si desea hacer una POST desde el mismo dominio, siempre puede insertar un formulario en el DOM utilizando las herramientas de desarrollador y enviar que:

Tuve la mejor suerte combinando dos de las respuestas anteriores. Navegue al sitio en Chrome, luego busque la solicitud en la pestaña Red de DevTools. Haga clic derecho en la solicitud y Copiar, pero Copiar como recuperación en lugar de cURL. Puede pegar el código de búsqueda directamente en la consola de DevTools y editarlo, en lugar de usar la línea de comando.

Para OBTENER solicitudes con encabezados, use este formato.

   fetch('http://example.com', {
      method: 'GET',
      headers: new Headers({
               'Content-Type': 'application/json',
               'someheader': 'headervalue'
               })
    })
    .then(res => res.json())
    .then(console.log)

si usa jquery en su sitio web, puede usar algo como esto en su consola

$.post(
    'dom/data-home.php',
    {
    type : "home", id : "0"
    },function(data){
        console.log(data)
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

En pocas palabras, si desea que la solicitud use el mismo contexto de navegación que la página que ya está viendo, en la consola de Chrome simplemente haga lo siguiente:

window.location="https://www.example.com";