Debugging Web Pages Viewed on iPhone

While accessing the website under development with Safari on iPhone, I noticed it wasn't functioning correctly. Web browsers on Windows and Mac displayed it correctly, indicating an issue specific to iPhone.

Upon researching, I found using Mac's Safari the simplest method for iPhone debugging and decided to give it a try successfully. To avoid forgetting, I've outlined it here.

Steps for iPhone

First, open the Settings app. Navigate to Safari → Advanced → and toggle Web Inspector ON.

Then, open the page you wish to debug in Safari on your iPhone.

Connecting iPhone and Mac

Connect your iPhone and Mac via USB.

If prompted with "Trust This Computer?" on the iPhone, tap Trust and input your passcode.

Source: https://support.apple.com/ja-jp/HT202778

Steps for Mac

First, launch Safari.

Hover over the Develop menu in the menu bar.

If Develop is not visible, go to the menu bar's Safari → Preferences → Advanced and enable Show Develop menu in menu bar.

Hover over the Develop menu, and you’ll see the iPhone device name listed. Hover over it to display the URLs of the pages open in Safari on your iPhone. Select the page you wish to debug.

This will open the Web Inspector window.

You can now proceed with debugging.