Sensori: emulano i sensori del dispositivo

Kayce Basques

Sofia Emelianova

Utilizza il pannello Sensori per emulare l'input del sensore di qualsiasi dispositivo.

Panoramica

Il riquadro Sensori ti consente di:

• Override della geolocalizzazione.
• Simula orientamento.
• Tocca con forza.
• Simula stato di Idle Detector.

Punto chiave: per simulare un viewport di un dispositivo mobile e limitare la rete e la CPU, vedi Modalità dispositivo.

Apri il riquadro Sensori

1. A seconda del sistema operativo, premi i tasti seguenti per aprire il menu dei comandi:

   • Su macOS, Comando+Maiusc+P
   • Su Windows, Linux o ChromeOS, Ctrl+Maiusc+P

   

2. Digita sensors, seleziona Mostra sensori e premi Invio. Il riquadro Sensori si apre nella parte inferiore della finestra DevTools.

Esegui l'override della geolocalizzazione

Molti siti web sfruttano la posizione degli utenti per offrire un'esperienza più pertinente. Ad esempio, un sito web meteo potrebbe mostrare le previsioni locali per l'area di un utente, una volta che l'utente ha concesso al sito web l'autorizzazione ad accedere alla sua posizione.

Se stai creando un'interfaccia utente che cambia a seconda della posizione dell'utente, probabilmente vorrai assicurarti che il sito si comporti correttamente in diverse località del mondo.

Per ignorare la tua geolocalizzazione, apri il riquadro Sensori e seleziona una delle seguenti opzioni dall'elenco Geolocalizzazione:

• Una delle città preimpostate, ad esempio Tokyo.
• Posizione personalizzata per inserire coordinate di longitudine e latitudine personalizzate.
• Seleziona Posizione non disponibile per vedere come si comporta il tuo sito quando la posizione dell'utente non è disponibile.

Simulare l'orientamento del dispositivo

Per simulare diversi orientamenti del dispositivo, apri il riquadro Sensori e, dall'elenco Orientamento, seleziona una delle seguenti opzioni:

• Uno degli orientamenti preimpostati, ad esempio Verticale al contrario.
• Orientamento personalizzato per fornire il tuo orientamento esatto.

Dopo aver selezionato Orientamento personalizzato, i campi alfa, beta e gamma vengono attivati. Consulta Alfa, Beta e Gamma per capire come funzionano questi assi.

Puoi anche impostare un orientamento personalizzato trascinando il modello di orientamento. Tieni premuto Maiusc prima di trascinare per ruotare lungo l'asse alfa.

Tocco forzato

Per testare gli eventi tocco sul tuo sito web, puoi forzare il tocco anziché il clic anche se stai eseguendo il test su un dispositivo senza touchscreen.

Per attivare eventi di tocco con il puntatore:

1. Apri il riquadro Sensori.
2. Nell'elenco a discesa Tocco, seleziona Tocco forzato.
3. Fai clic su Ricarica DevTools nel prompt in alto.

Simula stato di Idle Detector

L'API Idle Detection ti consente di rilevare gli utenti inattivi e reagire alle modifiche dello stato di inattività. Con DevTools, puoi emulare le modifiche dello stato di inattività sia per lo stato dell'utente sia per lo stato dello schermo, anziché attendere la modifica dello stato di inattività effettivo.

Per emulare gli stati di inattività:

1. Apri il riquadro Sensori.

2. Seleziona la casella di controllo accanto a Temporaneo e, nel prompt, concedi alla pagina demo l'autorizzazione di rilevamento dell'inattività. Poi ricarica la pagina.

   

3. Nel menu a discesa Emula stato rilevatore di inattività, seleziona una delle seguenti opzioni:

   • Nessuna emulazione di stato inattivo
   • Utente attivo, schermo sbloccato
   • Utente attivo, schermo bloccato
   • Utente inattivo, schermo sbloccato
   • Utente inattivo, schermo bloccato

Emulare la concorrenza hardware

Per emulare il rendimento del tuo sito web su dispositivi con un numero diverso di core del processore, puoi ignorare il valore riportato dalla proprietà navigator.hardwareConcurrency. Alcune applicazioni utilizzano questa proprietà per controllare il grado di parallelismo dell'applicazione, ad esempio per controllare le dimensioni del pool Emscripten pthread.

Per emulare la concorrenza hardware:

1. Apri il riquadro Sensori.
2. Nella parte inferiore del pannello, individua e attiva check_box Hardware concurrency.
3. Nella casella di input del numero, inserisci il numero di core che vuoi emulare.

Attenzione: il superamento del valore predefinito di 12 potrebbe ridurre le prestazioni.

Per ripristinare il valore predefinito, fai clic sul pulsante Annulla Reimposta.

Emula il carico della CPU

La pressione della CPU o di calcolo è un insieme di stati segnalati che ti danno un'idea del carico di lavoro a cui è sottoposto il calcolo del sistema e se è vicino al limite o meno. Queste informazioni ti consentono di adattare la tua applicazione in tempo reale, ad esempio una videoconferenza o un videogioco, per sfruttare tutta la potenza di elaborazione disponibile, mantenendo al contempo la reattività del sistema adattando i carichi di lavoro in tempo reale.

Il riquadro Sensori ti consente di emulare gli stati che possono essere segnalati dall'API Compute Pressure.

Per emulare la pressione della CPU sul tuo sito web:

1. Apri il riquadro Sensori.
2. Nella parte inferiore del riquadro, individua la sezione Pressione CPU e seleziona uno degli stati di pressione leggibili: Nessuna sostituzione, Nominale, Discreta, Grave o Critica.
3. Nel prompt in alto in DevTools, fai clic su Ricarica DevTools.