Best Mobile Web Development Tools To Consider in 2021
Tags: javascript, webdev, react
Published: 2021-07-29 08:43:57

If you choose to develop a web app, you may be confused to find that your app—which runs great on desktop—appears differently and behaves unexpectedly on the mobile version of the same browser!

It's a bit unexpected, since mobile browsers implement the same [W3C spec](https://www.w3.org/TR/) as desktop browsers. Unfortunately, [mobile browsers have different implementations of the spec.](https://caniuse.com/?compare=safari+15,ios_saf+14.5-14.7&compareCats=all#results)

Therefore, it's sensible to debug web apps on the actual mobile device.

## Development tools for web apps on mobile

### 1. [Safari Web Inspector (macOS)](https://developer.apple.com/safari/tools/)
Web inspector and debugger for iOS devices.

![https://www.idownloadblog.com/2019/06/21/how-to-use-safari-web-inspector-ios-mac/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/314enbv3s9838wftfwd2.jpg)

**Pros:**
- A powerful tool for debugging your web app.
- You can inspect elements, edit CSS, add breakpoints, see local storage, monitor network and more.

**Cons:**
- Requires connecting your mobile device to a Mac via USB cable; complicated setup.
- Exclusive to iOS devices; runs only on macOS.

### 2. [Chrome DevTools (Windows, macOS and Linux)](https://blog.campvanilla.com/debug-website-on-mobile-device-5c27c8809d39)
Web inspector and debugger for Android devices.

![https://developer.chrome.com/docs/devtools/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdpxio1zi5nxdhhqz3yl.png)

**Pros:**
- A simple tool for debugging your web app.
- Full DevTools functionality much like Safari Web Inspector.

**Cons:**
- Requires connecting your mobile device to a desktop device via USB cable and may include driver installation.
- Exclusive to Android devices.

### 3. [Scepter (Any device with browser)](https://github.com/barhatsor/scepter)
Open-source mobile web inspector; runs as a web app on mobile devices and inspects elements using a touch interface.

![https://github.com/barhatsor/scepter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hymjeatc11vdh5wnc8pe.gif)

**Pros:**
- Cross-platform. No installation needed; simple to use.
- A fresh take on developing a different kind of web dev tool for mobile, without physically connecting to a desktop device.

**Cons:**
- As of now, the tool is limited to inspecting elements and console. No support for JavaScript debugging, CSS properties, breakpoints etc.

### 4. [Remote Device Farm (Windows, macOS and Linux)](https://developer.samsung.com/remotetestlab/galaxy/rtlDeviceList.action#502)
A time slot on a remote device, with a client app which is installed on the developer's desktop (eg. [Samsung](https://developer.samsung.com/remotetestlab/galaxy/rtlDeviceList.action#502), [BrowserStack](https://www.browserstack.com/)).

![https://developer.samsung.com/remotetestlab/galaxy/rtlDeviceList.action#502](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3use03tz1wnslbtcivye.png)

**Pros:**
- Useful when you don't have the device model.

**Cons:**
- Very slow. The client download takes time.
Debugging is complicated.

## Conclusion

There's much to improve for web development tools on mobile devices.

In my opinion, as more JS frameworks adopt mobile-first design, there should be more tools to debug code on mobile.

## References
- [Web Debugging on Mobile](https://webplatform.github.io/docs/concepts/mobile_web/mobile_debugging/)
- [Browser Spec. Support Comparison](https://caniuse.com/?compare=safari+15,ios_saf+14.5-14.7&compareCats=all#results)
- [Debug Sites on Android Devices](https://blog.campvanilla.com/debug-website-on-mobile-device-5c27c8809d39)
- [Scepter](https://github.com/barhatsor/scepter)
- [Samsung Remote Test Lab](https://developer.samsung.com/remotetestlab/galaxy/rtlDeviceList.action#502)