MacOS: Abilitare Web Inspector in Safari

Se desideri visualizzare il codice sorgente di una pagina web in Apple Safari per macOS Sierra, dovrai abilitare lo strumento Safari Web Inspector usando i seguenti metodi.

I sviluppatori di browser web come Apple, Google, ecc., forniscono uno strumento pronto all'uso per visualizzare i codici sottostanti. Gli sviluppatori lo utilizzano principalmente per eseguire il debug e visualizzare modifiche apportate su un sito web live senza disturbare il codice effettivo presente nel server. Tuttavia, questo strumento è diventato popolare anche tra i creatori di contenuti e gli utenti di internet esperti che desiderano modificare un sito web live per scopi personali o professionali. Se sei uno di questi, leggi l'articolo fino alla fine per conoscere tutto su Safari Web Inspector e come ispezionare un elemento.

Contenuti

• 1 Cos'è Safari Web Inspector?
• 2 Come Attivare Safari Web Inspector in Safari 10 e Superiori
• 3 Come Utilizzare Safari Web Inspector su macOS
• 4 Come Aprire Safari Web Inspector in Versioni Precedenti di macOS
  • 4.1 Safari Web Inspector: Parole Conclusive

Cos'è Safari Web Inspector?

Web Inspector è parte del pacchetto di strumenti di sviluppo che Apple offre a sviluppatori di siti web e app in tutto il mondo. Lo strumento è disponibile sia per dispositivi macOS che iOS. Gli sviluppatori possono modificare, ottimizzare e debugare i siti web senza sforzo per ottenere prestazioni ottimali per le loro proprietà online.

Lo strumento Web Inspector su Safari riunisce la maggior parte delle risorse del sito web in un'unica interfaccia. Lo strumento separa anche le risorse e i loro parametri in schede dedicate in modo da non sentirti sopraffatto da così tanti codici e opzioni. Web Inspector offre anche una vista temporale della memoria del sito web, così puoi debugare la memoria facilmente. Inoltre, essendo uno sviluppatore, puoi modificare e ottimizzare più di 150 proprietà CSS popolari necessarie per sviluppare un sito web funzionale.

Nello strumento Web Inspector, puoi trovare le seguenti schede per le risorse del sito web:

• Elementi
• Console
• Fonti
• Rete
• Timeline
• Memoria
• Grafica
• Strati
• Audit

Come Attivare Safari Web Inspector in Safari 10 e Superiori

Per impostazione predefinita, Apple Mac disabilita Web Inspector in Safari. Questo per prevenire un ingombro inutile nell'interfaccia utente del browser web. Tuttavia, se sei uno sviluppatore, un creatore di contenuti o un utente esperto di Mac, puoi attivare la funzionalità seguendo questi passi:

• Apri l'app Safari sul tuo MacBook o iMac.
• Assicurati di aver cliccato sul browser per vedere l'icona Safari nella barra degli strumenti del Mac.

• Clicca su Safari nell'angolo in alto a sinistra e seleziona Preferenze.
• In alternativa, puoi usare la scorciatoia Command + , per mostrare il menu Preferenze.
• Durante la navigazione nel menu Preferenze, assicurati di essere nella scheda Generale.

• Naviga alla scheda Avanzate.
• Appena sotto l'opzione Proxy, dovresti vedere la casella di controllo per Mostra menu Sviluppo nella barra dei menu. Spunta la casella.

• Ora, il menu Sviluppo di Safari apparirà sulla barra degli strumenti del Mac.

Questo è come puoi attivare la funzionalità Web Inspector sul tuo browser Safari per Mac. I passi sono simili per l'edizione più recente di macOS Ventura e versioni precedenti come Monterey, Big Sur, Catalina, ecc., fino a Jaguar.

Leggi anche: Html 4.01

Finora, hai imparato come ottenere la funzionalità Web Inspector nell'app Safari per Mac. Scopri qui sotto come usarla su Safari per siti web live:

Come Utilizzare Safari Web Inspector su macOS

Trova qui di seguito i passi per chiamare lo strumento Web Inspector per lo sviluppo web, la creazione di contenuti, o altri scopi. In questo articolo, mostrerò i passi utilizzando il sistema operativo macOS Monterey. Tuttavia, i passi sono abbastanza simili da macOS Jaguar a Ventura.

• Apri Safari e visita qualsiasi sito web che desideri ispezionare.
• Ci sono due modi per ispezionare i codici HTML/CSS sottostanti di un sito web o apportare modifiche usando lo strumento per sviluppatori Apple Web Inspector. Questi sono:
  • Sviluppo > Mostra Web Inspector.
  • Fai clic destro > Ispeziona elemento.
• Per utilizzare il primo, vai sulla barra degli strumenti del Mac per il browser Safari e clicca sul menu Sviluppo.

• Nel menu contestuale che appare, clicca su Mostra Web Inspector. La scorciatoia per questa azione è Option + Command + I.

• Questo aprirà lo strumento Web Inspector nella parte inferiore del browser web. I codici che vedi sono per l'intero URL o pagina web a cui hai accesso.
• Se desideri visualizzare il codice sottostante per un elemento specifico nella pagina web senza aprire il codice per l'intera pagina web, seleziona l'elemento che desideri ispezionare.

• Fai clic destro e seleziona Ispeziona elemento dal menu contestuale che si apre.
• Il Web Inspector di Safari si aprirà.

• Ma questa volta, Safari ti porterà direttamente al codice HTML o CSS sottostante dell'elemento che stai analizzando.
• In questo strumento, hai accesso ai codici HTML e CSS dell'elemento della pagina web che stai ispezionando.

Leggi anche: Technipages Spiega CSS

Come Aprire Safari Web Inspector in Versioni Precedenti di macOS

Supponiamo che tu sia su un Mac più vecchio di Jaguar e abbia bisogno di usare lo strumento Web Inspector. Se non trovi i passo precedenti in quel Mac, puoi eseguire un semplice comando per attivare Web Inspector. Ecco come si fa:

• Apri Applicazioni e vai alla cartella Utility.
• Dentro Utility, dovresti trovare Terminale. È il prompt dei comandi dei computer macOS.
• Ora, lancia l'interfaccia della riga di comando Terminale e digita il seguente comando semplice:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

• Premi Invio per eseguire il comando.
• Ora puoi aprire una pagina web in Safari e fare clic destro o tenere premuto il pulsante del mouse ovunque sulla pagina finché non appare il menu contestuale.
• Lì, clicca sull'opzione Ispeziona Elemento per visualizzare i codici CSS e HTML sottostanti del sito web.

Safari Web Inspector: Parole Conclusive

Quindi, questi sono i metodi per abilitare Web Inspector in Safari senza sforzo. Puoi seguire i passi autonomamente e iniziare con lo sviluppo o la creazione di contenuti in pochi minuti. Hai imparato i metodi per attivare Ispeziona Elemento su Safari sia per le nuove versioni di macOS che per quelle legacy. Se ho perso qualche metodo per ottenere e utilizzare Web Inspector, non esitare a farmelo sapere lasciando un commento qui sotto.

Prossimo, i migliori app di codifica per iPad.