Skip to main content

Testing Mobile layouts on physical devices

Testing the site on a physical phone requires some configuration (as mobile Chrome does not have access to DevTools).

Configuration

Connect your phone via USB for file transfer/debugging, and open Chrome on it.

Navigate your desktop Chrome to chrome://inspect/#devices. You may have to grant access for Chrome to control the phone app; your desktop Chrome will bring up a prompt if access hasn't been granted yet. You should then have something like this:

image.png

Here, SM-N960F is the physical phone (my Galaxy Note 9 in this case). Clicking the inspect button will bring up a new Chrome DevTools window, allowing you to control your phone browser with DevTools functionality:

image.png

You can now disable the cache, etc to make debugging less of a pain.