DevToolsPlugin

Expõe mensagens de Proxy de Desenvolvimento e informações sobre solicitações e respostas interceptadas no Chrome DevTools. Dá suporte a solicitações HTTP e comunicação STDIO.

Captura de tela do Microsoft Edge com ferramentas de desenvolvimento mostrando mensagens de Proxy de Desenvolvimento.

Captura de tela do Microsoft Edge com ferramentas de desenvolvimento mostrando solicitações e respostas interceptadas pelo Proxy de Desenvolvimento.

Exemplo de configuração

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

Propriedades de configuração

Propriedade Descrição Inadimplência
preferredBrowser Qual navegador usar para iniciar as Ferramentas de Desenvolvimento. Valores com suporte: Edge, EdgeDev, Chrome Edge
port Porta na qual o plug-in escuta conexões de DevTools. 0 escolhe uma porta disponível aleatória. Use uma porta fixa quando precisar publicá-la, por exemplo, quando executar o Proxy de Desenvolvimento em um contêiner 0
launchBrowser Se deseja iniciar o navegador com as Ferramentas de Desenvolvimento. Quandofalse, o plug-in não inicia um navegador e registra a URL das Ferramentas de Desenvolvimento, que você abre no Microsoft Edge ou no Google Chrome por conta própria true

Opções de linha de comando

Nenhum

Comentários

O plug-in escuta conexões de Ferramentas de Desenvolvimento no endereço IP que o Proxy de Desenvolvimento usa, que você define usando a opção --ip-address . Quando você o define como 0.0.0.0 ou ::, o plug-in escuta em todas as interfaces e a URL das Ferramentas de Desenvolvimento aponta para 127.0.0.1. Em Windows, ouvir em todas as interfaces requer direitos de administrador ou uma ACL de URL. Se o plug-in não puder escutar em todas as interfaces, ele escutará em vez disso, para que você só possa conectar as Ferramentas 127.0.0.1 de Desenvolvimento do mesmo computador.

Para proteger o tráfego interceptado, o plug-in aceita apenas conexões de Ferramentas de Desenvolvimento que:

  • use a URL que o Proxy de Desenvolvimento inicia ou registra. A URL contém um token aleatório que o Proxy de Desenvolvimento gera sempre que é iniciado.
  • vêm do front-end do Chrome DevTools, seja devtools://devtools, http://localhost:9222ou http://127.0.0.1:9222.

O plug-in rejeita outras conexões e 403 Forbidden registra um aviso.

Para usar o plug-in quando o Proxy de Desenvolvimento for executado em um contêiner, um contêiner de desenvolvimento ou GitHub Codespaces, defina port como uma porta fixa, defina falselaunchBrowser como e publique ou encaminhe a porta para seu computador. Para obter mais informações, consulte Inspecionar solicitações quando o Proxy de Desenvolvimento é executado em um contêiner.

Problemas conhecidos

As Ferramentas de Desenvolvimento não abrem no Microsoft Edge no Windows

Use o Proxy de Desenvolvimento no Windows e configure-o para usar o Microsoft Edge para exibir as Ferramentas de Desenvolvimento. Depois de iniciar o Proxy de Desenvolvimento, ele inicia o inspetor, mas as Ferramentas de Desenvolvimento não abrem ou abrem vazias.

Para corrigir esse problema:

  1. Abrir o Microsoft Edge
  2. Ir para de Configurações de
  3. Abrir o sistema de e de desempenho
  4. Desabilitar de aumento de inicialização
  5. Fechar todas as janelas e processos do Microsoft Edge
  6. Iniciar Proxy de Desenvolvimento

Suporte a STDIO

Ao usar o DevToolsPlugin com o comando, você pode inspecionar a stdiocomunicação STDIN/STDOUT/STDERR no Chrome DevTools:

  • As mensagens aparecem com stdio://command-name URLs
  • Solicitações são mostradas como STDIN método
  • As respostas são mostradas como STDOUT (200 status) ou STDERR (500 status)
  • Os corpos de mensagem são formatados como JSON quando aplicável
  • As informações de tempo estão disponíveis para cada par de solicitação/resposta

Exemplo de configuração 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"
  }
}

Em seguida, execute:

devproxy stdio npx -y @modelcontextprotocol/server-filesystem

Próxima etapa