Hoe Debug Website op iPad

Met miljarden mobiele gebruikers is het bouwen van websites die zichtbaar zijn op mobiele apparaten onmisbaar. Gelukkig hebben we veel tools en opties voor het debuggen van websites op mobiele platforms . U kunt Adobe Edge Inspect, Google Chrome Emulation of XIP.io gebruiken om er maar een paar te noemen.

Als u zich uitsluitend in een OS X- en iOS-omgeving ontwikkelt, hebt u deze hulpprogramma's van derden misschien niet nodig. Apple heeft al een aantal tools voor de klus beschikbaar gesteld. En In dit bericht laten we u zien hoe u deze kunt gebruiken om statische websites te openen en te debuggen, evenals WordPress-websites in iOS voor iPhone en iPad.

Zonder verder oponthoud gaan we aan de slag.

Ermee beginnen

Start eerst Safari en schakel de ontwikkelaarstools in via Safari> Voorkeuren . Op het tabblad Geavanceerd tikt u in de menubalk op het menu Ontwikkelen tonen .

Een nieuw menu genaamd Develop verschijnt in de Safari menubalk.

Ga vervolgens op je iPad of iPhone naar Instellingen> Safari . Evenzo, schakel in het menu Geavanceerd de Web Inspector in, zoals zo.

Voor WordPress-gebaseerde website

Een relatief pad is vereist, zodat de CSS-, afbeeldingen- en JavaScript-links correct zijn geladen op de iPad of iPhone. Als u op WordPress gebaseerde websites ontwikkelt, zijn alle activapaden absoluut. Om een ​​relatief pad te maken, installeer en activeer je deze plug-in: Relatieve URL.

Na activering veranderen de pad-URL's van:

 http: // localhost: 8888 / wordpress / 

... naar zoiets als wat je hieronder ziet:

 / Wordpress / 

Debugging van de website

Eerst moet u het IP-adresnummer van uw netwerk weten. Ga naar Systeemvoorkeuren> Netwerk . Daar vindt u het IP-adres. Zorg er ook voor dat uw Apple-apparaten - Mac, iPad, iPhone - in hetzelfde netwerk zijn aangesloten, zodat u draadloos toegang kunt krijgen tot de website op de iPad of iPhone.

Start de Safari-app op je iPad of iPhone en open localhost: 8888 gevolgd door je webprojectdirectory - bijvoorbeeld localhost: 8888 / wordpress . Als u uw lokale server instelt met MAMP, zou localhost: 8888 uw standaard lokale serveradres moeten zijn.

Zoals u hieronder kunt zien, bekijken we onze website, die in dit geval op WordPress is gebaseerd, op een iPad.

Bovendien, om de website te kunnen debuggen met Developer Tools, moet je je iPad of iPhone met behulp van de USB op je Mac aansluiten . Ga vervolgens in Safari naar het menu Ontwikkelen en selecteer uw verbonden apparaat.

We zijn klaar.

In de volgende schermafbeelding, wanneer we de DOM-structuur selecteren in de Developer Tools, kunt u zien dat de respectieve elementen op de iPad of iPhone zijn gemarkeerd. U kunt nu uw website technisch debuggen op iPad of iPhone, zoals op uw bureaublad.

Bekijk en deel codering van screencasts met Scrimba

Gratis YouTube-video's bieden veel tutorials over webontwikkeling voor beginners. Maar screencasts zijn nog populairder geworden, omdat u snel een fragment of functie die u hebt ontwikkeld, kunt opnemen en publiceren.De gratis app Scrimba is een nieuwe manier om je codefragmenten te delen en voorbeelden te vinden die door anderen zijn opgenomen

(Technische en ontwerptips)

Best Game of Thrones-lettertypen en teksteffecten tot nu toe

Een van de grootste en meest besproken fantasiedrama op televisie, Game of Thrones heeft een mammoet van een publiek over de hele wereld gefascineerd. Van spreekwoorden tot merchandise heeft Game of Thrones geleid tot een groot aantal dingen in ons dagelijks leven.Omdat ontwerpers een goede bijdrage leveren aan het fandom Game of Thrones, zijn er veel lettertypen en teksteffecten gemaakt door de beroemde serie als inspiratie te gebruiken

(Technische en ontwerptips)