# Mobile Testing

## Local development flows

We'll need to set up 2 distinct superpowers:

* The ability to access [`localhost`](http://localhost) on our phone
    
* The ability to "remote debug", by opening the devtools for our mobile browser on our desktop machine.
    

### Accessing [localhost](http://localhost)

I have experimented with lots of methods for getting my local development server (eg. `localhost:3000`) to run on my phone. The best method I've found is to use a tunnelling service like [ngrok](https://ngrok.com/).

### Remote debugging

### iOS phones

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">On iOS, all browsers are secretly Safari. Google Chrome on iOS uses a WebView that defers all page-rendering to iOS Safari. In other words, iOS Chrome isn't actually a discrete browser; it's more like a Chrome-scented skin for Safari.</div>
</div>

> This draconian policy does have one upside: we don't have to test our products on multiple browsers on iOS.

---

For Windows users, we can't use Safari to debug our iPhones.

The best tool I've found is called [Inspect (opens in new tab)](https://inspect.dev/). It's a cross-platform developer tool that allows you to debug iOS devices using the Chrome developer tools.

### Android phones

Fortunately, things are a bit more straightforward on Android. Regardless of whether your development machine is Windows, macOS, or Linux, we can follow the same instructions.

The most up-to-date instructions will be found in this article: [“Remote Debug Android Devices”](https://developer.chrome.com/docs/devtools/remote-debugging/).

After following these instructions, you should be able to open a DevTools window connected directly to your Android Chrome session

---

Alternatively, if you use Firefox on your Android device and/or prefer desktop Firefox's debugging tools, you can follow [the MDN guides for debugging with Firefox](https://developer.mozilla.org/en-US/docs/Tools/about:debugging).