Überprüfen von Anforderungen und Antworten mithilfe von Chrome DevTools

Auf einen Blick
Ziel: Anzeigen von Anforderungen in Chrome DevTools
Zeit: 5 Minuten
Plugins:DevToolsPlugin
Voraussetzungen:Einrichten des Dev-Proxys

Standardmäßig zeigt Dev Proxy seine Nachrichten an der Eingabeaufforderung an. Wenn Sie Dev Proxy mit einer Anwendung verwenden, die viele Anforderungen ausgibt, ist es schwierig, die nachrichten zu finden, an denen Sie interessiert sind. Darüber hinaus sollten Sie die von Dev Proxy abgefangenen Anforderungen und Antworten überprüfen.

Um die gewünschten Nachrichten leichter zu finden, verwenden Sie das DevToolsPlugin Plug-In, um Dev Proxy-Nachrichten in Chrome DevTools anzuzeigen.

Tipp

Dev Proxy unterstützt die Verwendung von Chrome DevTools mit Microsoft Edge, Microsoft Edge Dev und Google Chrome.

DevToolsPlugin macht Dev Proxy-Nachrichten und Informationen zu abgefangenen Anforderungen und Antworten in Chrome DevTools verfügbar.

Screenshot von Microsoft Edge mit Entwicklungstools mit Dev Proxy-Nachrichten.

Screenshot von Microsoft Edge mit Dev-Tools mit Anfragen und Antworten, die von Dev Proxy abgefangen wurden.

So verwenden Sie Chrome DevTools mit Dev Proxy:

  1. Öffnen Sie die devproxyrc.json Datei, die in Ihrem Dev Proxy-Installationsverzeichnis gespeichert ist. Du kannst auch den Befehl devproxy config open verwenden.

  2. Aktivieren Sie das DevToolsPlugin Plug-In, und fügen Sie den devTools Konfigurationsabschnitt hinzu. Unterstützte preferredBrowser Werte sind: Edge, EdgeDev, Chrome.

    Die vollständige devproxyrc.json Datei sieht wie folgt aus:

    Datei: 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. Speichern Sie die devproxyrc.json Datei, und starten Sie Dev Proxy.

Überprüfen von Anfragen, wenn Dev Proxy in einem Container ausgeführt wird

Wenn Sie Dev Proxy in einem Container, einem Entwicklercontainer oder GitHub Codespaces ausführen, kann das Plug-In keinen Browser auf Ihrem Computer starten. Konfigurieren Sie stattdessen das Plug-In so, dass es an einem festen Port auf Verbindungen wartet und die Dev Tools-URL protokolliert, und öffnen Sie die URL im Browser auf Ihrem Computer.

  1. Im Konfigurationsabschnitt port legen Sie devTools auf einen festen Port und launchBrowser auf false fest:

    Datei: 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. Geben Sie den Port frei oder leiten Sie ihn auf den gleichen Port auf Ihrem Computer weiter. Die Dev Tools-URL enthält die Portnummer, sodass der Port auf Ihrem Computer mit dem Port in der Konfiguration übereinstimmen muss.

    • Wenn Sie das Dev Proxy Docker-Image verwenden, geben Sie den Port frei, wenn Sie den Container starten:

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

      Das Docker-Image startet Dev Proxy mit --ip-address 0.0.0.0, sodass das Plug-In auf alle Schnittstellen lauscht. Wenn Sie Dev Proxy in Ihrem eigenen Container ausführen und den Port veröffentlichen, starten Sie auch Dev Proxy mit --ip-address 0.0.0.0 .

    • Wenn Sie Dev Proxy mit Aspire verwenden, veröffentlichen Sie den Port an der Dev Proxy-Containerressource:

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

    • Wenn Sie einen Entwicklungscontainer oder GitHub Codespaces in Visual Studio Code verwenden, leiten Sie den Port an Ihren Computer weiter.

  3. Starten Sie Dev Proxy. Dev Proxy protokolliert die URL der Dev Tools, z. B.:

    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. Kopieren Sie die URL, und öffnen Sie sie in Microsoft Edge oder Google Chrome auf Ihrem Computer.

Hinweis

Dev Proxy generiert jedes Mal ein neues Token, wenn es gestartet wird. Kopieren Sie nach dem Neustart des Dev-Proxys die neue URL aus dem Protokoll.

Siehe auch

  • Zuletzt aktualisiert um