() translation by (you can also view the original English article)
Progettare e analizzare siti e applicazioni web per dispositivi mobile può essere una seccatura. Sul desktop ci sono potenti strumenti di debug e la maggior parte dei browser hanno un web inspector di qualche tipo. Ma non abbiamo strumenti per dispositivi come iPhone e iPad... fino ad ora!
Con il recente rilascio di Safari 6 e iOS 6, è ora possibile utilizzare web inspector per progettare ed eseguire il debug di siti web su desktop e su Safari mobile. Ancor meglio? È del tutto semplice da impostare. Segui questo tutorial e in poco tempo avrai a portata di mano alcuni potenti strumenti di debug per i dispositivi mobile Apple (iDispositvi).
Gli strumenti di sviluppo dei browser moderni sono stati di grande aiuto per la progettazione di siti e applicazioni web. Chrome ha Strumenti per sviluppatori. Firefox? Firebug. Safari? Web inspector. Tutti strumenti estremamente potenti nello sviluppo web.
Ad ogni modo, fino a questo punto, eseguire il debug di siti e applicazioni web su dispositivi mobile è stata una seccatura. Nonostante Safari e Chrome girino entrambi sul motore webkit, ci sono molte somiglianze nel modo in cui un browser desktop e mobile renderizzano un layout web. Così, la maggior parte dei designer/sviluppatori han progettato e ottimizzato i loro siti web su desktop utilizzando uno di questi browser, supponendo che le somiglianze derivanti dal motore webkit eseguiscano il rendering di una pagina in modo del tutto simile su un dispositivo mobile.
Tuttavia, piattaforme mobile e desktop sono in realtà abbastanza diverse. Hanno differenti capacità di memoria, prestazioni, dispositivi di input e connettività di rete. Così è diventato imperativo per gli sviluppatori di strumenti di debug per dispositivi mobile, progettarli per renderli più veloci e per non farli sfigurare rispetto alla loro controparte desktop.
Le nuove versioni del software di Apple iOS 6 e Safari 6 portano molte delle funzionalità degli strumenti di debugging per browser desktop, che tutti conosciamo e amiamo, ai dispositivi mobili. Questo tutorial vi mostrerà in modo semplice come impostare il debugging sui siti web mobile utilizzando Web inspector di Safari.
Prima di iniziare, una nota sulla compatibilità: ci sono cattive notizie per coloro che utilizzano Windows. Si può eseguire il debug utilizzando web inspector remoto solo su Mac. Safari 6 per windows non è disponibile. Inoltre, Safari 6 è disponibile solo per Mac con OSX Lion o superiore.
Metodi per utilizzare Web Inspector
Ci sono due metodi per utilizzare web inspector su Safari mobile:
- Metodo con dispositivo reale: utilizza un vero e proprio dispositivo Apple (iPhone, iPad, ecc) collegato al computer tramite USB
- Metodo con dispositivo virtuale: utilizza il simulatore iOS contenuto in Xcode
Analizzeremo entrambi i metodi per consentirti di scegliere quello che si adatta meglio alla tua situazione.
Passo 1: Controllare se sei aggiornato
Siccome il debug su dispositivi mobile con web inspector è una nuova funzionalità, è necessario avere tutti i software più recenti.
Metodo con dispositivo reale: per utilizzare web inspector in tandem con un vero e proprio iDispositivo, avrai bisogno di:
- Un iDispositivo (iPhone, iPad e iTouch) con iOS 6
- Cavo USB
- Safari 6
- Mac OSX Lion (10.7.4) o superiore
Metodo con dispositivo virtuale: per utilizzare web inspector in tandem con il simulatore iOS, è necessario avere:
- Safari 6
- Mac OSX Lion (10.7.4) o superiore
- Xcode 4.5 con iOS 6 SDK (disponibile su app store)
Verifica delle versioni dei software: per controllare se è in esecuzione iOS 6 sul tuo iDevice, vai su "Impostazioni > Generali > Info".
Per controllare di avere Safari 6, vai sulla barra dei menu di Safari e fai clic su "Safari > Informazioni su Safari".
Per controllare se stai usando Lion, clicca sul logo Apple nella barra dei menu e scegli "Informazioni su questo Mac"
Per controllare se si sta usando la versione corretta di Xcode, aprire Xcode e scegliere "Xcode > About Xcode"
Passo 2: Attivare gli strumenti di sviluppo
È necessario abilitare gli strumenti per sviluppatori e il web inspector nelle versioni desktop e mobile di Safari.
Metodo con dispositivo reale: se avete intenzione di utilizzare un dispositivo reale, collegarlo al mac via USB.
Metodo con dispositivo virtuale: se avete intenzione di utilizzare il simulatore iOS, aprire Xcode, quindi fare clic destro sull'icona del dock e scegliere "Open Developer Tool > Simulator".
Safari Mobile: sul tuo iDispositivo reale o sul simulatore iOS vai su "Impostazioni > Safari > Avanzate" e attivare "Web Inspector".
Safari desktop: se non lo hai già fatto, controlla di avere in Safari gli strumenti per gli sviluppatori attivati. Potete verificarlo se si ha la voce "Sviluppo" nella barra dei menu.
Se non vedete "Sviluppo" nella barra dei menu, fare clic su "Safari > Preferenze > Avanzate" e selezionare la casella di controllo "Mostra menu Sviluppo nella barra dei menu".
Passo 3: Controlla il tuo sito web
Ora che hai il simulatore iOS aperto o il tuo iDispositivo collegato al mac via USB (o entrambi!), sei pronto per iniziare a utilizzare l'inspector web sul tuo sito web.
Sul tuo mac, apri Safari e vai su "Sviluppo". Dovresti vedere ogni iDispositivo (reale o virtuale) collegato e funzionante con il tuo mac. Nell'immagine qui sotto, puoi vedere i due dispositivi nel menu: uno è il simulatore iOS, l'altro è un vero e proprio iPhone collegato al mio mac.
Per iniziare ad analizzare effettivamente un sito web, devi avere Safari mobile aperto sul dispositivo e una delle schede aperte con il sito web. Se non hai Safari mobile aperto, vedrai un messaggio che indica "Nessuna applicazione ispezionabile".
Per iniziare l'analisi, basta inserire l'URL della pagina che si desidera controllare in Safari mobile e quindi scegliere quel sito nel menu "Sviluppo". Puoi iniziare controllando siti sul tuo iDispositivo reale o da simulatore iOS. Quando si seleziona la pagina, vedrete una sovrapposizione blu nella pagina, che indica il sito selezionato.
Scegliendo un sito, inspector web di Safari si aprirà e permetterà di iniziare il controllo del sito web. Questo è tutto!
Conclusione
Ora che si dispone di inspector web di Safari a portata di mano, avete molto più controllo sulla progettazione e sul debug di applicazioni e siti web.
Ecco degli esempi su cosa è possibile fare durante il debug di siti mobile:
- Apportare modifiche HTML e CSS in tempo reale.
- Vedere come il tuo sito web/applicazione esegue, con dettagli visuali, eventi JavaScript e richieste di rete.
- Debug di JavaScript tramite punti di interruzione e altri strumenti.
- Visualizzare avvisi ed errori.
- Accedere alla console.
- Ricerche nel DOM.
- Accedere e visualizzare contenuti del sito
Ora hai gli strumenti, procedi e progetta!
