Fantastic Mobile Dev Tools, and Where to Find Them!

As a web developer first jumping into mobile development with Capacitor, the mobile ecosystem can be a bit overwhelming. Luckily, we’ve got you covered with a list of 6 excellent mobile dev tools that you can use to help take your development to the next level.

Magical Android Tools 🪄

First, let’s focus on Android tools. There are several Android mobile dev tools that I make sure to immediately install when I get a new development environment setup. After installing Android Studio and creating an emulator with the Android Virtual Device Manager these three tools are some that greatly speed up development and testing time.

scrcpy

scrcpy is a free, open-source, command-line tool built by Genymobile that allows you to flawlessly control your Android device over USB. If you’ve ever used the Android emulator that comes with Android Studio, you may have run into performance issues and general clunkiness. Scrcpy allows you to bypass the Android emulator and mirror your Android device’s screen. With low latency streaming up to 1080p resolution at 120 frames per second, it will be much more performant than running the built-in Android emulator.

The CLI is available on many different package managers, such as apt, pacman, choco, scoop, brew, or macports to name a few. Once you’ve installed scrcpy, plug in your Android device and run the following command.

scrcpy

With that, you’ve got your Android device mirrored to your computer and a much better device to test on than the Android emulator.

Android Debugging Bridge (adb)

The adb is a CLI that allows you to easily run common debugging tasks on your Android device or emulator by running a command via the terminal. It actually comes installed with Android Studio but isn’t automatically set up in your shell’s $PATH variable. The adb utility is installed in the “platform-tools” folder where the rest of the Android SDK is installed. For example, my adb CLI is located in /Users/Thomas/Library/Android/sdk/adb. You can follow this great guide on how to add adb to your PATH variable so you can use it more easily in your terminal.

What can adb do though? With the debug bridge you can…
– Allow my phone to connect to my computer’s localhost with adb reverse (great for live reloading!)
– Copy files to and from my device adb push and adb pull.
– Create a screen recording or screenshot of my phone adb shell screenrecord.
– Run shell commands on my device with adb shell.
– Connect wirelessly to your phone with adb tcpip.

You can get a full list of all of the commands you can run via the Android Debugging Bridge by running adb --help.

Inspect.dev

Inspect.dev is a paid mobile dev tool that allows you to easily debug your Capacitor application using the Chrome DevTools you already use when debugging your application. While you can already use Chrome or Safari to debug your application, Inspect adds a few extra tools such as
– iOS app inspection from Windows
– Chrome DevTools instead of Safari DevTools for iOS apps
– Built-in React, Angular, and Due dev tools (coming soon!)

Inspect has a 14-day free trial, and then costs $49/year. The free mobile dev tools that come with Chrome and Safari are great, but Inspect bundles them together into a single, easy-to-use application. Check out the Inspect.dev pricing page to get started with a free trial!

Fantastic iOS Tools ✨

Android has some pretty great mobile dev tools to showcase, but that doesn’t mean iOS is lacking in useful equivalents. After you’ve installed Xcode, a lot of command-line tools are set up for you without even realizing it. With no additional setup and a little bit of knowledge, you’ll be working with iOS dev tools like a pro!

simctl

simctl is Apple’s CLI for interacting with iOS simulators. You can do a lot of interesting things like simctl like
– Running an installed app with xcrun simctl spawn
– Triggering an iCloud sync with xcrun simctl icloud_sync
– Testing push notifications with xcrun simctl push
– Adding test photos and videos to a simulator with xcrun simctl add media

And more!

simctl is automatically installed when installing Xcode. You can run it by using “Xcode run” (xcrun) and using the format xcrun simctl. For more info on each command, you can run xcrun simctl --help.

xcodes

Sometimes, moving between major versions of Xcode can be a real pain. Maybe you have a library that doesn’t work with the newest version of Xcode yet. Or for some reason, your app builds with an older version of Xcode but not a newer one. Enter xcodes. That is Xcode with an s.

xcodes is another command-line tool that helps you easily install and switch between multiple versions of Xcode. The easiest way of installing Xcode is to install it via the App Store. However, downgrading requires you to go to the additional resources section on the Apple Developer page, pick the correct version, download, and install. With xcodes, it’s as easy as xcodes install.

You can install the xcodes via homebrew using the following command:

brew install robotsandpencils/made/xcodes

You can also install Xcodes.App, the related GUI, to install multiple versions of Xcode as well. Both are easy-to-use tools that will save a ton of time waiting when migrating between Xcode versions.

Quicktime Media Player

Did you know that QuickTime media player has an option to mirror your iPhone screen on your Mac? While it’s not as fully featured as scrcpy, it is useful for making recordings of your app in action on a physical device. Plus, it’s preinstalled on most Macs already, so you won’t need to install any additional software. To use this helpful feature you do the following:
1. Connect your iPhone to your Mac with a USB cable
2. Open the QuickTime Player app
3. On the top menubar, click File > New Movie Recording
4. In the QuickTime window click on the down arrow by the red record button.
5. Select your iPhone from the dropdown.

And with that, you have a mirrored iPhone ready and viewable on your Mac.

Integrate these tools into your Capacitor workflow

If you’re a web developer using Capacitor for the first time, it can feel a bit daunting to jump into a new tech space you’re less familiar with. All of the tools I’ve listed above are free and work great with any mobile project; including Capacitor. If you have any mobile dev tools you like to use in your projects, join our forum or Discord server and tell our community. We’d love to hear what tools you use to level up your mobile development.