Share
Het bouwen en debuggen van websites en webapplicaties voor mobiele apparaten kan een gedoe zijn. Op de desktop hebben we krachtige tools voor foutopsporing; de meeste browsers hebben een of andere webinspecteur. Maar we hebben die tools niet voor apparaten zoals de iPhone en iPad ... dat wil zeggen, tot nu toe!
Met de recente release van Safari 6 en iOS 6 kunt u nu Web Inspector gebruiken om websites te bouwen en te debuggen op de desktop en op mobiele Safari. Beste van alles? Het is een eenvoudig proces om in te stellen. Volg deze tutorial en je hebt binnen een mum van tijd een paar krachtige tools voor het debuggen van mobiele i-apparaten binnen handbereik.
Moderne browserontwikkelaarstools zijn een enorme hulp geweest bij het bouwen van websites en webapps. Chrome heeft ontwikkelaarstools. Firefox? Firebug. Safari? Webinspecteur. Alle extreem krachtige tools in webontwikkeling.
Hoe het ook zij, tot nu toe was het lastig om websites en webapps te debuggen op mobiele apparaten. Omdat Safari en Chrome beide op de webkit-engine draaien, zijn er veel overeenkomsten in de manier waarop de desktop en mobiele browser een weblay-out renderen. De meeste ontwerpers / ontwikkelaars bouwen en tweaken hun websites op de desktop met een van deze browers, ervan uitgaande dat de overeenkomsten die het gevolg zijn van de webkit-engine de pagina op dezelfde manier op een mobiel apparaat weergeven..
Mobiele en desktopplatforms zijn echter heel verschillend. Ze hebben verschillende geheugencapaciteiten, prestatiepotentieel, invoerapparaten en netwerkconnectiviteit. Het is daarom noodzakelijk geworden dat de debuggingstools van een ontwerper voor mobiele apparaten performanter worden en overeenkomen met die van hun desktop-tegenhangers..
Apple's nieuwe softwarereleases van iOS 6 en Safari 6 brengen veel van de functies van desinfectieprogramma's voor desktopbrowsers die we allemaal kennen en waarderen op mobiele apparaten. In deze zelfstudie wordt het eenvoudige proces weergegeven van het instellen van foutopsporing voor mobiele websites met behulp van Safari's webinspecteur.
Voordat we beginnen, een opmerking over compatibiliteit: Er is een beetje slecht nieuws voor mensen die Windows gebruiken. U kunt alleen debuggen met behulp van de externe webinspectie op een Mac. Safari 6 voor Windows is niet beschikbaar. Safari 6 is ook alleen beschikbaar voor Macs met OSX Lion of hoger.
Er zijn twee methoden om webinspecteur in mobiele Safari te gebruiken:
We zullen beide methoden behandelen en u laten kiezen welke het beste past bij uw situatie.
Omdat het opsporen van foutopsporing op mobiele apparaten met Web Inspector een nieuwe functie is, moet u ervoor zorgen dat u over de nieuwste software beschikt.
Real Device-methode: Om Web Inspector samen met een echt iDevice te gebruiken, hebt u het volgende nodig:
Virtuele apparaatmethode: Om Web Inspector samen met een iOS-simulator te gebruiken, hebt u het volgende nodig:
Softwareversies controleren: Als je wilt controleren of iOS 6 op je iDevice wordt uitgevoerd, ga je naar "Instellingen> Algemeen> Info" op je apparaat.
Om te controleren of je Safari 6 gebruikt, ga je naar de menubalk van Safari en klik je op "Safari> Over Safari".
Om er zeker van te zijn dat je Lion gebruikt, klik je op het Apple-logo in de menubalk en kies je 'Over deze Mac'
Om ervoor te zorgen dat u de juiste versie van Xcode gebruikt, opent u Xcode en kiest u "Xcode> Over Xcode"
U moet de ontwikkelaarstools en webinspector inschakelen in de desktop- en mobiele versies van Safari.
Real Device-methode: Als je een echt apparaat gaat gebruiken, sluit je het via USB op je Mac aan.
Virtuele apparaatmethode: Als je de iOS-simulator gaat gebruiken, open je Xcode, klik je met de rechtermuisknop op het dock-pictogram en kies je "Open Developer Tool> iOS Simulator".
Mobile Safari: Ga op uw echte iDevice of in iOS-simulator naar "Instellingen> Safari> Geavanceerd" en schakel "Web Inspector" in.
Desktop Safari: Als u dit nog niet doet, controleert u of ontwikkelaarstools in Safari zijn ingeschakeld. U weet dat u ze hebt ingeschakeld als u 'Ontwikkelen' in de menubalk kunt zien.
Als u "Ontwikkelen" niet ziet in de menubalk, ga dan naar de menubalk en klik "Safari> Voorkeuren> Geavanceerd" en selecteer het "Toon ontwikkel menu in menubalk" checkbox.
Nu dat je iOS Simulator open hebt of je iDevice via USB (of beide!) Met je mac is verbonden, ben je klaar om Web Inspector op je website te gebruiken.
Open Safari op je Mac en ga naar "Ontwikkelen". U zou nu alle iDevices (virtueel of echt) moeten zien die u hebt aangesloten en met uw mac werkt. In de onderstaande schermafbeelding ziet u dat ik twee apparaten in het menu heb: de ene is de iOS-simulator, de andere is een echte iPhone die op mijn Mac is aangesloten.
Om daadwerkelijk te beginnen met het inspecteren van een website, moet u mobiele Safari op het apparaat laten lanceren en moet u een van de tabbladen voor de website openen. Als u Safari niet mobiel geopend heeft, ziet u een bericht met de tekst 'Geen inspecteerbare apps'.
Om te beginnen met inspecteren, voert u eenvoudig de URL in van de pagina die u wilt inspecteren in mobiele Safari en kiest u vervolgens die site in het menu "Ontwikkelen". U kunt beginnen met het inspecteren van sites op uw echte iDevice of vanuit een iOS-simulator. Wanneer u de pagina selecteert, ziet u een blauwe overlay op de pagina, die aangeeft welke u hebt geselecteerd.
Door een site te kiezen, wordt de webinspecteur van Safari geopend en kunt u beginnen met het inspecteren van uw website. Dat is het!
Nu u de webinspecteur van Safari binnen handbereik heeft, hebt u veel meer controle bij het bouwen en debuggen van websites en webtoepassingen.
Hier is een voorbeeld van enkele dingen die u nu kunt doen bij het debuggen van mobiele sites:
Je hebt de hulpmiddelen, ga heen en bouw!
Accentsconagua