Sådan redigeres websider på Safari ved hjælp af Inspect Element

Med værktøjet Inspect Element lader Safari dig pille ved frontend-koden på enhver webside. Hvis du vil teste, hvordan en side vil se ud med forskellig tekst eller billeder, kan du gøre det ved at ændre dens kode med Inspect Element.

Dette er en simpel vejledning rettet mod begyndere for at forklare, hvordan du kan begynde at eksperimentere med Inspect Element i Safari for at redigere et websteds tekst og billeder med minimal kodningsviden.

Hvad er Inspect Element?

Inspect Element er et udviklerværktøj. Den er tilgængelig på Safari, men også på andre webbrowsere som Chrome, Firefox og Edge. Med Inspect Element kan du kigge bag gardinet på et websted for at afsløre dets frontend-kode, såsom HTML og CSS. Det giver dig dog ikke synlighed af back-end, ligesom dens databaser.

Ikke kun kan du se denne kode, men du kan også justere den. Det betyder, at du kan ændre udseendet af en hjemmeside. Du kan erstatte et billede, omformulere noget tekst, bruge en anden skrifttype, skifte farveskema og meget mere. Disse redigeringer er dog lokale. De vil ikke vise sig for andre end dig; de forsvinder, når du opdaterer eller bevæger dig væk fra siden.

Hvorfor skal du bruge Inspect Element?

Inspect Element er et fantastisk værktøj, hvis du er en spirende webudvikler. Du kan bogstaveligt talt se koden, der driver dit yndlingswebsted, og tilpasse det som du ønsker i et virkeligt miljø. Der er mange sjove indsigter, du kan få ved at bruge Inspect Element.

For eksempel kan virksomhedsejere se på søgeord inkluderet i en konkurrents hjemmeside, eller designere kan brug Inspect Element til at identificere en skrifttype som de finder attraktive eller for hurtigt at teste et andet farveskema på deres hjemmeside.

Indtil videre vil vi fokusere på at redigere det grundlæggende på en webside ved hjælp af Inspect Element.

Sådan får du adgang til Inspect Element på Safari

Du kan åbne Inspect Element på Safari ved hjælp af udviklermenuen:

1. Åbn Safari.
2. Klik Safari i den øverste menulinje.
3. Vælg fra rullemenuen Præferencer.
4. Vælg Fremskreden mulighed.
5. Marker boksen, der siger Vis Udvikle-menuen i menulinjen.

Når du har valgt denne mulighed, kan du Højreklik på en webside og vælg Inspicer element. Alternativt kan du vælge Udvikle i menulinjen, og derefter Vis webinspektør.

Sådan finder du webelementer i Inspect Element

For at begynde at redigere et element, Højreklik hvad du ønsker at redigere og klik Inspicer element. Dette åbner udviklervinduet med det relevante afsnit fremhævet. Du vil måske opdage, at det særlige element, du ønsker at indsætte (f.eks. billedet eller teksten) er skjult; for at finde den skal du bruge pile til venstre for at udvide de indlejrede sektioner.

For at hjælpe med at indsnævre dit valg skal du klikke på målikon fra værktøjslinjen Inspect Element. Nu, mens du navigerer gennem koden, fremhæver den denne sektion på webstedet. Eller du kan bruge din markør til at lokalisere en sektion på webstedet. Dette er praktisk, når du vil finpudse noget bestemt i et overfyldt område på en webside.

Sådan redigeres en hjemmesides tekst ved hjælp af Inspect Element

For at gøre et stykke tekst redigerbart efter at have fundet det i et websteds kildekode, Dobbeltklik det. Du kan skrive ny tekst direkte i koden eller slette eksisterende tekst. Når redigeringen er færdig for en given tekststreng, skal du trykke Gå ind, og teksten på websiden ændres.

Det er virkelig så enkelt som det! De eneste gange dette ikke virker, er når teksten faktisk er en del af et billede, som et logo.

Sådan redigerer du et websteds billeder ved hjælp af Inspect Element

Mens billeder vises visuelt for dig på front-end, vises de i webstedskoden som links. Du kan Højreklik og billede og vælg Inspicer element for at hoppe til det sted, hvor billedet er i koden. Websitebilleder har typisk filtypenavne JPG, GIF eller PNG, dog ikke udelukkende.

Dobbeltklik disse billedstrenge, og du kan redigere dem, eller bare gemme dem på dit system, hvis det ønskes. Hvis du vil erstatte billedet, skal du skifte det til en erstatningsbillede-URL. Eller du kan slette kodestrengen helt for at fjerne billedet fra visningen.

Grav ind på websteder ved hjælp af Safari

Safaris Inspect Element-værktøj lader dig nemt finde og ændre koden, der svarer til tekst og billeder, hvilket er lige så nemt som at skifte en tekst eller URL-streng ud. Når du er færdig med at redigere et websted med Inspect Element, skal du blot opdatere siden, og alt vil være tilbage til det normale.

Sådan ændres din browsers brugeragent og trickwebsteder

Læs Næste

Om forfatteren