DevToolsPlugin

Espone i messaggi del proxy di sviluppo e informazioni sulle richieste intercettate e le risposte in Chrome DevTools. Supporta sia le richieste HTTP che la comunicazione STDIO.

Screenshot di Microsoft Edge con strumenti di sviluppo che mostra i messaggi del proxy di sviluppo.

Screenshot di Microsoft Edge con strumenti di sviluppo che mostra le richieste e le risposte intercettate dal proxy di sviluppo.

Esempio di configurazione

{
  "$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"
  }
}

Proprietà di configurazione

Proprietà Descrizione Predefinito
preferredBrowser Quale browser usare per avviare Dev Tools. Valori supportati: Edge, EdgeDev, Chrome Edge
port Porta su cui il plug-in è in ascolto delle connessioni DevTools. 0 seleziona una porta disponibile casuale. Usare una porta fissa quando è necessario pubblicarla, ad esempio quando si esegue Dev Proxy in un contenitore 0
launchBrowser Indica se avviare il browser con Dev Tools. Quando false, il plug-in non avvia un browser e registra invece l'URL di Dev Tools, che si apre in Microsoft Edge o Google Chrome manualmente true

Opzioni della riga di comando

Nessuno

Osservazioni:

Il plug-in è in ascolto delle connessioni di Dev Tools sull'indirizzo IP usato da Dev Proxy, impostato usando l'opzione --ip-address . Quando lo si imposta su 0.0.0.0 o ::, il plug-in è in ascolto su tutte le interfacce e l'URL di Dev Tools punta a 127.0.0.1. In Windows, l'ascolto su tutte le interfacce richiede diritti di amministratore o ACL URL. Se il plug-in non è in ascolto su tutte le interfacce, rimane 127.0.0.1 in ascolto, quindi è possibile connettere Dev Tools solo dallo stesso computer.

Per proteggere il traffico intercettato, il plug-in accetta solo connessioni di Dev Tools che:

  • usare l'URL avviato o i log del proxy di sviluppo. L'URL contiene un token casuale generato da Dev Proxy ogni volta che viene avviato.
  • provengono dal front-end devTools di Chrome, , devtools://devtoolshttp://localhost:9222o http://127.0.0.1:9222.

Il plug-in rifiuta altre connessioni con 403 Forbidden e registra un avviso.

Per usare il plug-in quando Dev Proxy viene eseguito in un contenitore, un contenitore di sviluppo o GitHub Codespaces, impostare su port una porta fissa, impostare su falselaunchBrowser e pubblicare o inoltrare la porta al computer. Per altre informazioni, vedere Controllare le richieste quando il proxy di sviluppo viene eseguito in un contenitore.

Problemi noti

Strumenti di sviluppo non aperti in Microsoft Edge in Windows

È possibile usare Dev Proxy in Windows e configurarlo per l'uso di Microsoft Edge per visualizzare Dev Tools. Dopo aver avviato Dev Proxy, viene avviato il controllo, ma Dev Tools non viene aperto o aperto vuoto.

Per risolvere il problema:

  1. Aprire Microsoft Edge
  2. Passare a Impostazioni
  3. Aprire Sistema e prestazioni
  4. Disabilitare boost di avvio
  5. Chiudere tutte le finestre e i processi di Microsoft Edge
  6. Avviare il proxy di sviluppo

Supporto di STDIO

Quando si usa DevToolsPlugin con il stdio comando , è possibile esaminare la comunicazione STDIN/STDOUT/STDERR in Chrome DevTools:

  • I messaggi vengono visualizzati con stdio://command-name URL
  • Le richieste mostrano come STDIN metodo
  • Le risposte mostrano come STDOUT (200 stato) o STDERR (500 stato)
  • I corpi dei messaggi vengono formattati come JSON quando applicabile
  • Le informazioni sulla tempistica sono disponibili per ogni coppia richiesta/risposta

Esempio di configurazione per 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"
  }
}

Poi eseguire:

devproxy stdio npx -y @modelcontextprotocol/server-filesystem

Passo successivo