HomeMobileTricks application

How to debug websites on iPad

With billions of mobile users today, building websites that can be viewed on mobile devices is inevitable. Fortunately, users have many tools and options to debug web pages on mobile platforms, such as Adobe Edge Inspect, Google Chrome Emulation or XIP.io.

If only developed in macOS and iOS environments, you may not need those third-party tools. Apple has provided a set of tools for this.

In this article, we will show you how to use this toolkit to access and debug static websites as well as WordPress websites for iOS for iPhone and iPad. Let's start!

Begin

First, launch Safari and activate Developer Tools through Safari> Preference . On the Advanced tab , check the Show Develop menu in the menu bar .

How to debug websites on iPad Picture 1

A new menu called Develop will appear in the Safari menu bar.

How to debug websites on iPad Picture 2

Then, in iPad or iPhone, go to Settings> Safari . Similarly, in the Advanced menu , activate Web Inspector.

How to debug websites on iPad Picture 3

For WordPress based websites

A relative path is required for CSS, Images and JavaScript links to be loaded correctly in the iPad or iPhone. If you are developing websites based on WordPress, all paths must be absolute. To turn them into a relative path, install and activate the Relative URL plugin.

When enabled, path URLs will change from:

 http://localhost:8888/wordpress/

into:

 /wordpress/

Debugging website

First, you need to know the network IP address. Go to System Preference> Network . There, you will find the IP address. Also, ensure that Apple devices - Mac, iPad, iPhone - are connected in the same network to be able to access the wireless website on the iPad or iPhone.

How to debug websites on iPad Picture 4

On the iPad or iPhone, launch the Safari application and access localhost: 8888 followed by the web project directory - for example localhost: 8888 / wordpress. If you set up the local server using MAMP, localhost: 8888 will be the default local server address.

As you can see below, we are viewing a WordPress-based website with the iPad.

How to debug websites on iPad Picture 5

Moreover, to be able to debug the site using the Developer Tools, you need to connect the iPad or iPhone to the Mac with a USB cable. Then, in Safari, go to the Develop menu and select the connected device.

How to debug websites on iPad Picture 6

Everything is complete.

In the following screenshot, when selecting the DOM Tree (Document Object Model) from Developer Tools, you can see the corresponding elements on the iPad or iPhone highlighted. Now you can technically debug your site in the iPad or iPhone, just like you do on the desktop.

How to debug websites on iPad Picture 7

Hope you are succesful.

4.3 ★ | 3 Vote
ipad

You should read it

May be interested

  • The top 15 ADB commands Android users should knowThe top 15 ADB commands Android users should know
    android debug bridge (adb) is a powerful and flexible tool, which allows you to do many things such as finding logs, installing and uninstalling applications, transferring files, root and flash custom roms, create backups device.
  • What is the iPad?What is the iPad?
    the ipad is apple's tablet line, running the ios operating system. the first ipad was released on april 3, 2010, and the latest ipad series is now 2018 ipads released on march 27, 2018 and the ipad pro 2g is 10.5 inches (270mm) and 12, 9 inch (330 mm) released on june 13, 2017.
  • Instructions to reset iPad whole episodeInstructions to reset iPad whole episode
    apple's ipad is the best tablet to date, but no device is perfect. sometimes ipad freezes or acts strange. thankfully, most ipad problems can be solved with a simple reset.
  • How to Block Websites on Google ChromeHow to Block Websites on Google Chrome
    this article shows how to block access to some websites on google chrome using a computer, phone or tablet. if you use a computer or android, you can use the free block site app to block websites. if you have an iphone or ipad, you'll block websites in your screen time settings, but this will affect the entire web browser on your phone or tablet, not chrome.
  • New tips to distinguish iPad seriesNew tips to distinguish iPad series
    all apple tablets simply represent the ipad text on the back of the device. it is not clear whether the ipad 2, new ipad or ipad with retina display have made it difficult for many users to choose the right ipad version, especially with identical tablet designs like ipad 2 and new ipad .
  • The confidences of a Coder: Finding bugs must rely on both hunch and rulesThe confidences of a Coder: Finding bugs must rely on both hunch and rules
    inspiration and rules will help you become one of the most outstanding coder of any working team, as long as you know how to promote both.
  • VPN connection from iPad deviceVPN connection from iPad device
    ipad devices also support ssl vpns, using the same ssl protocol that websites use whenever they want to secure the connection so you can send important data to them without having to worry about anyone. it can sniff data and steal them for their own purposes.
  • 8th Generation iPad Review (2020): A new normality8th Generation iPad Review (2020): A new normality
    apple introduced two new ipad models at its september event: the high-end ipad air and the more affordable 8th-generation ipad.
  • Preliminary assessment of low-cost iPad for Apple's new educationPreliminary assessment of low-cost iPad for Apple's new education
    support apple pencil, powerful processor.
  • Summary of ways to turn off iPad powerSummary of ways to turn off iPad power
    powering off is generally a simple operation on mobile devices that anyone can do, and ipad is no exception.

Tricks application