With billions of mobile users nowadays, building websites that are viewable on mobile devices is indispensable. Luckily, we’ve got many tools and options for debugging websites on mobile platforms. You can, or to name a few. If you are developing solely in an OS X and iOS environment, you may not need those third-party tools. Apple has already provided a set of tools for the job.

And In this post, we’ll show you how to utilize them to access and debug static websites as well as WordPress websites in iOS for iPhone and iPad. Without further ado, let’s get started. Recommended Reading: Getting Started First, launch and enable the Developer Tools via Safari Preference. In the Advanced tab, tick the Show Develop menu in menu bar option.

Zbx-11209 Visual Bugs In Safari And Chrome For Mac

A new menu called Develop will appear in the Safari menu bar. Then, in your iPad or iPhone, go to Settings Safari.

Similarly, in the Advanced menu, enable the Web Inspector, like so. For WordPress-based website A relative path is required so that the CSS, Images, and JavaScript links are correctly loaded in the iPad or iPhone. If you are developing WordPress-based websites, all the asset paths are absolute. To make them a relative path, install and activate this plugin:. Once activated, the path URLs will turn from: into something like what you see below: /wordpress/ Debugging the Website First, you need to know your network IP address number. Go to System Preference Network. There, you will find the IP address.

Also, ensure that your Apple devices – Mac, iPad, iPhone – are connected in the same Network so you can access the website wirelessly on the iPad or iPhone. In your iPad or iPhone, launch the Safari app and access followed by your web project directory – for example localhost:8888/wordpress. If you setup your local server using MAMP, should be your default local server address.

Blackjack simulator for mac. • Once done, Locate Andy and open it. The file downloaded will be of small size & additional files will be downloaded as you continue.

As you can see below, we are viewing our website, which in this case is WordPress-based, on an iPad. Furthermore, to be able to debug the website with Developer Tools, you need to plug your iPad or iPhone to your Mac using the USB. Then, in Safari, go to the Develop menu and select your connected device. In the following screenshot, as we select the from the Developer Tools, you can see that respective elements on the iPad or iPhone are highlighted. You can now technically debug your website in iPad or iPhone, like you do on your desktop.