google-chrome - peticiones - chrome extensions

Realización de solicitudes HTTP con las herramientas de desarrollo de Chrome

Question

¿Hay alguna manera de realizar una solicitud HTTP utilizando las herramientas de desarrollo de Chrome sin usar un complemento como POSTER?

Answer 1

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

Para buscar un archivo JSON, por ejemplo:

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

Chrome Devtools en realidad también es compatible con la nueva sintaxis async / await (aunque normalmente solo se puede utilizar en 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 misma política de 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 los encabezados CORS que permiten su solicitud.

Usando un plugin (respuesta anterior)

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

Answer 2

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

Los navegadores modernos ahora admiten la API de obtención .

Puedes usarlo así:

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

obs: Hará todas las comprobaciones CORS, ya que es una XmlHttpRequest mejorada.

Answer 3

Manteniéndolo simple, 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";

Answer 4

Si desea editar y volver a enviar una solicitud que ha capturado en la pestaña Red de herramientas de desarrollo de Chrome:

• Haga clic derecho en el Name de la solicitud
• Seleccione Copy as cURL
• Pegue en la línea de comando (el comando incluye cookies y encabezados)
• Editar solicitud según sea necesario y ejecutar

Answer 5

Si desea realizar una POST desde el mismo dominio, siempre puede insertar un formulario en el DOM utilizando las herramientas de desarrollo y enviar eso:

Answer 6

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);
    }
);

¡Su manera diferente de hacerlo!

Answer 7

Todas fueron respuestas útiles, solo quería agregar una herramienta que me pareció bastante útil Advanced Rest Client .

Usar esto puede ayudar a ahorrar mucho tiempo en el largo plazo si uno va a hacer múltiples solicitudes de API.

Answer 8

si usa jquery en su sitio web, puede usar algo como esto 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>