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
:
- 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
- On your iPad, go to settings -> safari -> advanced -> enable Web Inspector
- Connect your iPad to your desktop/laptop apple device using a cable.
- Now, in Safari on your laptop apple device, go to Develop from the top menu -> select iPad.
- In this menu, there should be the URL you want to debug — the trycloudflare.com URL. Clicking that should open a safari web inspector.
- 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](/_astro/logo-small.sd8LXI_3.webp)