Come utilizzare Web Inspector per eseguire il debug di Mobile Safari (iPhone o iPad)

Lo sviluppo di pagine Web per dispositivi mobili o il debug della tua app ibrida è spesso difficile. Ma fortunatamente per le persone che progettano su iOS, a partire da iOS 6, Apple offre una funzione di ispezione web remota in iOS.

Web Inspector consente agli sviluppatori di app Web e mobili di utilizzare macOS e OS X Safari Developer Tools per eseguire il debug remoto di contenuti Web o app ibride in Safari mobile su iPad o iPhone.

È un modo semplice e pratico per eseguire il debug, ottimizzare e modificare le tue pagine web o le app ibride su iOS.

Per accedere a questi strumenti di sviluppo, abilita il menu Sviluppo nelle preferenze Avanzate di Safari del tuo Mac.

Consigli veloci

Segui questi suggerimenti rapidi per far funzionare Web Inspector in modo da poter eseguire il debug del tuo sito o della tua app per Safari

• Ripristina le impostazioni di posizione e privacy sul tuo iPhone, iPad o iPod touch. Vai a Impostazioni > Generali > Ripristina > Ripristina posizione e privacy
• Assicurati di accedere allo stesso ID Apple sul computer del tuo iPhone, iPad o iPod touch
• Attiva la sincronizzazione di Safari iCloud sia per il computer che per qualsiasi iPhone, iPad o iPod touch
• Su iPhone o iPad, vai su Impostazioni > Safari > Avanzate e accendi Ispettore web
• Sul computer, apri Safari e vai su Menu Safari > Preferenze > Avanzate e segno di spunta Mostra il menu Sviluppo nella barra dei menu

articoli Correlati

• Visualizza il codice sorgente HTML della pagina Web su iPad o iPhone. Nessuna app richiesta!
• Come visualizzare il codice sorgente HTML in Safari
• Come vedere le Favicon in Safari per iPhone e Mac

Computer Mac richiesto

Mi dispiace gente di Windows, ma Web Inspector di Safari è compatibile solo con i Mac!

Usa lo stesso ID Apple e iCloud Sync!

Assicurati che sia il tuo iDevice che il tuo Mac abbiano effettuato l'accesso con lo stesso ID Apple e di aver attivato Safari in iCloud.

Per il tuo dispositivo: Impostazioni > Profilo ID Apple > iCloud > Safari > attivato su ON

Per il tuo Mac: Menu Apple > Preferenze di Sistema > ID Apple o iCloud > Safari > Segnato di spunta

E controlla che anche Safari sia la stessa versione

Assicurati che Safari sul tuo Mac sia la stessa versione di Safari sul tuo iDevice. Potrebbe essere necessario aggiornare la versione iOS o la versione di Safari in esecuzione sul Mac.

Ripristina la tua posizione e le impostazioni sulla privacy

1. Vai a Impostazioni > Generali
2. Selezionare Ripristina
3. Scegliere di Ripristina posizione e privacy

Suggerimento per la scorciatoia da tastiera professionale su Mac per sviluppatori Web

Se premi CTRL+Comando+R in Safari, puoi vedere come apparirebbe un sito web su un particolare dispositivo selezionando il dispositivo.

Usa Web Inspector per eseguire il debug di Safari mobile

1. Sul tuo iPad, iPhone o iPod touch, tocca Impostazioni > Safari > Avanzate e accendi Ispettore web. E abilita JavaScript se non è già attivo

2. Sul tuo Mac, avvia Safari e vai su Menu Safari > Preferenze > Avanzate poi spunta “Mostra il menu Sviluppo nella barra dei menu"se non lo hai già fatto

3. Collega il tuo dispositivo iOS al tuo Mac con il cavo USB. Questo è fondamentale: è necessario collegare i dispositivi manualmente, utilizzando un cavo. Non funziona tramite WiFi!

4. Ora sul tuo iPad, apri il sito Web di cui desideri eseguire il debug, quindi, sul tuo Mac, apri Safari e vai su "Sviluppare" menù. Ora vedi il tuo iDevice che hai collegato al tuo Mac. Se non hai alcuna pagina aperta sul tuo iDevice, vedrai un messaggio che dice "Nessuna applicazione ispezionabile".

5. Ora esegui il debug della pagina aperta su Safari mobile proprio come faresti per il debug su Mac, ispeziona gli elementi DOM, modifica CSS, misura le prestazioni della pagina ed esegui comandi Javascript.

Utilizza lo strumento debugger per trovare la causa di eventuali errori JavaScript sulla tua pagina web. Puoi aggiungere punti di interruzione, eseguire il debug di javascript e ispezionare il valore delle variabili in fase di esecuzione.

Safari dovrebbe anche rilevare eventuali errori CSS, HTML e JavaScript. E vedrai i dettagli di ogni errore nel debugger.

iDevice non viene visualizzato nel menu Sviluppo in Safari?

•  Svuota la cache e i cookie di Safari
• Aggiorna Safari sul tuo Mac e iDevice se è disponibile un aggiornamento.
  • Se esegui una versione beta di iOS o macOS, potrebbe essere necessario eseguire l'ultima versione beta su tutti i dispositivi
• Prova un altro cavo e/o porta sul tuo Mac. Assicurati che il cavo è un cavo Lightning originale Apple o certificato MFI (Made For iPhone)
• Verifica che Web Inspector sia attivato. Gli aggiornamenti iOS a volte riportano questo all'impostazione OFF predefinita. Quindi assicurati di controllare Impostazioni > Safari > Avanzate > Web Inspector
  • Prova a disattivare Web Inspector, attendi 10 secondi e riattiva
• Prova invece il browser Safari Technology Preview
• Esci da Safari sul tuo Mac e riavvialo. Verifica se Safari del tuo Mac riconosce il tuo dispositivo e consente il debug
• Verifica di non utilizzare la modalità di navigazione privata di Safari iSe il tuo iDevice viene visualizzato solo brevemente nel menu Sviluppo di Safari e poi scompare
• Apri Activity Monitor e controlla cosa sta succedendo con Safari

Suggerimenti per i lettori 

• Se stai utilizzando un vecchio iDevice con iOS 6 o versioni precedenti, il browser web Safari del tuo dispositivo ha la sua console di debug integrata! Accedi alla Console di debug di Safari andando su Impostazioni > Safari > Sviluppatore > Console di debug