Di solito quando modifichiamo una pagina Web utilizziamo uno strumento di modifica specifico come Adobe Dreamweaver, CoffeeCup, Bluefish o uno degli altri strumenti di sviluppo. Ma cosa succede se stiamo solo facendo un brainstorming o vogliamo provare qualcosa su una pagina live? Potremmo fare una copia della pagina con il nostro strumento preferito e giocarci su. Oppure potremmo farlo nel nostro browser web. Questo tutorial ti mostrerà come modificare una pagina web nel tuo browser.
Indicato come Strumenti per gli sviluppatori, Firefox chiama la funzione Inspect Element mentre Chrome lo chiama Inspect. Ad ogni modo, è un modo per il browser di sbirciare dietro la lucentezza del tuo design e dare un'occhiata al codice che lo guida. Questa funzione è abbastanza nota ed è molto usata. Ciò che non è così noto è la possibilità di apportare modifiche a quel codice al volo.
Qualsiasi modifica apportata non verrà salvata e non influirà sul live. Se non vuoi caricare la pagina nel tuo strumento di sviluppo, questo è un modo pulito per sperimentare.
Modifica qualsiasi pagina web nel tuo browser
Dreamweaver e strumenti simili hanno un emulatore di browser integrato che simula l'aspetto di un design in diversi browser. Per quanto siano, non sono sempre esatti e spesso quando si avvia un sito si scopre che ciò che è sembrato fantastico nello strumento di sviluppo è leggermente diverso in un browser autonomo.
Solitamente avresti avviato il sito su un server Web interno e testato in un browser prima di avviarlo dal vivo proprio per questo motivo. Se una pagina è già attiva o desideri semplicemente provare qualcosa, non è necessario copiarla e caricarla nel tuo strumento di sviluppo, puoi semplicemente utilizzare lo Strumento sviluppatore del browser.
Uso Firefox, quindi ti mostrerò come usarlo. Chrome è più o meno lo stesso.
- Apri una pagina web che desideri sperimentare nel tuo browser.
- Fare clic con il tasto destro in qualsiasi punto della pagina e selezionare Ispeziona.
Dovresti vedere la tua pagina divisa in due con un nuovo riquadro che appare in fondo con un po 'di codice. Questo codice è la forza trainante della pagina selezionata. Diversi elementi della pagina sono accessibili dalle schede nella parte superiore della scheda inferiore. Ad esempio, vediamo Firefox, Console, Debugger, Editor di stili e così via in Firefox.
Se si sposta il cursore sulle linee nel riquadro inferiore, verranno visualizzate le diverse parti della pagina Web evidenziate. La riga di codice su cui ti trovi durante il momento saliente è il codice che influenza quella parte della pagina.
- Se vuoi giocare con l'aspetto della pagina, prova Style Editor.
- Se vuoi giocare a come funziona la pagina, prova Console o Accessibilità.
- Se si desidera eliminare i bug o risolvere un problema, utilizzare Console o Debugger
Le prestazioni sono utili per la SEO in loco, ma memoria, rete e archiviazione non sono molto utilizzate.
Ricorda che puoi scherzare con gli Strumenti per sviluppatori quanto vuoi e ciò non influirà sul sito. Eventuali modifiche vengono apportate solo al modo in cui la pagina viene visualizzata nel tuo browser, non influisci sul sito Web stesso. Una volta chiuso lo strumento, tutte le modifiche vengono perse.
Apportare modifiche a una pagina
Ora sai che puoi cambiare tutto ciò che ti piace senza influire sul sito Web attuale, divertiamoci un po '. Trova un elemento nella pagina che desideri modificare. È possibile modificare un carattere, un colore del carattere, un'immagine di sfondo o qualsiasi altra cosa tu voglia. Per questo esempio, ho intenzione di cambiare il colore del carattere del titolo del banner.
- Fare clic con il tasto destro del mouse sull'elemento esatto che si desidera modificare e selezionare Ispeziona.
- Evidenzia la riga con "titolo" o "H1" in modo che il testo sia evidenziato nel riquadro superiore.
- Passa ai due riquadri a sinistra e trova il colore del carattere.
- Cambia il valore in qualcosa di diverso o seleziona il punto di colore per usare un selettore.
La modifica apparirà in modo dinamico al termine della modifica. Puoi cambiare colore, dimensione, carattere, sfondo e tutto ciò che riguarda il carattere. Non è possibile salvare il lavoro ma le modifiche rimarranno per quella sessione.
Puoi cambiare tutto sulla pagina che è l'ideale se hai un'idea e vuoi verificarla rapidamente prima di avviare tutte le tue app di sviluppo. Tutto quello che devi fare è ricordare quali modifiche hai apportato e dove non puoi salvarle qui. Dovrai fare uno screenshot o registrare le modifiche e replicarle all'interno dei tuoi strumenti di sviluppo per renderle valide.
La modifica di una pagina Web nel browser è un modo semplice per sperimentare o giocare con le pagine. È anche un buon modo per imparare un po 'sullo sviluppo web senza dover acquistare costosi strumenti di sviluppo. Ora sai come, vai e gioca!
