Using Localhost on iPad

You ever need to test something on localhost on your desktop/laptop on your iPad? Or other iOS-ish apple operating system?

Here’s how, assuming you’re using localhost:3000:

  1. Use a cloudflare tunnel - Create a cloudflare account, install the CLI, and run this.
cloudflared tunnel --url localhost:3000

This will spit out a URL in the CLI output, something like crazy-frogs-xoxo.trycloudflare.com

  1. On your iPad, go to settings -> safari -> advanced -> enable Web Inspector
  2. Connect your iPad to your desktop/laptop apple device using a cable.
  3. Now, in Safari on your laptop apple device, go to Develop from the top menu -> select iPad.
  4. In this menu, there should be the URL you want to debug — the trycloudflare.com URL. Clicking that should open a safari web inspector.
  5. That’s it! You’re now connected, dev tools for iPad on your mac.

Sometimes the connection does break, and it can be a bit finicky. Here are some tips for debugging:

  • Exit safari on your iPad entirely. Fully exit it, not background it. Then go back to iPad settings -> safari -> advanced -> enable Web Inspector, and toggle it off. Then open safari, close it again, toggle it back on.
  • Restart safari on Mac.
  • Double check the cable you’re using to connect the two devices, can be a bit finicky.
end of storey Last modified: