Når vi redigerer en webside, bruker vi vanligvis et spesifikt redigeringsverktøy som Adobe Dreamweaver, CoffeeCup, Bluefish eller et av de andre utviklingsverktøyene. Men hva med hvis vi bare har en idédugnad eller vil prøve ut noe på en direkteside? Vi kan lage en kopi av siden i verktøyet vårt du velger og leke med det. Eller vi kan gjøre det i nettleseren vår. Denne veiledningen skal vise deg hvordan du redigerer en webside i nettleseren din.
Firefox, som kalles utviklerverktøy, kaller funksjonen Inspect Element mens Chrome kaller den Inspect. Uansett er det en måte for nettleseren å kikke bak glansen på designet og se på koden som driver den. Denne funksjonen er ganske kjent og brukes mye. Det som ikke er så godt kjent, er muligheten til å gjøre endringer i den koden mens du er på farten.
Eventuelle endringer du gjør, vil ikke bli lagret, og det vil ikke påvirke live. Hvis du ikke vil laste siden i utviklerverktøyet ditt, er dette en fin måte å eksperimentere på.
Rediger hvilken som helst webside i nettleseren din
Dreamweaver og verktøy som det har en innebygd nettleseremulator som simulerer hvordan et design vil se ut i forskjellige nettlesere. Så gode som de er, de er ikke alltid nøyaktige, og du finner ofte når du lanserer et nettsted at det som så fantastisk ut i utviklerverktøyet ditt ser litt annerledes ut i en frittstående nettleser.
Vanligvis vil du starte nettstedet på en intern webserver og teste i en nettleser før du lanserer live av nettopp denne grunn. Hvis en side allerede er live, eller du bare vil prøve noe, er det ikke nødvendig å kopiere og laste den inn i utviklingsverktøyet ditt, du kan bare bruke nettleserens utviklerverktøy.
Jeg bruker Firefox, så jeg skal vise deg hvordan du bruker det. Chrome er imidlertid stort sett det samme.
- Åpne en webside du vil eksperimentere med i nettleseren din.
- Høyreklikk hvor som helst på siden og velg Inspiser.
Du skulle se siden din dele seg i to med en ny rute som vises nederst med en kode i den. Denne koden er drivkraften til siden du valgte. Ulike sideelementer er tilgjengelige fra kategoriene øverst i den nedre fanen. For eksempel ser vi Inspector, Console, Debugger, Style Editor og så videre i Firefox.
Hvis du kjører markøren over linjene i den nedre ruten, vil du se forskjellige deler av nettsiden markere. Kodelinjen du er på under høydepunktet er koden som påvirker den delen av siden.
- Hvis du vil leke med hvordan siden ser ut, kan du prøve Style Editor.
- Hvis du vil leke med hvordan siden fungerer, kan du prøve Console eller Accessibility.
- Hvis du vil avbryte feil eller løse et problem, bruker du Console eller Debugger
Ytelse er nyttig for SEO på stedet, men minne, nettverk og lagring brukes ikke så mye.
Husk at du kan rote rundt i Developer Tools så mye du vil, og det vil ikke påvirke nettstedet. Eventuelle endringer blir bare gjort på hvordan siden vises i din individuelle nettleser, du påvirker ikke selve nettstedet. Når du lukker verktøyet, går alle endringer tapt.
Gjør endringer på en side
Nå vet du at du kan endre noe du liker uten å påvirke selve nettstedet, la oss ha det litt moro. Finn et element på siden du vil redigere. Du kan endre en font, en skriftfarge, bakgrunnsbilde eller hva du vil. For dette eksemplet skal jeg endre skriftfargen på bannert overskriften.
- Høyreklikk det eksakte elementet du vil endre, og velg Inspiser.
- Marker linjen med enten 'tittel' eller 'H1' slik at teksten blir uthevet i toppruten.
- Naviger til venstre to ruter og finn skriftfarge.
- Endre verdien til noe annet, eller velg fargeprikken for å bruke en velger.
Endringen din vises dynamisk når du er ferdig med endringen. Du kan endre farge, størrelse, skrift, bakgrunn og alt om skriften. Du kan ikke lagre arbeidet, men endringene vil forbli den økten.
Du kan endre alt om siden som er ideell hvis du har en ide og raskt vil sjekke den ut før du starter opp alle utviklingsappene dine. Alt du trenger å gjøre er å huske hvilke endringer du gjorde, og hvor du ikke kan lagre dem her. Du må ta et skjermbilde eller registrere endringene og gjenskape dem i utviklerverktøyene dine for å få det til å feste seg.
Å redigere en webside i nettleseren er en fin måte å eksperimentere eller leke med sider på. Det er også en god måte å lære litt om nettutvikling uten å måtte kjøpe inn dyre utviklerverktøy. Nå vet du hvordan, gå og spille!
