Hur man redigerar webbsidor på Safari med Inspect Element

Med sitt Inspect Element-verktyg låter Safari dig mixa med front-end-koden på vilken webbsida som helst. Om du vill testa hur en sida skulle se ut med annan text eller bilder kan du göra det genom att ändra dess kod med Inspect Element.

Det här är en enkel guide riktad till nybörjare för att förklara hur du kan börja experimentera med Inspect Element i Safari för att redigera en webbplatss text och bilder med minimal kodkunskap.

Vad är Inspect Element?

Inspect Element är ett utvecklarverktyg. Det är tillgängligt på Safari, men även på andra webbläsare som Chrome, Firefox och Edge. Med Inspect Element kan du kika bakom ridån på en webbplats för att avslöja dess front-end-kod, som HTML och CSS. Det ger dig dock inte synlighet av back-end, som dess databaser.

Du kan inte bara se den här koden, utan du kan justera den också. Det betyder att du kan ändra utseendet på en webbplats. Du kan ersätta en bild, formulera om viss text, använda ett annat teckensnitt, byta färgschema och mer. Dessa redigeringar är dock lokala. De kommer inte att synas för någon annan än dig; de försvinner när du uppdaterar eller flyttar bort från sidan.

Varför ska du använda Inspect Element?

Inspect Element är ett utmärkt verktyg om du är en blivande webbutvecklare. Du kan bokstavligen se koden som driver din favoritwebbplats och justera den som du vill i en verklig miljö. Det är många roliga insikter du kan få genom att använda Inspect Element.

Till exempel kan företagsägare titta på nyckelord som ingår i en konkurrents webbplats, eller designers kan använd Inspect Element för att identifiera ett teckensnitt som de tycker är attraktiva eller att snabbt testa ett annat färgschema på sin hemsida.

För närvarande kommer vi att fokusera på att redigera grunderna för en webbsida med hjälp av Inspect Element.

Hur man kommer åt Inspect Element på Safari

Du kan öppna Inspect Element på Safari med hjälp av utvecklarmenyn:

1. Öppna Safari.
2. Klick Safari i den översta menyraden.
3. Välj i rullgardinsmenyn Inställningar.
4. Välj Avancerad alternativ.
5. Markera rutan som säger Visa Utveckla-menyn i menyraden.

När du har valt det här alternativet kan du Högerklicka på en webbsida och välj Inspektera elementet. Alternativt kan du välja Utveckla i menyraden och sedan Visa webbinspektören.

Hur man hittar webbelement i Inspect Element

För att börja redigera ett element, Högerklicka vad du vill redigera och klicka Inspektera elementet. Detta öppnar utvecklarfönstret, med relevant avsnitt markerat. Du kanske upptäcker att det speciella elementet du vill elementa (bilden eller texten, till exempel) är dolt; för att hitta den, använd pilar till vänster för att expandera de kapslade avsnitten.

Klicka på för att begränsa ditt urval målikon från verktygsfältet Inspektera element. Nu, när du navigerar genom koden, framhäver den det avsnittet på webbplatsen. Eller så kan du använda markören för att peka ut ett avsnitt på webbplatsen. Detta är praktiskt när du vill finslipa på något speciellt i ett trångt område på en webbsida.

Hur man redigerar en webbplatss text med hjälp av Inspect Element

För att göra en bit text redigerbar efter att ha hittat den i en webbplatss källkod, dubbelklicka den. Du kan skriva ny text direkt i koden, eller ta bort befintlig text. När redigeringen är klar för en given textsträng, tryck Stiga på, och texten på webbsidan kommer att ändras.

Så enkelt är det verkligen! De enda gångerna detta inte fungerar är när texten faktiskt är en del av en bild, som en logotyp.

Hur man redigerar en webbplatss bilder med Inspect Element

Medan bilder visas visuellt för dig i gränssnittet, visas de i webbplatskoden som länkar. Du kan Högerklicka och bild och välj Inspektera elementet för att hoppa till där bilden är i koden. Webbplatsbilder har vanligtvis JPG-, GIF- eller PNG-filtillägg, men inte enbart.

Dubbelklicka dessa bildsträngar och du kan redigera dem, eller bara spara dem på ditt system om så önskas. Om du vill ersätta bilden byter du bort den för en ersättningsbilds-URL. Eller så kan du ta bort kodsträngen helt för att ta bort bilden från visningen.

Gräva in på webbplatser med Safari

Safaris Inspect Element-verktyg låter dig enkelt hitta och ändra koden som motsvarar text och bilder, vilket är lika enkelt som att byta ut en text eller URL-sträng. När du är klar med att redigera en webbplats med Inspect Element uppdaterar du helt enkelt sidan och allt kommer att bli normalt igen.

Hur du ändrar webbläsarens användaragent och trickwebbplatser

Läs Nästa

Om författaren