DevToolsPlugin

Expone mensajes de Proxy de desarrollo e información sobre las solicitudes y respuestas interceptadas en Chrome DevTools. Admite solicitudes HTTP y comunicación STDIO.

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.

Ejemplo de configuración

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v4.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/v4.0.0/devtoolsplugin.schema.json",
    "preferredBrowser": "Edge"
  }
}

Propiedades de configuración

Propiedad Descripción Predeterminado
preferredBrowser Explorador que se va a usar para iniciar Dev Tools. Valores admitidos: Edge, EdgeDev, Chrome Edge
port Puerto en el que el complemento escucha las conexiones de DevTools. 0 elige un puerto disponible aleatorio. Use un puerto fijo cuando necesite publicarlo, por ejemplo, al ejecutar proxy de desarrollo en un contenedor. 0
launchBrowser Indica si se va a iniciar el explorador con Herramientas de desarrollo. Cuando false, el complemento no inicia un explorador y registra la dirección URL de Las herramientas de desarrollo en su lugar, que se abre en Microsoft Edge o Google Chrome usted mismo. true

Opciones de línea de comandos

Ninguno

Observaciones

El complemento escucha las conexiones de Dev Tools en la dirección IP que usa el proxy de desarrollo, que se establece mediante la --ip-address opción . Cuando se 0.0.0.0 establece en o ::, el complemento escucha todas las interfaces y la dirección URL de Las herramientas de desarrollo apunta a 127.0.0.1. En Windows, la escucha en todas las interfaces requiere derechos de administrador o una ACL de dirección URL. Si el complemento no puede escuchar en todas las interfaces, escucha en 127.0.0.1 su lugar, por lo que solo puede conectar Dev Tools desde la misma máquina.

Para proteger el tráfico interceptado, el complemento solo acepta conexiones de Dev Tools que:

  • use la dirección URL que el proxy de desarrollo inicia o registra. La dirección URL contiene un token aleatorio que el proxy de desarrollo genera cada vez que se inicia.
  • proceden del front-end de Chrome DevTools, ya sea devtools://devtools, http://localhost:9222o http://127.0.0.1:9222.

El complemento rechaza otras conexiones con 403 Forbidden y registra una advertencia.

Para usar el complemento cuando el proxy de desarrollo se ejecuta en un contenedor, un contenedor de desarrollo o GitHub Codespaces, establezca port en un puerto fijo, establezca en launchBrowserfalsey publique o reenvíe el puerto a la máquina. Para obtener más información, consulte Inspección de solicitudes cuando el proxy de desarrollo se ejecuta en un contenedor.

Problemas conocidos

Las herramientas de desarrollo no se abren en Microsoft Edge en Windows

El proxy de desarrollo se usa en Windows y se configura para usar Microsoft Edge para mostrar las herramientas de desarrollo. Después de iniciar el proxy de desarrollo, inicia el inspector, pero las herramientas de desarrollo no se abren o se abren vacías.

Para corregir este problema:

  1. Abrir Microsoft Edge
  2. Vaya a configuración
  3. Abrir sistema y rendimiento
  4. Deshabilitación de de aumento de inicio
  5. Cierre todas las ventanas y procesos de Microsoft Edge
  6. Iniciar proxy de desarrollo

Compatibilidad con STDIO

Al usar DevToolsPlugin con el stdio comando , puede inspeccionar la comunicación STDIN/STDOUT/STDERR en Chrome DevTools:

  • Los mensajes aparecen con stdio://command-name direcciones URL
  • Las solicitudes se muestran como STDIN método
  • Las respuestas se muestran como STDOUT (estado 200) o STDERR (estado 500)
  • Los cuerpos del mensaje tienen el formato JSON cuando corresponda.
  • La información de tiempo está disponible para cada par de solicitud/respuesta

Ejemplo de configuración para STDIO

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v4.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/v4.0.0/devtoolsplugin.schema.json",
    "preferredBrowser": "Edge"
  }
}

A continuación, ejecute:

devproxy stdio npx -y @modelcontextprotocol/server-filesystem

Paso siguiente