Inspecting developer tools in iPad Devices

Sometimes, we need to inspect the console or element section for a web page on iPad, but on iPad, it is not possible to do this as in a browser on your desktop/system.

So, we can do it by configuring some settings in the Desktop system.

Here we will learn about inspecting developer tools in iPad Devices.
I have tried it with the iOS system and iOS iPad(in the Safari browser). So, to inspect the developer tool section, follow the below steps:

1. Connect your iPad(iOS) device with the MacOS system by using a USB data cable.

2. Then, open the Safari browser on both devices.

3. Go to the menu section and check whether the Develop menu is available or not.
If not then continue with step 4 otherwise skip step 5 and step 6.

4. Then click on the Safari menu, a submenu will be displayed, then click on the Preferences submenu. A popup window will be open(as in the following screenshot).

5. Then select the Advanced tab and checked the checkbox (which has the text “Show Develop in menu bar”) as shown in the following screenshot.

6. Then select the Develop menu and go to the iPad submenu, another submenu option will be displayed (these are the list of webpages that are opened in your iPad device in Safari browser).

7. Now, you can interact with the opened web page and can see the developer tool section for that web page in the iOS system(as in the following screenshot).

That’s all about inspecting developer tools in iPad Devices.
Thanks 🙂

Previous Blog: How to create custom customer address attribute in Magento 2

Next Blog: How To Implement Custom Attribute Filter In Custom Product Collection Page In Magento 2