Hur man inspekterar element på iPhone: Allt du behöver veta

Om du inte vet så består en webbsida av en mängd element som är formaterade för att visas som en enda enhet. Webbutvecklare måste förstå var och en av dessa element, hur de är upplagda på en webbsida och se hur var och en av dem fungerar på egen hand.

Windows- och Mac-användare skulle vara bekanta med alternativet "Inspektera" eller "Inspektera element" som är tillgängligt när du högerklickar på en webbsida. Det här alternativet erbjuder är ett sätt att se en webbplatss källkod, se alla dess element, kodraden bakom var och en av dem och redigera dess Javascript, HTML, CSS och alla andra mediefiler som finns på den. På så sätt får du inte bara lära dig hur en viss webbplats fungerar och fungerar utan göra ändringar i den i din egen webbläsare utan att de påverkar den faktiska webbsidan. 

Även om inspekteringsalternativet är känt för att vara ett "utvecklare"-verktyg men det är inte bara utvecklare som drar nytta av det. Även nybörjare och icke-utvecklare kan använda det här verktyget för att lära sig hur en webbplats är byggd och hur var och en av dess element fungerar tillsammans. Om du ser fram emot att använda alternativet inspektera element när du surfar på webben på en iPhone, bör det här inlägget hjälpa dig att hitta ett sätt att göra det. 

Relaterat: Hur man inspekterar element på Android

Kan du inspektera webbelement direkt på Safari?

Det enkla svaret är nej. Safari på iOS, liksom många andra mobila webbläsare, erbjuder dig inte ett inbyggt inspektionsverktyg för att se en webbsidas utveckling. Apple ger ingen anledning till varför det inte finns ett sådant alternativ men vi tror att det har att göra med hur små skärmar är på smartphones. En mindre skärmstorlek kan göra det svårare för användare att navigera runt rutorna som inspekteras eftersom du kanske måste placera markören försiktigt när du vill redigera en webbsidas kod eller till och med hitta en. 

En annan anledning till detta kan vara bristen på datorkraft på smartphones. Även om moderna iPhones har tillräckligt med kraft för att köra grafikintensiva spel, kan det vara knepigt att se en webbplatss sidinformation eftersom inte alla webbplatser skapas lika. Vissa webbplatser kan ha många resurser och lager som är noggrant utformade för att få det att se sömlöst ut, men samma resurser kan ta lite tid att ladda upp när de inspekteras. 

Relaterat: Slinga en video på iPhone [Guide]

Inspektera Element på iPhone: Vilka andra alternativ har du?

Även om du inte kan använda verktyget "Inspektera element" i Safari-appen på iOS, finns det fortfarande sätt att kringgå denna begränsning. Nedan finns tre sätt att inspektera delar av webbsidor som du besöker på Safari på din iPhone. 

Metod #01: Använda Safari på din Mac

Om du äger en macOS-enhet utöver din iPhone kan du fortfarande inspektera webbsidor direkt från Safari-appen, men på Mac. Apple låter dig felsöka webbsidor från Safari på iOS som du skulle göra på Mac med hjälp av dess "Utveckla"-verktyg. Även om processen att felsöka en webbplats är relativt enkel, kan dess initiala installation vara längre än vad du kan förvänta dig. Men oroa dig inte, vi kommer att förklara installationsprocessen på enklast möjliga sätt och hjälpa dig att inspektera sidor med lätthet efter första gången. 

Aktivera Web Inspector på iOS

För att kunna felsöka webbelement måste du först aktivera Web Inspector för Safari-appen på iOS. För att göra detta, öppna appen Inställningar och välj "Safari".

Inuti Safari, scrolla ned och tryck på "Avancerat". 

På nästa skärm trycker du på reglaget bredvid "Web Inspector" tills den blir grön. 

Initial installation på Mac

När du framgångsrikt har aktiverat Web Inspector för Safari på iOS, är det nu dags att göra installationen på din Mac. På Mac, öppna programmet Safari, klicka på alternativet "Safari" i menyraden och välj "Inställningar". 

I fönstret som visas väljer du fliken "Avancerat" uppifrån och markerar rutan "Visa utvecklingsmenyn i menyraden". 

Du bör nu se alternativet 'Utveckla' visas i menyraden högst upp. 

Använd nu USB-kabeln som följde med din iPhone och upprätta en anslutning mellan iPhone och Mac. När din iPhone ansluts till Mac kan du klicka på "Utveckla" i menyraden och se om din iPhone visas i listan över enheter. Om ja, klicka på enhetsnamnet från den här listan. 

För att vara säker på att du kan inspektera webbsidor trådlöst utan att behöva en USB-kabel som du gjorde nyss, klicka på alternativet "Anslut via nätverk" när iPhone-menyn öppnas. 

Nu kan du koppla bort din iPhone från Mac och du kommer fortfarande att kunna inspektera webbsidor utan att ansluta en kabel mellan dem. 

Inspektera webbsidor från iOS på en Mac

Nu när du har aktiverat "Anslut via nätverk" på "Utveckla"-menyn kan du inspektera webbsidor från Safari på iOS direkt på din Mac. Du behöver bara se till att både iPhone och Mac är anslutna till samma trådlösa nätverk för att kunna felsöka webbsidor trådlöst. 

För detta, öppna Safari-appen på din iPhone och gå till webbsidan du vill inspektera. 

Med din iPhone olåst och den valda webbsidan öppen, flytta över till din Mac och öppna Safari-programmet där. Klicka här på 'Utveckla' från menyraden och gå till 'iPhone'. 

När du håller muspekaren över din "iPhone" bör du se en lista över webbsidor som är öppna på iOS. Klicka på webbsidan du vill inspektera från den här listan. 

Ett nytt fönster kommer att laddas upp på Mac som visar all information som kan inspekteras från den valda webbsidan. 

När som helst under din inspektion kommer du att kunna se vilken del av sidan en kodrad pekar på genom att leta efter ett blått område på din iPhone.

Det här blåa området indikerar att koden som du svävar över på Mac är det som utgör det markerade elementet för den här webbsidan. Om du flyttar mellan olika kodrader flyttas denna blå höjdpunkt över olika delar av sidan på din iPhone i realtid. 

Relaterat: Hur man behåller effekter i FaceTime

Metod #02: Använda genvägar på iOS 

Om du inte äger en Mac eller vill ha en smygtitt på en webbplats direkt från din iPhone, kommer du att bli glad att veta att iOS Genvägar-appen för detta. Genvägar-appen på iOS erbjuder ett gäng förgjorda val som låter dig se en sidas källkod, redigera en webbsida, ta bilder från en webbplats och leta efter äldre versioner av en webbsida från Safari-appen. Tyvärr finns det ingen enskild genväg som erbjuder fullfjädrad webbfelsökning på iOS, så du måste lägga till en genväg för vart och ett av dessa syften. 

Vi hittade följande genvägar som du kan använda för att utföra felsökning på webbplatser direkt från iOS. Dessa är:

Visa källa – Den här genvägen låter dig visa källkoden för en webbsida i basbensformat. 

Redigera webbsida – Den här genvägen låter dig redigera innehållet på en webbsida lokalt så att du kan testa en ny design eller ett nytt format och hur det kan se ut på din iPhone. 

Hämta bilder från sidan – En primär anledning till att inspektera en sida kan vara att titta på bilder eller spara de som annars är ointeraktiva. Den här genvägen tar alla bilder från en viss webbsida och förhandsgranskar dem sedan tillsammans. Som skärmdumpen nedan visar kan du se varenda en av de 24 bilderna som finns på den valda webbsidan. 

Wayback Machine – Denna genväg tar dig till en webbsidas Wayback Machine där du kan se dess tidigare versioner som förblir sparade på Internet Archive. 

Beroende på hur du vill inspektera webbsidor på iOS kan du lägga till någon av dessa genvägar till din iPhone genom att antingen klicka på de relevanta länkarna ovan eller söka efter dem i Genvägar > Galleri. 

I sökresultaten trycker du på genvägen du vill lägga till i iPhone. 

När en förhandsgranskningsskärm öppnas trycker du på alternativet "Lägg till widget" längst ned. 

Genvägarna som ni alla kommer att visas på skärmen Mina genvägar > Alla genvägar och de kommer också att vara tillgängliga i Safaris Share-blad.  

För att inspektera en webbsida, öppna den på Safari och tryck på knappen "Dela" längst ned. 

I bladet Dela som visas, scrolla ned och hitta genvägarna du har lagt till på din iPhone. 

Om du väljer "Redigera webbsida" kan du direkt redigera delar av webbsidan. När du väljer något av de andra tre alternativen kommer du att bli tillfrågad om du vill att genvägen ska komma åt webbsidan. Klicka här på "Tillåt en gång". 

Relaterat: Hur man lägger till WidgetSmith på startskärmen

Metod #03: Använda appar från tredje part

Om du inte är nöjd med resultaten ovan måste du utforska appar från tredje part för att kunna inspektera delar av en webbsida. I likhet med Safari kommer du inte att hitta ett sätt att inspektera en webbsida i de mest populära webbläsarna (Chrome, Firefox, Brave, etc.). Istället måste du lita på en app som har skapats för att utföra denna specifika uppgift och appar som dessa kan vara svåra att hitta.

Medan en enkel sökning på App Store kommer att ge dig flera resultat för att inspektera webbelement, kommer du inte att hitta så många appar som är tillgängliga gratis och får höga betyg. Baserat på feedback från användare rekommenderar vi att du installerar Inspect Browser- eller Gear Browser-  appar från App Store, som tillhandahåller elementinspektion och redigering på JavaScript, CSS och HTML. 

Det är allt du behöver veta om att inspektera element på en iPhone. 

RELATERAD

• Hur man klistrar in på iPhone utan att hålla
• Hur man lämnar en grupptext på iMessage och vad som händer
• Hur man hittar Airtags som spårar dig
• 30 ovanliga iOS 15-trick du bör känna till
• Hur man ställer in en slumpmässig bakgrund utan upprepning på iPhone