Esaminare le richieste e le risposte con Chrome DevTools

A colpo d'occhio
Obiettivo: Visualizzare le richieste in Chrome DevTools
Tempo: 5 minuti
Plugins:DevToolsPlugin
Prerequisiti:Configurare il proxy di sviluppo

Per impostazione predefinita, Dev Proxy visualizza i messaggi nel prompt dei comandi. Se si usa Dev Proxy con un'applicazione che emette molte richieste, è difficile trovare i messaggi a cui si è interessati. Inoltre, è possibile esaminare le richieste e le risposte intercettate dal proxy di sviluppo.

Per semplificare la ricerca dei messaggi a cui si è interessati, usare il plug-in DevToolsPlugin per visualizzare i messaggi di Dev Proxy in Chrome DevTools.

Il DevToolsPlugin espone i messaggi del proxy di sviluppo e le informazioni sulle richieste e le risposte intercettate in Chrome DevTools.

Per usare Chrome DevTools con Dev Proxy:

1. Aprire il file devproxyrc.json archiviato nella directory di installazione di Dev Proxy. È anche possibile usare il comando devproxy config open.

2. Abilitare il plug-in DevToolsPlugin e aggiungere la devTools sezione di configurazione. I valori supportati preferredBrowser sono: Edge, EdgeDev, Chrome.

   Il file completo devproxyrc.json è simile al seguente:

   File: devproxyrc.json

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

3. Salvare il file devproxyrc.json e avviare Dev Proxy.

Esaminare le richieste quando Dev Proxy viene eseguito in un contenitore

Quando si esegue Dev Proxy in un contenitore, un contenitore di sviluppo o GitHub Codespaces, il plug-in non può avviare un browser nel computer. Configura invece il plug-in per l'ascolto su una porta fissa e registra l'URL di Dev Tools, quindi apri l'URL nel browser del tuo computer.

1. devTools Nella sezione di configurazione impostare su port una porta fissa e launchBrowser su false:

   File: devproxyrc.json

   {
     "$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",
       "port": 19229,
       "launchBrowser": false
     }
   }
   

2. Esporre o inoltrare la porta alla stessa porta sul computer. L'URL di Dev Tools contiene il numero di porta, quindi la porta nel computer deve corrispondere alla porta nella configurazione.

   • Se si usa l'immagine Docker di Dev Proxy, pubblicare la porta all'avvio del contenitore:

     docker run --rm -it -p 8000:8000 -p 8897:8897 -p 19229:19229 -v ${PWD}:/config ghcr.io/dotnet/dev-proxy:latest
     

     L'immagine Docker avvia Dev Proxy con --ip-address 0.0.0.0, quindi il plug-in ascolta su tutte le interfacce. Se si esegue Dev Proxy nel proprio contenitore e si pubblica la porta, avviare anche Dev Proxy con --ip-address 0.0.0.0.

   • Se si usa Dev Proxy con Aspire, pubblicare la porta nella risorsa contenitore Dev Proxy:

     var devProxy = builder.AddDevProxyContainer("devproxy")
         .WithConfigFile("./devproxy.json")
         .WithCertFolder(".devproxy/cert")
         .WithConfigFolder(".devproxy/config")
         // publish the DevToolsPlugin port to the same port on the host
         .WithHttpEndpoint(port: 19229, targetPort: 19229, name: "devtools");
     

   • Se si usa un contenitore di sviluppo o GitHub Codespaces in Visual Studio Code, inoltrare la porta al computer.

3. Avviare il proxy di sviluppo. Dev Proxy registra l'URL di Dev Tools, ad esempio:

   DevToolsPlugin available at devtools://devtools/bundled/inspector.html?ws=127.0.0.1:19229/<token>. Open this URL in Microsoft Edge or Google Chrome to inspect requests.
   

4. Copiare l'URL e aprirlo in Microsoft Edge o Google Chrome nel computer.

Vedere anche

• DevToolsPlugin
• Modificare il livello di registrazione
• Esaminare le richieste API rilasciate dai servizi cloud