In questa guida ti darò una visione approfondita sull'uso degli strumenti Developer di Safari. Anche se gli strumenti per sviluppatori in Safari presentano alcune differenze rispetto a quelli di Chrome e Firefox, il principio di base rimane lo stesso. Imparerai come attivare gli strumenti per sviluppatori, utilizzare le diverse aree e funzionalità e attuare processi essenziali di debugging. Cominciamo subito con le principali nozioni.
Nozioni principali
- Gli strumenti per sviluppatori in Safari non sono altrettanto accessibili come in altri browser, poiché devono essere attivati tramite le impostazioni.
- L'interfaccia utente e le funzionalità degli strumenti per sviluppatori sono simili a quelli di altri browser, ma le implementazioni specifiche variano.
- È possibile fare il debugging sui dispositivi iOS con Safari collegando il dispositivo tramite USB.
Istruzioni passo passo
1. Attivazione degli strumenti per sviluppatore in Safari
Per attivare gli strumenti per sviluppatori in Safari, devi personalizzare le impostazioni di Safari. Avvia Safari e vai sulla barra dei menu. Seleziona "Safari" e poi "Preferenze".
Vai alla scheda "Avanzate" sulla destra. Troverai l'opzione "Mostra menu Sviluppo nell'interfaccia". Attiva questa opzione per abilitare gli strumenti per sviluppatori.
2. Accesso agli strumenti per sviluppatori
Una volta attivati gli strumenti per sviluppatori, puoi aprirli attraverso il menu "Sviluppo" nella barra dei menu o tramite determinate combinazioni di tasti. L'accesso diretto tramite i tasti F12 o Alt-Cmd-I non funziona, ma ad esempio puoi fare clic con il pulsante destro sull'elemento e scegliere "Ispeziona elemento".
Puoi anche utilizzare la combinazione di tasti Cmd+Opzione+C per aprire la console e passare tra diverse visualizzazioni.
3. Navigazione attraverso gli strumenti per sviluppatori
Pur essendo simile all'interfaccia utente degli strumenti per sviluppatori di altri browser, in Safari presenta alcune deviazioni speciali. Nella barra laterale sinistra puoi passare tra le schede "Elementi", "Console", "Sorgenti", "Rete" e altre.
Qui puoi scoprire di più sugli elementi del sito web, per visualizzare e modificare i loro stili e layout. Puoi modificare qualsiasi stile cliccando semplicemente sulle regole CSS corrispondenti.
4. Lavoro con la console
La console in Safari ti permette di eseguire codice JavaScript e visualizzare gli output desiderati. Un aspetto interessante è che la formattazione degli output qui è diversa. Il primo argomento viene stampato come testo, mentre tutti gli argomenti successivi vengono mostrati come oggetti JavaScript.
Quando emetti ulteriori messaggi di log, assicurati che la visualizzazione non abbia spazi vuoti tra gli argomenti, ma che siano separati da trattini. Questo potrebbe essere importante per evitare fraintendimenti durante il debugging.
5. Impostazione del codice sorgente e dei breakpoint
Nella scheda "Sorgenti" puoi visualizzare i file originali e i file trascodificati del tuo sito web. È anche possibile impostare dei breakpoint per facilitare il debugging. Basta fare clic sulla riga di codice corrispondente.
Non dimenticare di utilizzare anche i vari controlli per facilitare il passaggio del codice. In Safari la scorciatoia per passare del codice è diversa; invece devi usare simboli specifici.
6. Eseguire analisi di rete
La scheda "Rete" fornisce informazioni dettagliate su tutte le richieste che vengono fatte dalla tua pagina durante il caricamento. Qui vedi le richieste inviate e ricevute, insieme all'intestazione e alla previsione.
Una funzione interessante qui è la distinzione tra gli header e i timing, che ti danno una visione più profonda delle prestazioni del tuo sito.
7. Utilizzare misurazioni delle prestazioni e timeline
Nella scheda "Timeline" puoi effettuare analisi approfondite sulle prestazioni e registrare per comprendere meglio la velocità e i processi sul tuo sito.
Questa funzionalità funziona in modo simile ai profili di prestazione in altri browser, ma potresti doverti abituare a alcune differenze nella visualizzazione e denominazione.
8. Debug sulle piattaforme mobili
Un punto saliente degli strumenti per sviluppatori di Safari è la capacità di eseguire il debug delle pagine Web sul tuo iPhone o iPad. Connetti il tuo dispositivo tramite USB e attiva le opzioni di debug nelle impostazioni del dispositivo.
Successivamente vai nel menu "Sviluppo" e seleziona il tuo dispositivo connesso per accedere alle finestre aperte e ai relativi strumenti per sviluppatori.
Riepilogo
In questa dettagliata guida hai imparato come attivare gli strumenti per sviluppatori di Safari, utilizzare le varie funzioni e schede e eseguire il debug sulle piattaforme mobili. La maggior parte delle funzioni è simile agli strumenti presenti in altri browser, ma ci sono differenze specifiche, soprattutto per quanto riguarda l'interfaccia utente e le scorciatoie. Una volta familiarizzato, il debug in Safari diventerà facile e veloce.
Häufig gestellte Fragen
Come attivo gli strumenti per sviluppatori su Safari?Vai nelle impostazioni di Safari, quindi su "Avanzate" e attiva l'opzione "Mostra funzioni di sviluppo per sviluppatori web".
Come apro la console su Safari?Puoi aprire la console premendo Cmd+Option+C o facendo clic su "Ispeziona elemento" nel menu contestuale.
Che differenze ci sono nella console di Safari rispetto ad altri browser?In Safari il primo argomento è visualizzato come testo e i successivi come oggetti JavaScript, senza spazi tra le uscite.
Posso fare il debug sul mio iPhone con Safari?Sì, collegando il tuo iPhone tramite USB e attivando le opzioni di debugging, puoi fare il debug delle pagine Web sul tuo iPhone.
Esiste lo stesso tipo di analisi delle prestazioni in Safari come in Chrome?Sì, la funzione Timeline in Safari consente analisi delle prestazioni simili, anche se la visualizzazione può essere diversa.
