Share
Att bygga och felsöka webbplatser och webbapplikationer för mobila enheter kan vara ett problem. På skrivbordet har vi kraftfulla felsökningsverktyg; De flesta webbläsare har en webbinspektör av något slag. Men vi har inte verktyg för enheter som iPhone och iPad ... det är tills nu!
Med den senaste versionen av Safari 6 och iOS 6 kan du nu använda webbinspektören för att bygga och felsöka webbplatser på skrivbordet och på mobil Safari. Bäst av alla? Det är en enkel process att installera. Följ denna handledning och du får några kraftfulla felsökningsverktyg för mobila iDevices till hands på nolltid.
Moderna verktyg för webbutvecklare har varit en stor hjälp vid byggandet av webbplatser och webbapplikationer. Chrome har utvecklarverktyg. Firefox? Pyroman. Safari? Web inspektör. Alla extremt kraftfulla verktyg i webbutveckling.
Var så som det kan, till och med nu har det kämpat med att felsöka webbplatser och webbapplikationer på mobila enheter. Eftersom Safari och Chrome båda körs på webkitmotorn, finns det många likheter med hur skrivbords- och mobilwebbläsaren gör en webblayout. Således bygger och utformar de flesta designers / utvecklare sina webbplatser på skrivbordet med hjälp av en av dessa browsare, förutsatt att likheterna från webkitmotorn gör sidan lika lika på en mobil enhet.
Mobila och stationära plattformar är dock akut helt olika. De har olika minneskapaciteter, prestandapotential, inmatningsenheter och nätverksanslutning. Så det har blivit absolut nödvändigt att en designers felsökningsverktyg för mobila enheter blir mer prestanda och matchar deras skrivbords motsvarigheter.
Apples nya mjukvaruversioner av iOS 6 och Safari 6 ger många av funktionerna i felsökningsverktyg för skrivbords webbläsare som vi alla känner till och älskar för mobila enheter. Denna handledning visar dig den enkla processen att få setup för att felsöka mobila webbplatser med Safaris webbinspektör.
Innan vi börjar, en anteckning om kompatibilitet: Det finns lite dåliga nyheter för dem som använder Windows. Du kan bara felsöka med fjärrkontrollen på en Mac. Safari 6 för Windows är inte tillgängligt. Safari 6 är också tillgängligt för Mac-datorer med OSX Lion eller högre.
Det finns två sätt att använda webbinspektören i mobil Safari:
Vi täcker båda dessa metoder och låter dig välja vilken som passar din situation bäst.
Eftersom felsökning av mobila enheter med webbinspektör är en ny funktion måste du se till att du har all den senaste mjukvaran.
Verklig enhetsmetod: För att använda webbinspektör i kombination med en riktig iDevice behöver du följande:
Virtuell enhet Metod: För att använda webbinspektör i kombination med iOS-simulatorn behöver du följande:
Kontrollera programvaruversioner: För att kontrollera om du kör iOS 6 på din iDevice, gå till "Inställningar> Allmänt> Om" på din enhet.
För att kontrollera om du kör Safari 6 går du till Safari menyraden och klickar på "Safari> Om Safari".
För att säkerställa att du kör Lion klickar du på Apple-logotypen i menyraden och väljer "Om den här Mac"
För att säkerställa att du kör den korrekta versionen av Xcode, öppna Xcode och välj "Xcode> About Xcode"
Du måste aktivera utvecklingsverktygen och webbinspektören i skrivbords- och mobilversionerna av Safari.
Verklig enhetsmetod: Om du ska använda en riktig enhet, anslut den till din Mac via USB.
Virtuell enhet Metod: Om du ska använda iOS-simulatorn, öppna Xcode, högerklicka på dockningsikonen och välj "Öppna utvecklingsverktyg> iOS-simulator".
Mobil Safari: På din riktiga iDevice eller i iOS-simulatorn gå till "Inställningar> Safari> Advanced" och sätt på "Web inspektör".
Skrivbordss Safari: Om du inte redan ser till att du har utvecklingsverktyg i Safari aktiverat. Du vet att du har dem påslagna om du kan se "Utveckla" i menyraden.
Om du inte kan se "Utveckla" i menyraden, gå till menyraden och klicka på "Safari> Inställningar> Avancerat" och välj menyn "Visa utveckla meny i menyraden".
Nu när du har antingen iOS Simulator öppen eller din iDevice ansluten till din Mac via USB (eller båda!), Är du redo att börja använda webbinspektören på din webbplats.
Öppna din Mac, öppna Safari och gå till "Develop". Du bör nu se några iDevices (virtuella eller verkliga) som du har anslutit och kör med din mac. I skärmdumpen nedan ser du att jag har två enheter i menyn: en är iOS-simulatorn, den andra är en riktig iPhone ansluten till min Mac.
För att faktiskt börja inspektera en webbplats måste du ha mobil Safari lanserad på enheten och få en av flikarna öppna för webbplatsen. Om du inte har mobil Safari öppet ser du ett meddelande som anger "Inga inspekterbara program".
För att börja inspektera, skriv in webbadressen till den sida du vill inspektera i mobil Safari och välj sedan den webbplatsen från menyn "Utveckla". Du kan börja inspektera webbplatser på din riktiga iDevice eller från iOS-simulatorn. När du väljer sidan ser du ett blått överlägg på sidan, vilket indikerar vilken du har valt.
Genom att välja en webbplats öppnar Safari webbinspektör och tillåter dig att börja inspektera din webbplats. Det är allt!
Nu när du har Safaris webbinspektör till hands har du mycket mer kontroll när det gäller att bygga och felsöka webbplatser och webbapplikationer..
Här är ett urval av några saker du kan göra nu när du felsöker mobila webbplatser:
Du har verktygen, gå vidare och bygga!
Accentsconagua