{"id":107736,"date":"2022-10-29T10:19:57","date_gmt":"2022-10-29T15:19:57","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/hur-man-inspekterar-element-pa-iphone-allt-du-behover-veta\/"},"modified":"2022-10-29T10:19:57","modified_gmt":"2022-10-29T15:19:57","slug":"hur-man-inspekterar-element-pa-iphone-allt-du-behover-veta","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/hur-man-inspekterar-element-pa-iphone-allt-du-behover-veta\/","title":{"rendered":"Hur man inspekterar element p\u00e5 iPhone: Allt du beh\u00f6ver veta"},"content":{"rendered":"
\n

Om du inte vet s\u00e5 best\u00e5r en webbsida av en m\u00e4ngd element som \u00e4r formaterade f\u00f6r att visas som en enda enhet. Webbutvecklare m\u00e5ste f\u00f6rst\u00e5 var och en av dessa element, hur de \u00e4r upplagda p\u00e5 en webbsida och se hur var och en av dem fungerar p\u00e5 egen hand.<\/p>\n

Windows- och Mac-anv\u00e4ndare skulle vara bekanta med alternativet \u201cInspektera\u201d eller \u201cInspektera element\u201d som \u00e4r tillg\u00e4ngligt n\u00e4r du h\u00f6gerklickar p\u00e5 en webbsida. Vad det h\u00e4r alternativet erbjuder \u00e4r ett s\u00e4tt att se en webbplatss k\u00e4llkod, se alla dess element, kodraden bakom var och en av dem och redigera dess Javascript, HTML, CSS och alla andra mediefiler som finns p\u00e5 den. P\u00e5 s\u00e5 s\u00e4tt f\u00e5r du inte bara l\u00e4ra dig hur en viss webbplats fungerar och fungerar utan g\u00f6ra \u00e4ndringar i den i din egen webbl\u00e4sare utan att de p\u00e5verkar den faktiska webbsidan. <\/p>\n

\u00c4ven om inspekteringsalternativet \u00e4r k\u00e4nt f\u00f6r att vara ett \u201cutvecklare\u201d-verktyg men det \u00e4r inte bara utvecklare som drar nytta av det. \u00c4ven nyb\u00f6rjare och icke-utvecklare kan anv\u00e4nda det h\u00e4r verktyget f\u00f6r att l\u00e4ra sig hur en webbplats \u00e4r byggd och hur var och en av dess element fungerar tillsammans. Om du ser fram emot att anv\u00e4nda alternativet inspektera element n\u00e4r du surfar p\u00e5 webben p\u00e5 en iPhone, b\u00f6r det h\u00e4r inl\u00e4gget hj\u00e4lpa dig att hitta ett s\u00e4tt att g\u00f6ra det. <\/p>\n

Relaterad:<\/strong> Hur man inspekterar element p\u00e5 Android<\/p>\n

<\/span>Kan du inspektera webbelement direkt p\u00e5 Safari?<\/span><\/h2>\n

Det enkla svaret \u00e4r nej. Safari p\u00e5 iOS, liksom m\u00e5nga andra mobila webbl\u00e4sare, erbjuder dig inte ett inbyggt inspektionsverktyg f\u00f6r att se en webbsidas utveckling. Apple ger ingen anledning till varf\u00f6r det inte finns ett s\u00e5dant alternativ men vi tror att det har att g\u00f6ra med hur sm\u00e5 sk\u00e4rmar \u00e4r p\u00e5 smartphones. En mindre sk\u00e4rmstorlek kan g\u00f6ra det sv\u00e5rare f\u00f6r anv\u00e4ndare att navigera runt rutorna som inspekteras eftersom du kanske m\u00e5ste placera mark\u00f6ren f\u00f6rsiktigt n\u00e4r du vill redigera en webbsidas kod eller till och med hitta en. <\/p>\n

En annan anledning till detta kan vara bristen p\u00e5 datorkraft p\u00e5 smartphones. \u00c4ven om moderna iPhones har tillr\u00e4ckligt med kraft f\u00f6r att k\u00f6ra grafikintensiva spel, kan det vara knepigt att se en webbplatss sidinformation eftersom inte alla webbplatser skapas lika. Vissa webbplatser kan ha m\u00e5nga resurser och lager som \u00e4r noggrant utformade f\u00f6r att f\u00e5 det att se s\u00f6ml\u00f6st ut, men samma resurser kan ta lite tid att ladda upp n\u00e4r de inspekteras. <\/p>\n

Relaterad:<\/strong> Slinga en video p\u00e5 iPhone [Guide]<\/p>\n

<\/span>Inspektera Element p\u00e5 iPhone: Vilka andra alternativ har du?<\/span><\/h2>\n

\u00c4ven om du inte kan anv\u00e4nda verktyget \u201cInspektera element\u201d i Safari-appen p\u00e5 iOS, finns det fortfarande s\u00e4tt att kringg\u00e5 denna begr\u00e4nsning. Nedan finns tre s\u00e4tt att inspektera delar av webbsidor som du bes\u00f6ker p\u00e5 Safari p\u00e5 din iPhone. <\/p>\n

<\/span>Metod #01: Anv\u00e4nda Safari p\u00e5 din Mac<\/span><\/h3>\n

Om du \u00e4ger en macOS-enhet ut\u00f6ver din iPhone kan du fortfarande inspektera webbsidor direkt fr\u00e5n Safari-appen, men p\u00e5 Mac. Apple l\u00e5ter dig fels\u00f6ka webbsidor fr\u00e5n Safari p\u00e5 iOS som du skulle g\u00f6ra p\u00e5 Mac med hj\u00e4lp av dess \u201cUtveckla\u201d-verktyg. \u00c4ven om processen med att fels\u00f6ka en webbplats \u00e4r relativt enkel, kan dess initiala installation vara l\u00e4ngre \u00e4n vad du kan f\u00f6rv\u00e4nta dig. Men oroa dig inte, vi kommer att f\u00f6rklara installationsprocessen p\u00e5 enklast m\u00f6jliga s\u00e4tt och hj\u00e4lpa dig att inspektera sidor med l\u00e4tthet efter f\u00f6rsta g\u00e5ngen. <\/p>\n

Aktivera Web Inspector p\u00e5 iOS<\/strong><\/p>\n

F\u00f6r att kunna fels\u00f6ka webbelement m\u00e5ste du f\u00f6rst aktivera Web Inspector f\u00f6r Safari-appen p\u00e5 iOS. F\u00f6r att g\u00f6ra detta, \u00f6ppna appen Inst\u00e4llningar och v\u00e4lj \u201cSafari\u201d.<\/p>\n

Inuti Safari, scrolla ner och tryck p\u00e5 \u201cAvancerat\u201d. <\/p>\n

P\u00e5 n\u00e4sta sk\u00e4rm trycker du p\u00e5 reglaget bredvid \u201cWeb Inspector\u201d tills den blir gr\u00f6n. <\/p>\n

Initial installation p\u00e5 Mac<\/strong><\/p>\n

N\u00e4r du framg\u00e5ngsrikt har aktiverat Web Inspector f\u00f6r Safari p\u00e5 iOS, \u00e4r det nu dags att g\u00f6ra installationen p\u00e5 din Mac. P\u00e5 Mac, \u00f6ppna programmet Safari, klicka p\u00e5 alternativet \u201cSafari\u201d i menyraden och v\u00e4lj \u201cInst\u00e4llningar\u201d. <\/p>\n

I f\u00f6nstret som visas v\u00e4ljer du fliken \u201cAvancerat\u201d uppifr\u00e5n och markerar rutan \u201cVisa utvecklingsmenyn i menyraden\u201d. <\/p>\n

Du b\u00f6r nu se alternativet \u2018Utveckla\u2019 visas i menyraden h\u00f6gst upp. <\/p>\n

Anv\u00e4nd nu USB-kabeln som f\u00f6ljde med din iPhone och uppr\u00e4tta en anslutning mellan iPhone och Mac. N\u00e4r din iPhone ansluts till Mac kan du klicka p\u00e5 \u201cUtveckla\u201d i menyraden och se om din iPhone visas i listan \u00f6ver enheter. Om ja, klicka p\u00e5 enhetsnamnet fr\u00e5n den h\u00e4r listan. <\/p>\n

F\u00f6r att vara s\u00e4ker p\u00e5 att du kan inspektera webbsidor tr\u00e5dl\u00f6st utan att beh\u00f6va en USB-kabel som du gjorde nyss, klicka p\u00e5 alternativet \u201cAnslut via n\u00e4tverk\u201d n\u00e4r iPhone-menyn \u00f6ppnas. <\/p>\n

Nu kan du koppla bort din iPhone fr\u00e5n Mac och du kommer fortfarande att kunna inspektera webbsidor utan att ansluta en kabel mellan dem. <\/p>\n

Inspektera webbsidor fr\u00e5n iOS p\u00e5 en Mac<\/strong><\/p>\n

Nu n\u00e4r du har aktiverat \u201cAnslut via n\u00e4tverk\u201d p\u00e5 \u201cUtveckla\u201d-menyn kan du inspektera webbsidor fr\u00e5n Safari p\u00e5 iOS direkt p\u00e5 din Mac. Du beh\u00f6ver bara se till att b\u00e5de iPhone och Mac \u00e4r anslutna till samma tr\u00e5dl\u00f6sa n\u00e4tverk f\u00f6r att kunna fels\u00f6ka webbsidor tr\u00e5dl\u00f6st. <\/p>\n

F\u00f6r detta, \u00f6ppna Safari-appen p\u00e5 din iPhone och g\u00e5 till webbsidan du vill inspektera. <\/p>\n

Med din iPhone ol\u00e5st och den valda webbsidan \u00f6ppen, flytta \u00f6ver till din Mac och \u00f6ppna Safari-applikationen d\u00e4r. Klicka h\u00e4r p\u00e5 \u2018Utveckla\u2019 fr\u00e5n menyraden och g\u00e5 till \u2018iPhone\u2019. <\/p>\n

N\u00e4r du h\u00e5ller muspekaren \u00f6ver din \u201ciPhone\u201d b\u00f6r du se en lista \u00f6ver webbsidor som \u00e4r \u00f6ppna p\u00e5 iOS. Klicka p\u00e5 webbsidan du vill inspektera fr\u00e5n den h\u00e4r listan. <\/p>\n

Ett nytt f\u00f6nster kommer att laddas upp p\u00e5 Mac som visar all information som kan inspekteras fr\u00e5n den valda webbsidan. <\/p>\n

N\u00e4r som helst under din inspektion kommer du att kunna se vilken del av sidan en kodrad pekar p\u00e5 genom att leta efter ett bl\u00e5tt omr\u00e5de p\u00e5 din iPhone.<\/p>\n

Detta bl\u00e5a omr\u00e5de indikerar att koden som du sv\u00e4var \u00f6ver p\u00e5 Mac \u00e4r det som utg\u00f6r det markerade elementet f\u00f6r den h\u00e4r webbsidan. Om du flyttar mellan olika kodrader flyttas denna bl\u00e5 h\u00f6jdpunkt \u00f6ver olika delar av sidan p\u00e5 din iPhone i realtid. <\/p>\n

Relaterad:<\/strong> Hur man beh\u00e5ller effekter i FaceTime<\/p>\n

<\/span>Metod #02: Anv\u00e4nda genv\u00e4gar p\u00e5 iOS <\/span><\/h3>\n

Om du inte \u00e4ger en Mac eller vill ha en smygtitt p\u00e5 en webbplats direkt fr\u00e5n din iPhone, kommer du att bli glad att veta att iOS Genv\u00e4gar-appen f\u00f6r detta. Genv\u00e4gar-appen p\u00e5 iOS erbjuder ett g\u00e4ng f\u00f6rgjorda val som l\u00e5ter dig se en sidas k\u00e4llkod, redigera en webbsida, ta bilder fr\u00e5n en webbplats och leta efter \u00e4ldre versioner av en webbsida fr\u00e5n Safari-appen. Tyv\u00e4rr finns det ingen enskild genv\u00e4g som erbjuder fullfj\u00e4drad webbfels\u00f6kning p\u00e5 iOS, s\u00e5 du m\u00e5ste l\u00e4gga till en genv\u00e4g f\u00f6r vart och ett av dessa syften. <\/p>\n

Vi hittade f\u00f6ljande genv\u00e4gar som du kan anv\u00e4nda f\u00f6r att utf\u00f6ra fels\u00f6kning p\u00e5 webbplatser direkt fr\u00e5n iOS. Dessa \u00e4r:<\/p>\n

Visa k\u00e4lla \u2013 Den h\u00e4r genv\u00e4gen l\u00e5ter dig visa k\u00e4llkoden f\u00f6r en webbsida i basbensformat. <\/p>\n

Redigera webbsida \u2013 Den h\u00e4r genv\u00e4gen l\u00e5ter dig redigera inneh\u00e5llet p\u00e5 en webbsida lokalt s\u00e5 att du kan testa en ny design eller ett nytt format och hur det kan se ut p\u00e5 din iPhone. <\/p>\n

H\u00e4mta bilder fr\u00e5n sidan \u2013 En prim\u00e4r anledning till att inspektera en sida kan vara att titta p\u00e5 bilder eller spara de som annars \u00e4r ointeraktiva. Den h\u00e4r genv\u00e4gen tar alla bilder fr\u00e5n en viss webbsida och f\u00f6rhandsgranskar dem sedan tillsammans. Som sk\u00e4rmdumpen nedan visar kan du se varenda en av de 24 bilderna som finns p\u00e5 den valda webbsidan. <\/p>\n

Wayback Machine \u2013 Denna genv\u00e4g tar dig till en webbsidas Wayback Machine d\u00e4r du kan se dess tidigare versioner som f\u00f6rblir sparade p\u00e5 Internet Archive. <\/p>\n

Beroende p\u00e5 hur du vill inspektera webbsidor p\u00e5 iOS kan du l\u00e4gga till n\u00e5gon av dessa genv\u00e4gar till din iPhone genom att antingen klicka p\u00e5 de relevanta l\u00e4nkarna ovan eller s\u00f6ka efter dem i Genv\u00e4gar > Galleri. <\/p>\n

I s\u00f6kresultaten trycker du p\u00e5 genv\u00e4gen du vill l\u00e4gga till i iPhone. <\/p>\n

N\u00e4r en f\u00f6rhandsgranskningssk\u00e4rm \u00f6ppnas trycker du p\u00e5 alternativet \u201cL\u00e4gg till widget\u201d l\u00e4ngst ned. <\/p>\n

Genv\u00e4garna som ni alla kommer att visas p\u00e5 sk\u00e4rmen Mina genv\u00e4gar > Alla genv\u00e4gar och de kommer ocks\u00e5 att vara tillg\u00e4ngliga i Safaris Share-blad. <\/p>\n

F\u00f6r att inspektera en webbsida, \u00f6ppna den p\u00e5 Safari och tryck p\u00e5 knappen \u201cDela\u201d l\u00e4ngst ned. <\/p>\n

I bladet Dela som visas, scrolla ned och hitta genv\u00e4garna du har lagt till p\u00e5 din iPhone. <\/p>\n

Om du v\u00e4ljer \u201cRedigera webbsida\u201d kan du direkt redigera delar av webbsidan. N\u00e4r du v\u00e4ljer n\u00e5got av de andra tre alternativen kommer du att bli tillfr\u00e5gad om du vill att genv\u00e4gen ska komma \u00e5t webbsidan. Klicka h\u00e4r p\u00e5 \u201cTill\u00e5t en g\u00e5ng\u201d. <\/p>\n

Relaterad:<\/strong> Hur man l\u00e4gger till WidgetSmith p\u00e5 startsk\u00e4rmen<\/p>\n

<\/span>Metod #03: Anv\u00e4nda appar fr\u00e5n tredje part<\/span><\/h3>\n

Om du inte \u00e4r n\u00f6jd med ovanst\u00e5ende resultat m\u00e5ste du utforska appar fr\u00e5n tredje part f\u00f6r att kunna inspektera delar av en webbsida. I likhet med Safari kommer du inte att hitta ett s\u00e4tt att inspektera en webbsida i de mest popul\u00e4ra webbl\u00e4sarna (Chrome, Firefox, Brave, etc.). Ist\u00e4llet m\u00e5ste du lita p\u00e5 en app som har skapats f\u00f6r att utf\u00f6ra denna specifika uppgift och appar som dessa kan vara sv\u00e5ra att hitta.<\/p>\n

Medan en enkel s\u00f6kning p\u00e5 App Store kommer att ge dig flera resultat f\u00f6r att inspektera webbelement, kommer du inte att hitta s\u00e5 m\u00e5nga appar som \u00e4r tillg\u00e4ngliga gratis och f\u00e5r h\u00f6ga betyg. Baserat p\u00e5 feedback fr\u00e5n anv\u00e4ndare rekommenderar vi att du installerar Inspect Browser- eller Gear Browser-appar fr\u00e5n App Store, som tillhandah\u00e5ller elementinspektion och redigering p\u00e5 JavaScript, CSS och HTML. <\/p>\n

Det \u00e4r allt du beh\u00f6ver veta om att inspektera element p\u00e5 en iPhone. <\/em><\/p>\n

RELATERAD<\/strong><\/p>\n<\/p><\/div>\n

\n
\n

Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n