Share
Costruire e eseguire il debug di siti Web e applicazioni Web per dispositivi mobili può essere una seccatura. Sul desktop abbiamo potenti strumenti di debug; la maggior parte dei browser ha un ispettore web di qualche tipo. Ma non abbiamo questi strumenti per dispositivi come iPhone e iPad ... che è, fino ad ora!
Con la recente versione di Safari 6 e iOS 6, ora puoi utilizzare Web Inspector per creare e eseguire il debug di siti Web sul desktop e su Safari mobile. Meglio di tutto? È un processo semplice da configurare. Segui questo tutorial e avrai a portata di mano alcuni potenti strumenti di debug per iDevices mobili a portata di mano.
I moderni strumenti di sviluppo del browser sono stati di grande aiuto nella creazione di siti Web e applicazioni web. Chrome ha strumenti di sviluppo. Firefox? Firebug. Safari? Ispettore web Tutti strumenti estremamente potenti nello sviluppo web.
Comunque sia, fino a questo momento il debug di siti Web e applicazioni Web su dispositivi mobili è stato un problema. Poiché Safari e Chrome funzionano entrambi sul motore del webkit, ci sono molte somiglianze nel modo in cui il desktop e il browser mobile eseguono il rendering di un layout web. Pertanto, la maggior parte dei designer / sviluppatori costruisce e modifica i propri siti Web sul desktop utilizzando uno di questi browser, presupponendo che le somiglianze risultanti dal motore del Webkit renderanno la pagina ugualmente uguale su un dispositivo mobile.
Tuttavia, le piattaforme mobili e desktop sono profondamente differenti. Hanno diverse capacità di memoria, potenziale di prestazioni, dispositivi di input e connettività di rete. Quindi è diventato imperativo che gli strumenti di debug di un designer per i dispositivi mobili diventino più performanti e corrispondano a quelli delle loro controparti desktop.
Le nuove versioni software di Apple di iOS 6 e Safari 6 offrono molte delle funzionalità degli strumenti di debug del browser desktop che tutti conosciamo e amiamo per i dispositivi mobili. Questo tutorial ti mostrerà il semplice processo di configurazione per eseguire il debug dei siti web mobili utilizzando l'ispettore web di Safari.
Prima di iniziare, una nota sulla compatibilità: Ci sono un po 'di brutte notizie per chi usa Windows. Puoi eseguire il debug solo utilizzando l'ispettore web remoto su un Mac. Safari 6 per Windows non è disponibile. Inoltre, Safari 6 è disponibile solo per Mac con OSX Lion o versioni successive.
Esistono due metodi per l'utilizzo di Web Inspector in Safari per dispositivi mobili:
Copriremo entrambi questi metodi e ti consentiremo di scegliere quale si adatta meglio alla tua situazione.
Poiché il debug dei dispositivi mobili con Web Inspector è una nuova funzionalità, dovrai assicurarti di avere tutto il software più recente.
Metodo del dispositivo reale: Per utilizzare Web Inspector in tandem con un iDevice reale, è necessario quanto segue:
Metodo del dispositivo virtuale: Per utilizzare Web Inspector in tandem con il simulatore iOS, è necessario quanto segue:
Verifica delle versioni del software: Per verificare se stai utilizzando iOS 6 sul tuo iDevice, vai su "Impostazioni> Generali> Informazioni" sul tuo dispositivo.
Per verificare se stai utilizzando Safari 6 vai alla barra dei menu di Safari e fai clic su "Safari> Informazioni su Safari".
Per assicurarti di utilizzare Lion, fai clic sul logo Apple nella barra dei menu e seleziona "Informazioni su questo Mac"
Per assicurarti di avere la versione corretta di Xcode, apri Xcode e scegli "Xcode> Informazioni su Xcode"
Devi abilitare gli strumenti per sviluppatori e il web inspector nelle versioni desktop e mobile di Safari.
Metodo del dispositivo reale: Se hai intenzione di utilizzare un dispositivo reale, collegalo al tuo Mac tramite USB.
Metodo del dispositivo virtuale: Se utilizzi il simulatore iOS, apri Xcode, quindi fai clic con il pulsante destro del mouse sull'icona del dock e seleziona "Apri strumento di sviluppo> iOS Simulator".
Safari mobile: Sul tuo reale iDevice o sul simulatore iOS vai su "Impostazioni> Safari> Avanzate" e attiva "Web Inspector".
Safari desktop: Se non lo hai già fatto, assicurati di aver attivato gli strumenti per sviluppatori in Safari. Saprai che li hai attivati se puoi vedere "Sviluppa" nella barra dei menu.
Se non riesci a visualizzare "Sviluppo" nella barra dei menu, vai alla barra dei menu e fai clic su "Safari> Preferenze> Avanzate" e seleziona la casella di controllo "Mostra menu di sviluppo nella barra dei menu".
Ora che hai iOS Simulator aperto o il tuo iDevice connesso al tuo Mac tramite USB (o entrambi!), Sei pronto per iniziare a usare web inspector sul tuo sito web.
Sul tuo Mac, apri Safari e vai su "Sviluppa". Ora dovresti vedere qualsiasi iDevice (virtuale o reale) connesso e in esecuzione con il tuo Mac. Nello screenshot qui sotto, vedrai che ho due dispositivi nel menu: uno è il simulatore iOS, l'altro è un vero iPhone collegato al mio mac.
Per iniziare effettivamente l'ispezione di un sito Web, è necessario che Safari sia avviato sul dispositivo e che una delle schede sia aperta sul sito Web. Se non hai Safari mobile aperto, verrà visualizzato un messaggio che indica "Nessuna applicazione ispezionabile".
Per iniziare l'ispezione, è sufficiente inserire l'URL della pagina che si desidera ispezionare in Safari mobile e quindi scegliere quel sito dal menu "Sviluppo". Puoi iniziare a ispezionare i siti sul tuo iDevice reale o dal simulatore iOS. Quando selezioni la pagina, vedrai una sovrapposizione blu sulla pagina, che indica quale hai selezionato.
Scegliendo un sito, l'ispettore web di Safari si aprirà e ti consentirà di iniziare l'ispezione del tuo sito web. Questo è tutto!
Ora che hai l'ispettore web di Safari a portata di mano, hai molto più controllo nella creazione e nel debug di siti Web e applicazioni web.
Ecco un esempio di alcune cose che puoi fare ora quando esegui il debug di siti mobili:
Hai gli strumenti, vai avanti e costruisci!
Accentsconagua