Compartir a través de

Inspección de solicitudes y respuestas mediante Chrome DevTools

De un vistazo
Objetivo: Ver solicitudes en Chrome DevTools
Tiempo: 5 minutos
Plugins:DevToolsPlugin
Requisitos previos:Configuración del proxy de desarrollo

De forma predeterminada, el proxy de desarrollo muestra sus mensajes en la línea de comandos. Si usa Dev Proxy con una aplicación que emite muchas solicitudes, es difícil encontrar los mensajes que le interesan. Además, es posible que quiera inspeccionar las solicitudes y respuestas interceptadas por el proxy de desarrollo.

Para facilitar la búsqueda de los mensajes que le interesan, use el DevToolsPlugin complemento para mostrar mensajes de Proxy de desarrollo en Chrome DevTools.

Sugerencia

El proxy de desarrollo admite el uso de Chrome DevTools con Microsoft Edge, Microsoft Edge Dev y Google Chrome.

DevToolsPlugin expone los mensajes del Proxy de desarrollo y la información sobre las solicitudes y respuestas interceptadas en Chrome DevTools.

Captura de pantalla de Microsoft Edge con herramientas de desarrollo que muestran mensajes de Proxy de desarrollo.

Captura de pantalla de Microsoft Edge con herramientas de desarrollo que muestran las solicitudes y respuestas interceptadas por el proxy de desarrollo.

Para usar Chrome DevTools con proxy de desarrollo:

  1. Abra el archivo devproxyrc.json almacenado en el directorio de instalación del proxy de desarrollo. También puede usar el comando devproxy config open.

  2. Habilite el DevToolsPlugin complemento y agregue la devTools sección de configuración. Los valores admitidos preferredBrowser son: Edge, EdgeDev, Chrome.

    El archivo completo devproxyrc.json tiene el siguiente aspecto:

    Archivo: devproxyrc.json

    {
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/rc.schema.json",
  "plugins": [
    {
      "name": "DevToolsPlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll",
      "configSection": "devTools"
    }
  ],
  "devTools": {
    "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/devtoolsplugin.schema.json",
    "preferredBrowser": "Edge"
  }
}

  3. Guarde el archivo devproxyrc.json e inicie el proxy de desarrollo.

Consulte también

  • Last updated on