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.

The Rise of Trolling & Decline of Online Etiquette

Of we het nu toegeven of niet, publiek menselijk gedrag wordt beïnvloed, ja, gedicteerd door bepaalde normen die beleefde, geciviliseerde samenleving als acceptabel beschouwt. We worden niet bang voor onschuldige opmerkingen van vreemden, we noemen elkaar geen afwijkende namen of harde obsceniteiten, en we volgen elkaar zeker niet meedogenloos om de kleinste kritiek te leveren over de nieuwste creatie of gedachte van het doelwit.

(Technische en ontwerptips)

Vind eenvoudig HEX-code voor kleurschakeringen met 0to255

Zoals je misschien weet, zijn er drie basis dingen die een website "geweldig" maken: typografie, lay-out en kleur. We hebben het erover gehad hoe belangrijk kleur is voor het ontwerp van een website en we hebben enkele kleurhulpmiddelen besproken waarmee ontwerpers de juiste kleurencombinaties kunnen kiezen die ze nodig hebben

(Technische en ontwerptips)