Sprawdzanie żądań i odpowiedzi przy użyciu narzędzia Chrome DevTools

Na pierwszy rzut oka
Cel: Wyświetlenie żądań w narzędziach Chrome DevTools
Czas: 5 minut
Plugins:DevToolsPlugin
Wymagania wstępne:konfigurowanie serwera proxy deweloperskiego

Domyślnie Dev Proxy wyświetla komunikaty w wierszu polecenia. Jeśli używasz serwera proxy deweloperów z aplikacją, która wysyła wiele żądań, trudno jest znaleźć interesujące Cię komunikaty. Co więcej, możesz chcieć sprawdzić żądania i odpowiedzi przechwycone przez Dev Proxy.

Aby ułatwić znajdowanie zainteresowanych wiadomości, użyj wtyczki DevToolsPlugin, aby wyświetlić komunikaty serwera proxy deweloperów w narzędziu Chrome DevTools.

Napiwek

Proxy deweloperski obsługuje korzystanie z narzędzi Chrome DevTools z przeglądarkami Microsoft Edge, Microsoft Edge Dev i Google Chrome.

DevToolsPlugin uwidacznia komunikaty serwera proxy deweloperów oraz informacje o przechwyconych żądaniach i odpowiedziach w narzędziu Chrome DevTools.

Zrzut ekranu przeglądarki Microsoft Edge z narzędziami deweloperskimi przedstawiający komunikaty Dev Proxy.

Zrzut ekranu przeglądarki Microsoft Edge z narzędziami deweloperskimi przedstawiający żądania i odpowiedzi przechwycone przez serwer proxy deweloperów.

Aby użyć narzędzia Chrome DevTools z serwerem proxy deweloperów:

  1. Otwórz plik devproxyrc.json przechowywany w katalogu instalacyjnym serwera proxy dev. Możesz również użyć polecenia devproxy config open.

  2. Włącz DevToolsPlugin wtyczkę i dodaj sekcję konfiguracji devTools. Obsługiwane preferredBrowser wartości to: Edge, , EdgeDevChrome.

    Pełny plik devproxyrc.json wygląda następująco:

    Plik: 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. Zapisz plik devproxyrc.json i uruchom serwer proxy deweloperów.

Inspekcja żądań, gdy Dev Proxy działa w kontenerze

Po uruchomieniu serwera proxy deweloperskiego w kontenerze, kontenerze deweloperskim lub GitHub Codespaces wtyczka nie może uruchomić przeglądarki na Twoim komputerze. Zamiast tego skonfiguruj wtyczkę do nasłuchiwania na stałym porcie i rejestrowania adresu URL narzędzi deweloperskich i otwórz adres URL w przeglądarce na swojej maszynie.

  1. W sekcji konfiguracji devTools ustaw launchBrowser na stały port, a port na false:

    Plik: 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. Wystaw lub przekieruj port na ten sam port na swojej maszynie. Adres URL narzędzi deweloperskich zawiera numer portu, więc port na maszynie musi być zgodny z portem w konfiguracji.

    • Jeśli używasz obrazu Docker Dev Proxy, opublikuj port po uruchomieniu kontenera:

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

      Obraz Dockera uruchamia Dev Proxy za pomocą --ip-address 0.0.0.0, więc wtyczka nasłuchuje we wszystkich interfejsach. Jeśli uruchomisz Dev Proxy we własnym kontenerze i opublikujesz port, uruchom również Dev Proxy z użyciem --ip-address 0.0.0.0.

    • Jeśli używasz Dev Proxy z aplikacją Aspire, opublikuj port w zasobie kontenera 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");

    • Jeśli używasz kontenera deweloperskiego lub GitHub Codespaces w Visual Studio Code, przekieruj port na swój komputer.

  3. Uruchom serwer proxy deweloperów. Dev Proxy rejestruje adres URL narzędzi deweloperskich, na przykład:

    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. Skopiuj adres URL i otwórz go w Microsoft Edge lub Google Chrome na swojej maszynie.

Note

Dev Proxy generuje nowy token za każdym razem, gdy się uruchamia. Po ponownym uruchomieniu Dev Proxy skopiuj nowy adres URL z dziennika.

Zobacz także

  • Ostatnia aktualizacja o