Hvordan redigere nettsider på Safari ved å bruke Inspect Element

Med Inspect Element-verktøyet lar Safari deg tukle med front-end-koden til enhver nettside. Hvis du vil teste hvordan en side vil se ut med annen tekst eller bilder, kan du gjøre det ved å endre koden med Inspect Element.

Dette er en enkel guide rettet mot nybegynnere for å forklare hvordan du kan begynne å eksperimentere med Inspect Element i Safari for å redigere et nettsteds tekst og bilder med minimal kodekunnskap.

Hva er Inspiser element?

Inspect Element er et utviklerverktøy. Den er tilgjengelig på Safari, men også på andre nettlesere som Chrome, Firefox og Edge. Med Inspect Element kan du kikke bak gardinen på et nettsted for å avsløre front-end-koden, som HTML og CSS. Det gir deg imidlertid ikke synlighet av back-end, som databasene.

Ikke bare kan du se denne koden, men du kan justere den også. Dette betyr at du kan endre utseendet til en nettside. Du kan erstatte et bilde, omformulere litt tekst, bruke en annen skrifttype, bytte fargeskjema og mer. Disse redigeringene er imidlertid lokale. De vil ikke vises for noen andre enn deg; de forsvinner når du oppdaterer eller beveger deg bort fra siden.

Hvorfor bør du bruke Inspect Element?

Inspect Element er et flott verktøy hvis du er en spirende nettutvikler. Du kan bokstavelig talt se koden som driver favorittnettstedet ditt, tilpasse det som du ønsker i et virkelig miljø. Det er mange morsomme innsikter du kan få ved å bruke Inspect Element.

For eksempel kan bedriftseiere se på søkeord som er inkludert på en konkurrents nettside, eller designere kan bruk Inspiser element for å identifisere en font som de finner attraktive eller for raskt å teste et annet fargevalg på nettsiden deres.

For nå skal vi fokusere på å redigere det grunnleggende for en nettside ved å bruke Inspect Element.

Slik får du tilgang til Inspect Element på Safari

Du kan åpne Inspect Element på Safari ved å bruke utviklermenyen:

1. Åpne Safari.
2. Klikk Safari i den øverste menylinjen.
3. Velg fra rullegardinmenyen Preferanser.
4. Velg Avansert alternativ.
5. Merk av i boksen som sier Vis Utvikle-menyen i menylinjen.

Etter å ha valgt dette alternativet, kan du Høyreklikk på en nettside og velg Inspisér element. Alternativt kan du velge Utvikle i menylinjen, og deretter Vis nettinspektør.

Hvordan finne webelementer i Inspect Element

For å begynne å redigere et element, Høyreklikk det du ønsker å redigere og klikk Inspisér element. Dette åpner utviklervinduet, med den relevante delen uthevet. Du kan finne ut at det spesielle elementet du ønsker å elemente (bildet eller teksten, for eksempel) er skjult; for å finne den, bruk piler til venstre for å utvide de nestede delene.

Klikk på for å begrense utvalget målikon fra verktøylinjen Inspiser element. Nå, mens du navigerer gjennom koden, fremhever den den delen på nettstedet. Eller du kan bruke markøren til å finne en del på nettstedet. Dette er nyttig når du ønsker å finpusse noe spesielt i et overfylt område på en nettside.

Hvordan redigere et nettsteds tekst ved å bruke Inspiser element

For å gjøre et stykke tekst redigerbart etter å ha funnet det i et nettsteds kildekode, Dobbeltklikk den. Du kan skrive inn ny tekst direkte i koden, eller slette eksisterende tekst. Når redigeringen er fullført for en gitt tekststreng, trykk Tast inn, og teksten på nettsiden vil endres.

Det er egentlig så enkelt som det! De eneste gangene dette ikke fungerer er når teksten faktisk er en del av et bilde, som en logo.

Hvordan redigere et nettsteds bilder ved hjelp av Inspect Element

Mens bilder vises visuelt for deg på front-end, vises de som lenker i nettsidekoden. Du kan Høyreklikk og bilde og velg Inspisér element for å hoppe til der bildet er i koden. Nettstedsbilder har vanligvis JPG-, GIF- eller PNG-filtypene, men ikke utelukkende.

Dobbeltklikk disse bildestrengene og du kan redigere dem, eller bare lagre dem på systemet ditt om ønskelig. Hvis du vil erstatte bildet, bytt det ut for en erstatningsbilde-URL. Eller du kan slette kodestrengen helt for å fjerne bildet fra visningen.

Grav inn på nettsteder ved hjelp av Safari

Safaris Inspect Element-verktøy lar deg enkelt finne og endre koden som tilsvarer tekst og bilder, noe som er like enkelt som å bytte ut en tekst eller URL-streng. Når du er ferdig med å redigere et nettsted med Inspect Element, oppdaterer du bare siden og alt vil bli normalt igjen.

Hvordan endre nettleserens brukeragent og triksesider

Les Neste

Om forfatteren