background-image-8

How to debug websites on iOS and iPadOS devices/simulators with the Safari browser

The best way to debug websites on iOS and iPadOS devices/simulators is by using the developer tools in Safari.

Step 1: Enable “Develop” menu for Safari on your Mac.

Essentially, this is the first step irrespective of which device/simulator you would be using.

On your Mac, launch Safari and head over to Safari (menu option) > Preferences. Make sure you are on the “Advanced” tab.

safari-menu-options

At the bottom, you would see a checkbox which says: “Show Develop menu in menu bar“, make sure it’s checked.

safari-advanced-settings

Step 2: Open a website in Safari on an iOS/iPadOS device or Simulator

  • When using a Simulator to debug the website, open the Safari app and load the website.
technikales-simulator-safari

Step 3: Launching the debugger tool in Safari

Once you’ve loaded the website on your iOS/iPadOS device or Simulator, restart Safari. Now, in Safari’s top menu bar head to the option “Develop”, click on it to view all the sections. The section we want is the second one, where you would see the name of the iOS/iPadOS device or the Simulator. Hover over the name to see the loaded application or website and click on it. Refer the image below.

safari-developer-option

Step 4: Debug Away!

Now you should see the developer tools with all the beautiful HTML, CSS code and all the other goodies.

simulator-and-safari-debug-mode

Posted

in

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *