Vad att veta
-
I Safari: Högerklicka på en webbsida och välj Inspect Element.
- I Chrome kan du högerklicka och klicka på Inspect.
- För att aktivera funktionen i Safari: Safari > Preferences > Advanced > kontrollera Visa utvecklingsmeny i menyraden box.
Den här artikeln lär dig hur du inspekterar en webbplatss element på Mac. Den tittar på hur du gör det via Safari och Google Chrome.
Hur använder du funktionen Inspektera element på en Mac?
Innan du inspekterar element på Mac när du använder Safari, måste du aktivera utvecklarmenyn i webbläsaren. Här är en titt på hur du slår på den och vad du ska göra för att inspektera ett element.
Om du kan se Framkalla mellan bokmärken och fönster, har utvecklarmenyn redan aktiverats, och du kan hoppa till steg 4.
Använda funktionen Inspektera element i Safari
Så här använder du Inspect Element i Safari, standardwebbläsaren på Mac-datorer.
-
I Safari, klicka Safari > Preferences.
Image -
Klicka Advanced.
Image -
Klicka Visa utvecklingsmeny i menyraden och stäng sedan fönstret.
Image - När du surfar på en webbplats, högerklicka på objektet du vill inspektera.
-
Klicka Inspektera element.
Image -
Du kan nu se koden bakom webbplatsen du har inspekterat.
Image
Använda funktionen Inspect Element i Chrome på en Mac
Om du använder Chrome istället för Safari på din Mac är det ännu enklare att se ett element eftersom det inte finns något behov av att aktivera funktionen. Så här gör du.
- Bläddra till en webbplats i Chrome.
- Högerklicka på elementet du vill inspektera.
-
Klicka Inspektera.
Image -
Du kan nu se koden i ett sidofönster på Chrome.
Image
Varför kan jag inte inspektera på min Mac?
Du kanske inte kan inspektera ett element på din Mac om du inte har aktiverat Developer-menyn i Safari. Här är en påminnelse om hur man gör.
-
I Safari, klicka Safari > Preferences.
Image -
Klicka Advanced.
Image -
Klicka Visa utvecklingsmeny i menyraden och stäng sedan fönstret.
Image
Hur man gör webbplatsändringar genom att inspektera elementet
Förutom att du kan se koden på en webbplats, är det också möjligt att tillfälligt ändra vilket webbplatselement som helst genom Inspect Element. Så här gör du det via Safari.
Processen är väldigt lik i andra webbläsare.
- När du surfar på en webbplats, högerklicka på objektet du vill inspektera.
- Klicka Inspektera element.
- Dubbelklicka på texten i koden för att göra den redigerbar.
- Ta bort det eller ange en ny textsträng.
- Tryck på Enter.
- Koden har nu tillfälligt ändrats bara för din fördel.
Varför skulle du vilja använda funktionen Inspektera element?
Att kunna inspektera ett element är användbart av många skäl.
- Att ändra kod i farten. Webbplatsdesigners kan tillfälligt ändra saker på en webbplats för att se hur ändringarna påverkar saker och ting.
- För att kontrollera koden. Både designers och marknadsförare kan kontrollera koden för att bekräfta att saker som Google Analytics-information finns där.
- För att visa bilder separat från en webbplats. Om en webbplats inte tillåter dig att öppna en bild i en ny flik eller ett nytt fönster, gör det möjligt att visa elementet.
-
Tinker. Att se koden för en webbsida kan hjälpa dig att förstå vad du ser, och ta bort mysteriet om vad och varför vad som händer med webbplatsen du är på. Det är som att ta isär en apparat för att se hur den fungerar, men det finns inga skruvar att tappa i det här fallet.
FAQ
Är det lagligt att inspektera en webbplats?
Ja. Men om du planerar att använda någon kod eller tillgångar från en webbplats, kontrollera med ägaren och lägg till en upphovsrättsanmärkning.
Hur kopierar jag HTML från en webbplats med inspekteringselement?
I Chrome, högerklicka på sidan och välj Inspektera, gå sedan till den övre delen och högerklicka på taggen (t.ex.). Välj Copy > Copy outerHTML och klistra sedan in koden i en text- eller HTML-fil.
Kan jag kopiera CSS från en webbplats med inspect-element?
Ja. Högerklicka på elementet du vill kopiera och välj Inspect. Högerklicka på den markerade koden och välj Copy > Copy styles.
Hur ser jag mina sparade lösenord med inspekteringselementet?
För att avslöja dolda lösenord, högerklicka på lösenordstextrutan och välj Inspektera. Leta efter type=”lösenord” i det markerade avsnittet och ersätt lösenord med text. Det finns enklare sätt att visa alla dina lösenord i Chrome.
