Usar o Proxy de Desenvolvimento com um navegador

Visão geral
Objetivo: Anexar o Proxy de Desenvolvimento a uma instância do navegador sem alterar as configurações de proxy do sistema
Tempo: 5 minutos
Plugins: Nenhum
Pré-requisitos:Configurar o Proxy de Desenvolvimento

Por padrão, o Dev Proxy registra-se como o proxy do sistema, roteando todo o tráfego de rede por meio dele. Embora essa abordagem funcione para a maioria dos cenários, às vezes você deseja interceptar apenas o tráfego de uma instância específica do navegador, mantendo outros aplicativos não afetados.

Por que usar um proxy específico do navegador?

Anexar o Proxy de Desenvolvimento diretamente a uma instância do navegador tem vários benefícios:

  • Isolamento: somente a instância específica do navegador usa o proxy, deixando outros aplicativos e navegadores não afetados
  • Sem alterações no sistema: você não precisa modificar as configurações de proxy do sistema
  • Teste paralelo: executar várias instâncias do navegador com configurações de proxy diferentes
  • Tráfego mais limpo: veja apenas as solicitações do navegador que você está testando, não o tráfego do sistema em segundo plano

Pré-requisitos

Antes de começar, configure o Proxy de Desenvolvimento para não se registrar como o proxy do sistema. No arquivo devproxyrc.json, defina:

{
  "asSystemProxy": false
}

Ou inicie o Dev Proxy com a opção --as-system-proxy false de linha de comandos.

Google Chrome

O Google Chrome dá suporte à configuração de proxy por meio de sinalizadores de linha de comando. Para iniciar o Chrome com o Proxy de Desenvolvimento:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --proxy-server="http://127.0.0.1:8000"

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --proxy-server="http://127.0.0.1:8000"

google-chrome --proxy-server="http://127.0.0.1:8000"

Dica

Use um perfil de usuário separado para evitar afetar os dados do navegador principal. Adicione o --user-data-dir sinalizador para especificar um diretório de perfil diferente:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --proxy-server="http://127.0.0.1:8000" --user-data-dir="%TEMP%\chrome-dev-proxy"

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --proxy-server="http://127.0.0.1:8000" --user-data-dir="/tmp/chrome-dev-proxy"

google-chrome --proxy-server="http://127.0.0.1:8000" --user-data-dir="/tmp/chrome-dev-proxy"

Importante

Feche todas as instâncias existentes do Chrome antes de iniciar o Chrome com o sinalizador proxy. Caso contrário, a nova instância une o processo existente do Chrome e ignora as configurações de proxy.

Microsoft Edge

O Microsoft Edge não dá suporte ao --proxy-server sinalizador de linha de comando. Embora o Microsoft Edge seja baseado no Chromium, a Microsoft não expõe essa funcionalidade.

Para usar o Proxy de Desenvolvimento com o Microsoft Edge, você deve usar as configurações de proxy do sistema. Configure o Proxy de Desenvolvimento como o proxy do sistema mantendo a asSystemProxy configuração no valor padrão ou trueomitindo-a de sua configuração.

Mozilla Firefox

O Firefox não dá suporte à configuração de proxy por meio de sinalizadores de linha de comando, mas você pode configurá-la manualmente por meio das configurações do navegador.

Para configurar o Firefox para usar o Proxy de Desenvolvimento:

  1. Abrir o Firefox
  2. Vá para Configurações>Gerais>Configurações de Rede>Configurações...
  3. Selecionar configuração de proxy manual
  4. Defina o Proxy HTTP como 127.0.0.1 e a Porta como 8000
  5. Verifique Também usar esse proxy para HTTPS
  6. Selecione OK

Dica

Crie um perfil separado do Firefox para teste com o Proxy de Desenvolvimento. Dessa forma, você pode manter seu perfil de navegação regular inalterado. Para criar um novo perfil, execute firefox -P e crie um novo perfil dedicado ao teste de Proxy de Desenvolvimento.

Confie no certificado do Proxy de Dev

Quando você inicia o Proxy de Desenvolvimento pela primeira vez, ele instala e confia em um certificado raiz para descriptografar o tráfego HTTPS. Se você estiver usando um perfil de navegador separado ou se o navegador não usar o repositório de certificados do sistema, talvez seja necessário confiar manualmente no certificado.

Chrome e Microsoft Edge

O Chrome e o Microsoft Edge usam o repositório de certificados do sistema operacional. Se você já executou o Proxy de Desenvolvimento e confiou no certificado durante a experiência de primeira execução, o Chrome e o Microsoft Edge confiam nele automaticamente.

Firefox

O Firefox usa seu próprio repositório de certificados. Para confiar no certificado Dev Proxy no Firefox:

  1. Abrir o Firefox
  2. Vá para configurações> deprivacidade e>segurança exibir>
  3. Selecione a guia Autoridades
  4. Selecione Importar...
  5. Navegue até o certificado proxy de desenvolvimento:
    • Local: %USERPROFILE%\.config\dev-proxy\rootCert.pfx
    • Local: ~/.config/dev-proxy/rootCert.pfx
    • Local: ~/.config/dev-proxy/rootCert.pfx
  6. Verifique a Confiança nesta AC para identificar sites
  7. Selecione OK

Observação

A senha do certificado está vazia. Deixe o campo senha em branco quando solicitado.

Consulte também

  • Last updated on