Essere uno sviluppatore web nel mondo di oggi significa supportare uno stuolo di dispositivi e piattaforme, che a volte può rivelarsi un compito scoraggiante. Anche con il codice più ben progettato che aderisce agli ultimi standard web, è ancora possibile scoprire che alcune parti del tuo sito Web potrebbero non apparire o comportarsi come desideri su determinati dispositivi o risoluzioni. Di fronte alla sfida di supportare una così vasta gamma di scenari, avere gli strumenti di simulazione giusti a vostra disposizione può essere inestimabile.
Se sei uno dei tanti programmatori che usano un Mac, il set di strumenti per sviluppatori di Safari è sempre stato utile. Con l'uscita di Safari 9 l'ampiezza di questa funzionalità si è notevolmente ampliata, principalmente grazie alla modalità Responsive Design, che consente di visualizzare l'anteprima del rendering del tuo sito a varie risoluzioni dello schermo e su diverse build di iPad, iPhone e iPod touch.
Questo tutorial spiega come attivare la modalità di progettazione reattiva e come utilizzarla per le esigenze di sviluppo.
Preferenze di Safari
Innanzitutto, apri il browser Safari.
Clicca su Safari nel menu del browser, situato nella parte superiore dello schermo. Quando viene visualizzato il menu a discesa, selezionare il Preferenze opzione cerchiata nell'esempio mostrato.
Nota: È possibile utilizzare la seguente scorciatoia da tastiera al posto della summenzionata voce di menu: COMANDO + COMMA (,)
02 di 05Mostra menu Sviluppo
Ora dovrebbe essere visualizzata la finestra di dialogo Preferenze di Safari, che si sovrappone alla finestra del browser. Innanzitutto, fai clic su Avanzate icona rappresentata da un ingranaggio e posizionata nell'angolo in alto a destra della finestra.
Le Preferenze avanzate del browser ora dovrebbero essere visibili. In fondo è un'opzione accompagnata da una casella di controllo, etichettata Mostra il menu Sviluppo nella barra dei menu e cerchiato nell'esempio sopra. Fare clic sulla casella di controllo una volta per attivare questo menu.
03 di 05Entra in modalità progettazione reattiva
Una nuova opzione dovrebbe ora essere disponibile nel menu Safari, situato nella parte superiore dello schermo, etichettato Sviluppare. Clicca su questa opzione.
Quando viene visualizzato il menu a discesa, selezionare Entra in modalità progettazione reattivacerchiato nell'esempio mostrato.
Nota: È possibile utilizzare la seguente scorciatoia da tastiera al posto della summenzionata voce di menu:OPZIONE + COMANDO + R
04 di 05Modalità di progettazione reattiva
La pagina Web attiva dovrebbe ora essere visualizzata in Modalità progettazione reattiva, come mostrato nell'esempio sopra. Selezionando uno dei dispositivi iOS elencati come iPhone 6 o una delle risoluzioni schermo disponibili, ad esempio 800 x 600, è possibile visualizzare immediatamente il rendering della pagina su quel dispositivo o in quella risoluzione dello schermo.
Oltre ai dispositivi e alle risoluzioni mostrati, puoi anche istruire Safari a simulare un diverso agente utente, ad esempio uno da un altro browser, facendo clic sul menu a discesa visualizzato direttamente sopra le icone di risoluzione.
05 del 05Menu Sviluppo: Altre opzioni
Oltre alla modalità di progettazione reattiva, il menu Sviluppo di Safari 9 offre molte altre utili opzioni, alcune delle quali sono elencate di seguito.
- Pagina aperta con: Ti consente di aprire la pagina Web attiva in qualsiasi altro browser attualmente installato sul tuo Mac.
- Agente utente: La modifica dell'agente utente fa sì che i server Web identificano il browser come qualcosa di diverso da Safari 9.
- Connetti a Web Inspector: Safari 9 di Web Inspector visualizza tutte le risorse di una pagina web, fornendo la possibilità di esaminare le informazioni CSS, le metriche DOM e la struttura, nonché il suo codice sorgente nativo.
- Mostra console degli errori: Una delle opzioni più utilizzate nel menu Sviluppo, questa console visualizza gli errori e gli avvisi di JavaScript, HTML e XML.
- Mostra origine pagina: Consente di visualizzare e cercare il codice sorgente della pagina Web attiva.
- Mostra risorse della pagina: Selezionando questa opzione vengono visualizzati documenti, script, CSS e altre risorse dalla pagina corrente.
- Mostra editor di frammenti: Fornisce la possibilità di modificare ed eseguire frammenti di codice, al contrario di una pagina completa. Questa funzione è molto utile dal punto di vista del test.
- Mostra Extension Builder: Ti permette di creare le tue estensioni Safari impacchettando il tuo codice di conseguenza e aggiungendo i metadati.
- Avvia registrazione linea temporale: Registra un numero di elementi tra cui richieste di rete, esecuzione di JavaScript, rendering della pagina e altri eventi per un periodo definito dall'utente tutti visibili all'interno di WebKit Inspector.
- Cache vuote: Facendo clic su questa opzione si elimina tutta la cache memorizzata in Safari, non solo i file di cache del sito Web standard.
- Disabilita cache: Con la memorizzazione nella cache disabilitata, le risorse vengono scaricate da un sito Web ogni volta che viene effettuata una richiesta di accesso anziché utilizzare la cache locale.
- Consenti JavaScript dal campo di ricerca intelligente: Disabilitato per impostazione predefinita per motivi di sicurezza, questa funzione consente di inserire URL contenenti JavaScript nella barra degli indirizzi di Safari.
- Trattare i certificati SHA-1 come non sicuri: Abbreviazione di Secure Hash Algorithm, la funzione hash SHA-1 ha dimostrato di essere meno sicura di quanto originariamente pensato, da qui l'aggiunta di questa opzione in Safari 9.
