Hur man inspekterar ett element på en Mac

Innehållsförteckning:

Hur man inspekterar ett element på en Mac
Hur man inspekterar ett element på en Mac
Anonim

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.

  1. I Safari, klicka Safari > Preferences.

    Image
    Image
  2. Klicka Advanced.

    Image
    Image
  3. Klicka Visa utvecklingsmeny i menyraden och stäng sedan fönstret.

    Image
    Image
  4. När du surfar på en webbplats, högerklicka på objektet du vill inspektera.
  5. Klicka Inspektera element.

    Image
    Image
  6. Du kan nu se koden bakom webbplatsen du har inspekterat.

    Image
    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.

  1. Bläddra till en webbplats i Chrome.
  2. Högerklicka på elementet du vill inspektera.
  3. Klicka Inspektera.

    Image
    Image
  4. Du kan nu se koden i ett sidofönster på Chrome.

    Image
    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.

  1. I Safari, klicka Safari > Preferences.

    Image
    Image
  2. Klicka Advanced.

    Image
    Image
  3. Klicka Visa utvecklingsmeny i menyraden och stäng sedan fönstret.

    Image
    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.

  1. När du surfar på en webbplats, högerklicka på objektet du vill inspektera.
  2. Klicka Inspektera element.
  3. Dubbelklicka på texten i koden för att göra den redigerbar.
  4. Ta bort det eller ange en ny textsträng.
  5. Tryck på Enter.
  6. 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.

Rekommenderad: