The latest articles on DEV Community by Kosta Malsev (@kostamalsev). https://dev.to/kostamalsev https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F676180%2F9bd7e950-a48c-4f93-b38f-d330c6ccfedf.jpeg https://dev.to/kostamalsev en Kosta Malsev Thu, 29 Jul 2021 08:43:57 +0000 https://dev.to/kostamalsev/best-mobile-web-development-tools-to-consider-in-2021-5d93 https://dev.to/kostamalsev/best-mobile-web-development-tools-to-consider-in-2021-5d93 <p>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!</p> <p>It's a bit unexpected, since mobile browsers implement the same <a href="https://www.w3.org/TR/">W3C spec</a> as desktop browsers. Unfortunately, <a href="https://caniuse.com/?compare=safari+15,ios_saf+14.5-14.7&amp;compareCats=all#results">mobile browsers have different implementations of the spec.</a></p> <p>Therefore, it's sensible to debug web apps on the actual mobile device.</p> <h2> Development tools for web apps on mobile </h2> <h3> 1. <a href="https://developer.apple.com/safari/tools/">Safari Web Inspector (macOS)</a> </h3> <p>Web inspector and debugger for iOS devices.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qPMW-fVZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/314enbv3s9838wftfwd2.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qPMW-fVZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/314enbv3s9838wftfwd2.jpg" alt="https://www.idownloadblog.com/2019/06/21/how-to-use-safari-web-inspector-ios-mac/"></a></p> <p><strong>Pros:</strong></p> <ul> <li>A powerful tool for debugging your web app.</li> <li>You can inspect elements, edit CSS, add breakpoints, see local storage, monitor network and more.</li> </ul> <p><strong>Cons:</strong></p> <ul> <li>Requires connecting your mobile device to a Mac via USB cable; complicated setup.</li> <li>Exclusive to iOS devices; runs only on macOS.</li> </ul> <h3> 2. <a href="https://blog.campvanilla.com/debug-website-on-mobile-device-5c27c8809d39">Chrome DevTools (Windows, macOS and Linux)</a> </h3> <p>Web inspector and debugger for Android devices.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--bc3PoJbi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdpxio1zi5nxdhhqz3yl.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--bc3PoJbi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdpxio1zi5nxdhhqz3yl.png" alt="https://developer.chrome.com/docs/devtools/"></a></p> <p><strong>Pros:</strong></p> <ul> <li>A simple tool for debugging your web app.</li> <li>Full DevTools functionality much like Safari Web Inspector.</li> </ul> <p><strong>Cons:</strong></p> <ul> <li>Requires connecting your mobile device to a desktop device via USB cable and may include driver installation.</li> <li>Exclusive to Android devices.</li> </ul> <h3> 3. <a href="https://github.com/barhatsor/scepter">Scepter (Any device with browser)</a> </h3> <p>Open-source mobile web inspector; runs as a web app on mobile devices and inspects elements using a touch interface.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--J1JazocT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hymjeatc11vdh5wnc8pe.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--J1JazocT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hymjeatc11vdh5wnc8pe.gif" alt="https://github.com/barhatsor/scepter"></a></p> <p><strong>Pros:</strong></p> <ul> <li>Cross-platform. No installation needed; simple to use.</li> <li>A fresh take on developing a different kind of web dev tool for mobile, without physically connecting to a desktop device.</li> </ul> <p><strong>Cons:</strong></p> <ul> <li>As of now, the tool is limited to inspecting elements and console. No support for JavaScript debugging, CSS properties, breakpoints etc.</li> </ul> <h3> 4. <a href="https://developer.samsung.com/remotetestlab/galaxy/rtlDeviceList.action#502">Remote Device Farm (Windows, macOS and Linux)</a> </h3> <p>A time slot on a remote device, with a client app which is installed on the developer's desktop (eg. <a href="https://developer.samsung.com/remotetestlab/galaxy/rtlDeviceList.action#502">Samsung</a>, <a href="https://www.browserstack.com/">BrowserStack</a>).</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UmVl9dFp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3use03tz1wnslbtcivye.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UmVl9dFp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3use03tz1wnslbtcivye.png" alt="https://developer.samsung.com/remotetestlab/galaxy/rtlDeviceList.action#502"></a></p> <p><strong>Pros:</strong></p> <ul> <li>Useful when you don't have the device model.</li> </ul> <p><strong>Cons:</strong></p> <ul> <li>Very slow. The client download takes time. Debugging is complicated.</li> </ul> <h2> Conclusion </h2> <p>There's much to improve for web development tools on mobile devices.</p> <p>In my opinion, as more JS frameworks adopt mobile-first design, there should be more tools to debug code on mobile.</p> <h2> References </h2> <ul> <li><a href="https://webplatform.github.io/docs/concepts/mobile_web/mobile_debugging/">Web Debugging on Mobile</a></li> <li><a href="https://caniuse.com/?compare=safari+15,ios_saf+14.5-14.7&amp;compareCats=all#results">Browser Spec. Support Comparison</a></li> <li><a href="https://blog.campvanilla.com/debug-website-on-mobile-device-5c27c8809d39">Debug Sites on Android Devices</a></li> <li><a href="https://github.com/barhatsor/scepter">Scepter</a></li> <li><a href="https://developer.samsung.com/remotetestlab/galaxy/rtlDeviceList.action#502">Samsung Remote Test Lab</a></li> </ul> javascript webdev react