Richieste di rete: testa il tuo sito bloccando o limitando le richieste di rete

Ewa Gasperowicz

Utilizza il riquadro Condizioni della richiesta per testare il comportamento della pagina se il caricamento di determinate risorse, come immagini o fogli di stile, viene impedito o se le risorse vengono caricate più lentamente.

Panoramica

Il riquadro Condizioni della richiesta ti consente di bloccare più risorse o "pattern" contemporaneamente e di attivarli/disattivarli da un elenco. Puoi anche bloccare domini o URL di richieste di rete dal riquadro Rete e i rispettivi pattern verranno visualizzati nel riquadro Condizioni della richiesta.

Il riquadro a scomparsa Condizioni della richiesta ti consente di:

  • Aggiungere o rimuovere pattern.
  • Modifica i pattern.
  • Rimuovi tutti i pattern.
  • Attiva o disattiva il blocco o la limitazione delle richieste di rete. Una volta attivata, puoi attivare o disattivare il blocco o la limitazione per un singolo pattern.

La chiusura di DevTools disattiva il blocco e la limitazione delle richieste di rete. Devi aprire il pannello e riattivare il blocco. Tuttavia, DevTools salva i pattern anche dopo la chiusura del browser.

Bloccare o limitare una richiesta di rete

Puoi bloccare le richieste di rete dal riquadro Rete in DevTools.

  1. Nel riquadro Rete, nella sezione Nome, fai clic con il tasto destro del mouse su una richiesta e seleziona Blocca richiesta o Limita richiesta. immagine
  2. Si apre automaticamente il riquadro Condizioni della richiesta, che elenca il pattern pertinente come bloccato o limitato. Viene attivata automaticamente anche la casella di controllo Attiva blocco e limitazione.

Comprendere quali richieste vengono limitate o bloccate

Per distinguere le richieste lente da quelle limitate da DevTools, puoi controllare i riquadri Rete e Prestazioni.

Nel riquadro Rete:

  • Richieste bloccate:controlla la colonna Stato. Le richieste bloccate mostreranno esplicitamente (blocked:devtools) e saranno di colore rosso.
  • Richieste limitate:accanto all'URL della richiesta viene visualizzata un'icona dorata o marrone. In alternativa, puoi anche controllare la colonna Ora. L'icona verrà visualizzata accanto alla tempistica.
    • Passa il mouse sopra l'icona per vedere esattamente quale condizione di rete è stata applicata.
    • Fai clic sull'icona per aprire immediatamente il riquadro Condizioni della richiesta ed evidenziare la regola responsabile della limitazione.

Il riquadro Rete in DevTools mostra gli indicatori delle richieste bloccate e limitate.

Nel riquadro Rendimento: Puoi anche cercare le condizioni di rete durante la registrazione di un profilo di rendimento. Per farlo:

  1. Vai al riquadro Prestazioni e acquisisci una registrazione.
  2. Individua la richiesta nella traccia Rete.
  3. Passa il mouse sopra la richiesta per visualizzare una descrizione comando che illustra in dettaglio le condizioni di rete applicate.

Apri il riquadro a scomparsa delle condizioni della richiesta

Per aprire il riquadro a scomparsa Condizioni della richiesta:

  1. Apri DevTools.
  2. Apri il menu dei comandi premendo:
    • macOS: Comando+Maiusc+P
    • Windows, Linux, ChromeOS: Control+Maiusc+P Menu dei comandi con
  3. Inizia a digitare Request conditions, seleziona Mostra condizioni della richiesta e premi Invio. DevTools mostra il riquadro Condizioni della richiesta nella parte inferiore della finestra DevTools.

In alternativa, nell'angolo in alto a destra, seleziona Altri strumenti > Condizioni di richiesta.

Modificare un'impostazione di limitazione

Per personalizzare un'impostazione di limitazione:

  1. Apri il riquadro Condizioni della richiesta e vai alla richiesta specifica.
  2. Nella colonna Limitazione, seleziona un preset (ad esempio, 3G lenta, 3G veloce) dal menu a discesa. Puoi anche aggiungere un profilo di rete personalizzato.

Modificare un pattern di richiesta

Per modificare un pattern, nel riquadro Condizioni della richiesta, fai clic sul pulsante Modifica accanto al pattern, modificalo e fai clic su Salva. Puoi anche fare clic sul pulsante Aggiungi condizione per crearne una nuova. Quando inserisci un pattern URL, puoi utilizzare i caratteri jolly (*) per trovare corrispondenze con le parti dinamiche dell'URL. Ad esempio, *://example.com corrisponderà a tutte le richieste API a quel dominio. Puoi utilizzare i caratteri jolly per applicare le condizioni a più risorse contemporaneamente utilizzando l'API URL Pattern.

Attiva/disattiva il blocco delle richieste di rete

La casella di controllo Attiva blocco e limitazione consente di attivare e disattivare il blocco delle richieste di rete per tutti i pattern contemporaneamente.

Riordinare i pattern di corrispondenza degli URL

Se una richiesta corrisponde a più pattern, DevTools applica la prima regola trovata. Per controllare questa precedenza, fai clic sui pulsanti freccia accanto alla regola specifica nel riquadro Condizioni della richiesta per spostare le regole a priorità elevata nella parte superiore dell'elenco.

Rimuovere un pattern di blocco delle richieste di rete

Per rimuovere un pattern di blocco delle richieste di rete specifico dall'elenco:

  • Nel riquadro Condizioni della richiesta, fai clic sul pulsante Elimina.

Per rimuovere tutti i pattern di blocco delle richieste di rete, fai clic sul pulsante Rimuovi tutti i pattern di blocco della rete nella barra delle attività.