Safari för iOS inkluderar en valfri felsökningskonsol som hjälper webbutvecklare att spåra och lösa problem med webbsidor på iPhone och iPad.

Ännu bättre, med de senaste versionerna av iOS använder den faktiskt samma webbinspektör som Safari på skrivbordet också gör, vilket innebär att om du ansluter iPhone eller iPad till datorn kan du använda Safaris felsökningsverktyg direkt med din iOS- eller iPadOS-enhet

…

Låt oss lära oss hur du aktiverar den här funktionen på både nya och gamla versioner av iOS, och lära oss vad som är olika mellan versionerna också.

Hur man aktiverar och använder Web Inspector i Safari för iPhone och iPad

I moderna iOS- och iPadOS-versioner fungerar Safari webbinspektör så här:

1. Öppna Inställningar > Safari > Avancerat och tryck sedan för att aktivera "Web Inspector"
2. Anslut iPhone eller iPad till en Mac, gå sedan till Safari och aktivera utvecklarmenyn om du inte har gjort det genom att gå till Safari > Inställningar > Avancerat > Visa menyraden för utveckling
3. Dra ner menyraden "Utveckla" och hitta iPhone eller iPad och öppna sedan webbsidan du vill felsöka
4. Safari Web Inspector öppnas där du kan felsöka och inspektera webbelement från iOS- eller IPadOS-enheten direkt i Safari på Mac

Nu när du navigerar på iPhone eller iPad kommer du att se att webbinspektören i Safari på Mac kommer att uppdateras.

Du kan komma åt felsökningskonsolen via fliken Konsol i webbinspektören, och du kan komma åt felsökningsprogrammet via fliken Felsökning. Och naturligtvis är de vanliga webbinspektörsverktygen för element, resurser, nätverk etc också tillgängliga att använda.

Du kan också använda ett View Source-trick för iOS och iPadOS när du är på språng, om det också behövs.

Hur man aktiverar felsökningskonsolen på äldre iOS-versioner

Om du har en äldre version av iOS på en äldre iPhone eller iPad finns hela felsökningsupplevelsen på enheten och du har inte möjlighet att ansluta den till Safari på en Mac. Ändå är det fortfarande ganska användbart, så här fungerar det:

1. Starta "Inställningar" och tryck på "Safari"
2. Knacka på "Avancerat"
3. Skjut "Debug Console" till ON

När det är aktiverat trycker du på felsökningskonsolen högst upp på en Safari-skärm för att se webbsidesfel.

Standardlistan visar alla fel, men du kan gå ner till mer specifika HTML-, JavaScript- och CSS-fel genom att trycka på dem individuellt.

Ett annat användbart verktyg för mobila webbutvecklare är Firebug Lite för iOS, som använder ett javascript-bokmärke för att ladda en enklare version av det populära Firebug-utvecklingsverktyget. Den funktionen är förmodligen mest användbar för de äldre iOS-versionerna också, eftersom nyare versioner har nya möjligheter.

Använder du något webbutvecklarverktyg för iPhone eller iPad? Dela med oss ​​av tips, tricks, appar eller tekniker i kommentarerna nedan.