Usare Dev Proxy con un browser

A colpo d'occhio
Obiettivo: Collegare il proxy di sviluppo a un'istanza del browser senza modificare le impostazioni del proxy di sistema
Tempo: 5 minuti
Plugin: Nessuno
Prerequisiti:Configurare il proxy di sviluppo

Per impostazione predefinita, Dev Proxy si registra come proxy di sistema, che instrada tutto il traffico di rete attraverso il proxy. Sebbene questo approccio funzioni per la maggior parte degli scenari, a volte si vuole intercettare solo il traffico da un'istanza del browser specifica mantenendo invariate altre applicazioni.

Perché usare un proxy specifico del browser?

Il collegamento diretto di Dev Proxy a un'istanza del browser offre diversi vantaggi:

  • Isolamento: solo l'istanza del browser specifica usa il proxy, lasciando invariate altre app e browser
  • Nessuna modifica del sistema: non è necessario modificare le impostazioni del proxy di sistema
  • Test paralleli: eseguire più istanze del browser con configurazioni proxy diverse
  • Traffico più pulito: vedere solo le richieste dal browser che si sta testando, non il traffico del sistema in background

Prerequisiti

Prima di iniziare, configurare Dev Proxy per non eseguire la registrazione come proxy di sistema. Nel file devproxyrc.json, impostare:

{
  "asSystemProxy": false
}

In alternativa, avviare Dev Proxy con l'opzione della --as-system-proxy false riga di comando.

Google Chrome

Google Chrome supporta la configurazione proxy tramite flag della riga di comando. Per avviare Chrome con Dev Proxy:

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

Suggerimento

Usare un profilo utente separato per evitare di influire sui dati principali del browser. Aggiungere il --user-data-dir flag per specificare una directory del profilo diversa:

"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

Chiudere tutte le istanze di Chrome esistenti prima di avviare Chrome con il flag proxy. In caso contrario, la nuova istanza aggiunge il processo chrome esistente e ignora le impostazioni proxy.

Microsoft Edge

Microsoft Edge non supporta il flag della --proxy-server riga di comando. Anche se Microsoft Edge è basato su Chromium, Microsoft non espone questa funzionalità.

Per usare Dev Proxy con Microsoft Edge, è necessario usare le impostazioni del proxy di sistema. Configurare Dev Proxy come proxy di sistema mantenendo l'impostazione asSystemProxy al valore predefinito di trueo omettendola dalla configurazione.

Mozilla Firefox

Firefox non supporta la configurazione proxy tramite flag della riga di comando, ma è possibile configurarla manualmente tramite le impostazioni del browser.

Per configurare Firefox per l'uso di Dev Proxy:

  1. Apri Firefox
  2. Vai a Impostazioni>generali>impostazioni>di rete...
  3. Selezionare Configurazione proxy manuale
  4. Impostare Proxy HTTP su 127.0.0.1 e Porta su 8000
  5. Controllare anche usare questo proxy per HTTPS
  6. Seleziona OK.

Suggerimento

Creare un profilo Firefox separato per il test con Dev Proxy. In questo modo, puoi mantenere invariato il tuo normale profilo di esplorazione. Per creare un nuovo profilo, eseguire firefox -P e creare un nuovo profilo dedicato ai test di Dev Proxy.

Considerare attendibile il certificato del proxy di sviluppo

Quando si avvia Dev Proxy per la prima volta, viene installato e viene considerato attendibile un certificato radice per decrittografare il traffico HTTPS. Se si usa un profilo del browser separato o se il browser non usa l'archivio certificati di sistema, potrebbe essere necessario considerare attendibile manualmente il certificato.

Chrome e Microsoft Edge

Chrome e Microsoft Edge usano l'archivio certificati del sistema operativo. Se hai già eseguito Dev Proxy e hai considerato attendibile il certificato durante la prima esecuzione, Chrome e Microsoft Edge lo considerano automaticamente attendibile.

Firefox

Firefox usa il proprio archivio certificati. Per considerare attendibile il certificato del proxy di sviluppo in Firefox:

  1. Apri Firefox
  2. Vai a Impostazioni>Privacy e Sicurezza>Certificati>Visualizza certificati...
  3. Selezionare la scheda Autorità
  4. Selezionare Importa...
  5. Passare al certificato del proxy di sviluppo:
    • Posizione: %USERPROFILE%\.config\dev-proxy\rootCert.pfx
    • Posizione: ~/.config/dev-proxy/rootCert.pfx
    • Posizione: ~/.config/dev-proxy/rootCert.pfx
  6. Controllare l'attendibilità di questa CA per identificare i siti Web
  7. Seleziona OK.

Annotazioni

La password del certificato è vuota. Lasciare vuoto il campo password quando richiesto.

Vedere anche