Come modificare le pagine Web su Safari utilizzando Inspect Element

Con il suo strumento Inspect Element, Safari ti consente di armeggiare con il codice front-end di qualsiasi pagina web. Se vuoi testare l'aspetto di una pagina con testo o immagini differenti, puoi farlo alterando il suo codice con Inspect Element.

Questa è una semplice guida rivolta ai principianti per spiegare come iniziare a sperimentare con Inspect Element in Safari per modificare il testo e le immagini di un sito Web con una conoscenza minima della codifica.

Che cos'è l'elemento Ispeziona?

Inspect Element è uno strumento per sviluppatori. È disponibile su Safari, ma anche su altri browser Web come Chrome, Firefox ed Edge. Con Inspect Element, puoi sbirciare dietro le quinte di un sito Web per rivelarne il codice front-end, come HTML e CSS. Tuttavia, non ti garantisce la visibilità del back-end, come i suoi database.

Non solo puoi vedere questo codice, ma puoi anche modificarlo. Ciò significa che puoi modificare l'aspetto di un sito web. Puoi sostituire un'immagine, riformulare del testo, utilizzare un carattere diverso, cambiarne la combinazione di colori e altro ancora. Tuttavia, queste modifiche sono locali. Non appariranno a nessun altro tranne a te; scompaiono una volta che aggiorni o ti allontani dalla pagina.

Perché dovresti usare Inspect Element?

Inspect Element è un ottimo strumento se sei uno sviluppatore web in erba. Puoi letteralmente vedere il codice che alimenta il tuo sito Web preferito, modificandolo come desideri in un ambiente reale. Ci sono molti informazioni divertenti che puoi ottenere dall'utilizzo di Inspect Element.

Ad esempio, i proprietari di attività commerciali possono guardare le parole chiave incluse nel sito Web di un concorrente, oppure i designer possono farlo usa Esamina elemento per identificare un font che trovano attraente o per testare rapidamente una combinazione di colori diversa sul loro sito web.

Per ora, ci concentreremo sulla modifica delle basi di una pagina Web utilizzando Inspect Element.

Come accedere a Ispeziona elemento su Safari

Puoi aprire Inspect Element su Safari usando il menu sviluppatore:

1. Apri Safari.
2. Clic Safari nella barra dei menu in alto.
3. Dal menu a tendina, seleziona Preferenze.
4. Seleziona il Avanzate opzione.
5. Spunta la casella che dice Mostra il menu Sviluppo nella barra dei menu.

Dopo aver selezionato questa opzione, puoi fare clic con il pulsante destro del mouse su una pagina web e selezionare Ispeziona elemento. In alternativa, puoi selezionare Sviluppare nella barra dei menu, quindi Mostra Ispettore Web.

Come trovare elementi Web in Inspect Element

Per iniziare a modificare un elemento, fare clic con il pulsante destro del mouse cosa desideri modificare e fare clic Ispeziona elemento. Si aprirà la finestra dello sviluppatore, con la sezione pertinente evidenziata. Potresti scoprire che l'elemento particolare che desideri inserire (l'immagine o il testo, per esempio) è nascosto; per individuarlo, utilizzare il frecce a sinistra per espandere le sezioni nidificate.

Per restringere la selezione, fai clic su icona di destinazione dalla barra degli strumenti Ispeziona elemento. Ora, mentre navighi nel codice, evidenzia quella sezione sul sito web. Oppure puoi usare il cursore per individuare una sezione del sito. Questo è utile quando vuoi concentrarti su qualcosa di particolare in un'area affollata di una pagina web.

Come modificare il testo di un sito Web utilizzando l'elemento Ispeziona

Per rendere modificabile un pezzo di testo dopo averlo trovato nel codice sorgente di un sito, doppio click esso. Puoi digitare il nuovo testo direttamente nel codice o eliminare il testo esistente. Quando la modifica è completa per una determinata stringa di testo, premi accederee il testo sulla pagina web cambierà.

È davvero così semplice! Le uniche volte in cui non funzionerà sono quando il testo è effettivamente parte di un'immagine, come un logo.

Come modificare le immagini di un sito Web utilizzando Inspect Element

Mentre le immagini ti appaiono visivamente sul front-end, nel codice del sito web appaiono come link. Puoi fare clic con il pulsante destro del mouse e immagine e scegli Ispeziona elemento per passare a dove si trova quell'immagine nel codice. Le immagini del sito Web in genere hanno estensioni di file JPG, GIF o PNG, anche se non esclusivamente.

Doppio click queste stringhe di immagini e puoi modificarle o semplicemente salvarle sul tuo sistema, se lo desideri. Se desideri sostituire l'immagine, sostituiscila con un URL immagine sostitutivo. Oppure puoi eliminare completamente la stringa di codice per rimuovere l'immagine dalla visualizzazione.

Scava nei siti Web utilizzando Safari

Lo strumento Inspect Element di Safari ti consente di trovare e modificare facilmente il codice corrispondente a testo e immagini, il che è facile come cambiare una stringa di testo o URL. Una volta terminata la modifica di un sito Web con Inspect Element, aggiorna semplicemente la pagina e tutto tornerà alla normalità.

Come modificare l'agente utente del browser e i siti Web di trucchi

Leggi Avanti

Circa l'autore