Analizzare gli elementi di una pagina web su un Mac non è esattamente un’impresa ardua, ma è piuttosto strano quanti passaggi complessi ci siano per far funzionare tutto correttamente, soprattutto se si è alle prime armi. Che si stia cercando di risolvere qualche anomalia di layout, testare modifiche di design o semplicemente soddisfare la curiosità su come è strutturato un sito, sapere come accedere e utilizzare correttamente gli strumenti di sviluppo del browser fa un’enorme differenza. E poiché i Mac hanno qualche particolarità 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, è sorprendentemente semplice.
Come ispezionare gli elementi su un Mac in Safari, Chrome o Firefox
Metodo 1: attivazione degli Strumenti per sviluppatori in Safari (perché l’impostazione predefinita di Safari non mostra quel menu)
Se Safari è il tuo browser preferito, devi prima attivare il menu sviluppatore.È un po’ nascosto fin da subito, il che è bizzarro ma tipico di Apple. Ecco come fare:
- Apri Safari, quindi vai su Safari > Impostazioni (o Preferenze :: puoi anche premere Cmd +, )
- Fare clic sulla scheda Avanzate all’estrema destra
- Seleziona la casella che dice Mostra menu Sviluppo nella barra dei menu
Ora, in alto a destra, appare il menu Sviluppo. Questo menu dà accesso a tutte le funzionalità, incluso “Ispeziona elemento”.A volte, però, 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.
Vai alla tua pagina
Una volta impostato, basta aprire la pagina web che si desidera esplorare.È un po’ buffo: le impostazioni sulla privacy di Safari a volte rendono un po’ più difficile ispezionare alcune pagine, ma in genere, una volta fatto, è tutto a posto. Chrome e Firefox sono più semplici da usare, ma Safari ha quel passaggio in più per gli sviluppatori.
Come ispezionare l’elemento
- In Safari: fai clic con il pulsante destro del mouse (o Ctrl + clic) sull’elemento, quindi scegli Ispeziona elemento.
- In Chrome/Firefox: stessa cosa: fai clic con il pulsante destro del mouse e seleziona Ispeziona o Ispeziona elemento.
Si apre il pannello di sviluppo, solitamente agganciato in basso o di lato. Onestamente, su alcune configurazioni è un po’ lento o non si apre subito, perché ovviamente Mac e browser devono sempre rendere le cose un po’ più frustranti.
Curiosare nell’HTML e negli stili
La scheda Elementi mostra la struttura del markup e, passando il mouse sopra l’HTML, si evidenzia la parte rilevante della pagina. Il riquadro Stili a destra mostra quali regole CSS vengono applicate.È anche possibile modificare gli stili in tempo reale per vedere come appaiono le modifiche: una sorta di magia, vero? Questo è 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.
Altre schede per informazioni più approfondite
- Console : visualizza gli errori o esegui rapidi comandi JavaScript.
- Rete : monitora le richieste, scopri cosa è lento e diagnostica i problemi di caricamento.
- Fonti : approfondisci gli script e le risorse.
- Accessibilità : verificare i rapporti di contrasto o le etichette ARIA.
A volte, i bug di layout sono causati da script o risorse bloccate, quindi è consigliabile controllare la scheda Rete se qualcosa non funziona. Inoltre, abilitare le autorizzazioni per i pop-up su Mac a volte può essere utile se le sovrapposizioni si comportano in modo strano o non rispondono.
Sì, se vuoi seguire questa strada, basta collegare il tuo iPhone o iPad tramite USB, poi in Safari sul tuo Mac, andare su Sviluppo e selezionare il tuo dispositivo.È sorprendentemente comodo, anche se la configurazione iniziale può sembrare un po’ complicata.
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.
In Chrome/Firefox, Comando + Opzione + I funziona benissimo. Anche Safari usa la stessa scorciatoia, ma prima devi attivare il menu Sviluppo.
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.
Probabilmente perché il menu sviluppatore non è 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.
Ottenere il massimo dall’ispezione
Onestamente, armeggiare con gli strumenti di sviluppo su un Mac è solo un modo per sbirciare dietro le quinte del web. Non è 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, è 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é è 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.