Analizzare gli elementi di una pagina web su un Mac non \u00e8 esattamente un’impresa ardua, ma \u00e8 piuttosto strano quanti passaggi complessi ci siano per far funzionare tutto correttamente, soprattutto se si \u00e8 alle prime armi. Che si stia cercando di risolvere qualche anomalia di layout, testare modifiche di design o semplicemente soddisfare la curiosit\u00e0 su come \u00e8 strutturato un sito, sapere come accedere e utilizzare correttamente gli strumenti di sviluppo del browser fa un’enorme differenza. E poich\u00e9 i Mac hanno qualche particolarit\u00e0 nel modo in cui gestiscono queste cose, soprattutto con Safari, vale la pena seguire attentamente il processo per non perdere nulla. Dopo averlo fatto un paio di volte, \u00e8 sorprendentemente semplice.<\/p>\n
Se Safari \u00e8 il tuo browser preferito, devi prima attivare il menu sviluppatore.\u00c8 un po’ nascosto fin da subito, il che \u00e8 bizzarro ma tipico di Apple. Ecco come fare:<\/p>\n
Ora, in alto a destra, appare il menu Sviluppo<\/strong>. Questo menu d\u00e0 accesso a tutte le funzionalit\u00e0, incluso “Ispeziona elemento”.A volte, per\u00f2, questa opzione non sembra funzionare subito e, in alcune configurazioni, potrebbe essere necessario ricaricare o riavviare Safari per visualizzare correttamente il menu. Basta disattivarlo e riattivarlo se necessario.<\/p>\n Una volta impostato, basta aprire la pagina web che si desidera esplorare.\u00c8 un po’ buffo: le impostazioni sulla privacy di Safari a volte rendono un po’ pi\u00f9 difficile ispezionare alcune pagine, ma in genere, una volta fatto, \u00e8 tutto a posto. Chrome e Firefox sono pi\u00f9 semplici da usare, ma Safari ha quel passaggio in pi\u00f9 per gli sviluppatori.<\/p>\n Si apre il pannello di sviluppo, solitamente agganciato in basso o di lato. Onestamente, su alcune configurazioni \u00e8 un po’ lento o non si apre subito, perch\u00e9 ovviamente Mac e browser devono sempre rendere le cose un po’ pi\u00f9 frustranti.<\/p>\n La scheda Elementi<\/strong> mostra la struttura del markup e, passando il mouse sopra l’HTML, si evidenzia la parte rilevante della pagina. Il riquadro Stili<\/strong> a destra mostra quali regole CSS vengono applicate.\u00c8 anche possibile modificare gli stili in tempo reale per vedere come appaiono le modifiche: una sorta di magia, vero? Questo \u00e8 molto utile se una finestra modale o una sovrapposizione blocca l’interazione o se si desidera sperimentare con colori e font senza dover modificare i file di codice.<\/p>\n A volte, i bug di layout sono causati da script o risorse bloccate, quindi \u00e8 consigliabile controllare la scheda Rete se qualcosa non funziona. Inoltre, abilitare le autorizzazioni per i pop-up su Mac a volte pu\u00f2 essere utile se le sovrapposizioni si comportano in modo strano o non rispondono.<\/p>\n S\u00ec, se vuoi seguire questa strada, basta collegare il tuo iPhone o iPad tramite USB, poi in Safari sul tuo Mac, andare su Sviluppo<\/strong> e selezionare il tuo dispositivo.\u00c8 sorprendentemente comodo, anche se la configurazione iniziale pu\u00f2 sembrare un po’ complicata.<\/p>\n Un po’ strano, ma…no. Le modifiche sono solo temporanee. Ricaricare la pagina ripristina tutto. Quindi non affezionarti troppo alle tue modifiche, ma sono perfette per testarle prima di modificare i file di codice veri e propri.<\/p>\n In Chrome\/Firefox, Comando + Opzione + I<\/strong> funziona benissimo. Anche Safari usa la stessa scorciatoia, ma prima devi attivare il menu Sviluppo.<\/p>\n Non proprio. Gli strumenti di ispezione sono specifici per ogni browser. Per le app native macOS, avresti bisogno di Xcode o altri strumenti di sviluppo, quindi non aspettarti di dover semplicemente fare clic destro ed eseguire il debug delle app Mac come fai con i siti web.<\/p>\n Probabilmente perch\u00e9 il menu sviluppatore non \u00e8 abilitato (principalmente in Safari).Se usi Chrome o Firefox, il clic destro dovrebbe sempre darti l’opzione “Ispeziona”, a meno che la pagina stessa non la blocchi o non ci sia qualcosa di strano.<\/p>\n Onestamente, armeggiare con gli strumenti di sviluppo su un Mac \u00e8 solo un modo per sbirciare dietro le quinte del web. Non \u00e8 solo per sviluppatori: se sei curioso di sapere come sono realizzati i siti web o stai cercando di risolvere problemi di layout senza perdere tempo, \u00e8 oro colato. Una volta che avrai imparato ad attivare\/disattivare i menu, modificare il CSS in tempo reale e controllare le richieste di rete, inizierai a individuare degli schemi e forse anche a iniziare il tuo percorso di programmazione. La configurazione del Mac in s\u00e9 \u00e8 piuttosto coerente tra i browser una volta che sai dove guardare, quindi vale la pena prenderci confidenza. Oh, e se vuoi davvero esagerare, puoi persino cambiare lo sfondo di Safari sul tuo Mac per personalizzare l’area di lavoro mentre controlli e impari.<\/p>\n","protected":false},"excerpt":{"rendered":" Analizzare gli elementi di una pagina web su un Mac non \u00e8 esattamente un’impresa ardua, ma \u00e8 piuttosto strano quanti passaggi complessi ci siano per far funzionare tutto correttamente, soprattutto se si \u00e8 alle prime armi. Che si stia cercando di risolvere qualche anomalia di layout, testare modifiche di design o semplicemente soddisfare la curiosit\u00e0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10368","post","type-post","status-publish","format-standard","hentry","category-how-to"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts\/10368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/comments?post=10368"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts\/10368\/revisions"}],"predecessor-version":[{"id":10369,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts\/10368\/revisions\/10369"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/media?parent=10368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/categories?post=10368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/tags?post=10368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Vai alla tua pagina<\/h3>\n
Come ispezionare l’elemento<\/h3>\n
\n
Curiosare nell’HTML e negli stili<\/h3>\n
Altre schede per informazioni pi\u00f9 approfondite<\/h3>\n
\n
Ottenere il massimo dall’ispezione<\/h2>\n