As a web developer first jumping into mobile development with Capacitor, the mobile ecosystem can be a bit overwhelming. Luckily, we\u2019ve 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.<\/p>\n
<\/p>\n
First, let\u2019s 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<\/a> and creating an emulator with the Android Virtual Device Manager<\/a> these three tools are some that greatly speed up development and testing time.<\/p>\n scrcpy<\/a> is a free, open-source, command-line tool built by Genymobile that allows you to flawlessly control your Android device over USB. If you\u2019ve ever used the Android emulator that comes with Android Studio, you may have run into performance<\/a> issues<\/a> and general clunkiness. Scrcpy allows you to bypass the Android emulator and mirror your Android device\u2019s 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.<\/p>\n The CLI is available on many different package managers, such as With that, you\u2019ve got your Android device mirrored to your computer and a much better device to test on than the Android emulator.<\/p>\n The adb<\/a> 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\u2019t automatically set up in your shell\u2019s What can You can get a full list of all of the commands you can run via the Android Debugging Bridge by running Inspect.dev<\/a> is a paid mobile dev tool that allows you to easily debug your Capacitor application using the Chrome DevTools<\/a> you already use when debugging your application. While you can already use Chrome or Safari to debug your application<\/a>, Inspect adds a few extra tools such as 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<\/a> to get started with a free trial!<\/p>\n Android has some pretty great mobile dev tools to showcase, but that doesn\u2019t mean iOS is lacking in useful equivalents. After you\u2019ve installed Xcode<\/a>, 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\u2019ll be working with iOS dev tools like a pro!<\/p>\n And more!<\/p>\n Sometimes, moving between major versions of Xcode can be a real pain. Maybe you have a library that doesn\u2019t 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<\/a>. That is Xcode with an s.<\/p>\n You can install the You can also install Xcodes.App, the related GUI<\/a>, 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.<\/p>\n Did you know that QuickTime media player has an option to mirror your iPhone screen on your Mac? While it\u2019s not as fully featured as scrcpy<\/a>, it is<\/em> useful for making recordings of your app in action on a physical device. Plus, it\u2019s preinstalled on most Macs already, so you won\u2019t need to install any additional software. To use this helpful feature you do the following: And with that, you have a mirrored iPhone ready and viewable on your Mac.<\/p>\n If you\u2019re a web developer using Capacitor for the first time<\/a>, it can feel a bit daunting to jump into a new tech space you\u2019re less familiar with. All of the tools I\u2019ve 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<\/a> or Discord server<\/a> and tell our community. We\u2019d love to hear what tools you use to level up your mobile development.<\/p>\n","protected":false},"excerpt":{"rendered":" As a web developer first jumping into mobile development with Capacitor, the mobile ecosystem can be a bit overwhelming. Luckily, we\u2019ve 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.<\/p>\n","protected":false},"author":90,"featured_media":4251,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"26","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"547757","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/fantastic-mobile-dev-tools-and-where-to-find-them\/223751","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[121],"tags":[151],"class_list":["post-4250","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","tag-capacitor"],"acf":[],"yoast_head":"\nscrcpy<\/h3>\n
apt<\/code>, pacman<\/code>, choco<\/code>, scoop<\/code>, brew<\/code>, or macports<\/code> to name a few. Once you\u2019ve installed scrcpy, plug in your Android device and run the following command.<\/p>\nscrcpy\n<\/code><\/pre>\nAndroid Debugging Bridge (adb)<\/h3>\n
$PATH<\/code> variable. The adb<\/code> utility is installed in the \u201cplatform-tools\u201d folder where the rest of the Android SDK is installed. For example, my adb<\/code> CLI is located in \/Users\/Thomas\/Library\/Android\/sdk\/adb<\/code>. You can follow this great guide on how to add adb to your PATH variable<\/a> so you can use it more easily in your terminal.<\/p>\nadb<\/code> do though? With the debug bridge you can\u2026
\n– Allow my phone to connect to my computer\u2019s localhost with adb reverse<\/code> (great for live reloading!)
\n– Copy files to and from my device adb push<\/code> and adb pull<\/code>.
\n– Create a screen recording or screenshot of my phone adb shell screenrecord<\/code>.
\n– Run shell commands on my device with adb shell<\/code>.
\n– Connect wirelessly to your phone with adb tcpip<\/code>.<\/p>\nadb --help<\/code>.<\/p>\nInspect.dev<\/h3>\n
\n– iOS app inspection from Windows
\n– Chrome DevTools instead of Safari DevTools for iOS apps
\n– Built-in React, Angular, and Due dev tools (coming soon!)<\/p>\nFantastic iOS Tools \u2728<\/h2>\n
simctl<\/h3>\n
simctl<\/code> is Apple\u2019s CLI for interacting with iOS simulators. You can do a lot of interesting things like simctl<\/code> like
\n– Running an installed app with xcrun simctl spawn<\/code>
\n– Triggering an iCloud sync with xcrun simctl icloud_sync<\/code>
\n– Testing push notifications with xcrun simctl push<\/code>
\n– Adding test photos and videos to a simulator with xcrun simctl add media<\/code><\/p>\nsimctl<\/code> is automatically installed when installing Xcode. You can run it by using \u201cXcode run\u201d (xcrun) and using the format xcrun simctl<\/code>. For more info on each command, you can run xcrun simctl --help<\/code>.<\/p>\nxcodes<\/h3>\n
xcodes<\/code> 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<\/a>, pick the correct version, download, and install. With xcodes<\/code>, it\u2019s as easy as xcodes install<\/code>.<\/p>\nxcodes<\/code> via homebrew using the following command:<\/p>\nbrew install robotsandpencils\/made\/xcodes\n<\/code><\/pre>\nQuicktime Media Player<\/h3>\n
\n1. Connect your iPhone to your Mac with a USB cable
\n2. Open the QuickTime Player app
\n3. On the top menubar, click File > New Movie Recording
\n4. In the QuickTime window click on the down arrow by the red record button.
\n5. Select your iPhone from the dropdown.<\/p>\nIntegrate these tools into your Capacitor workflow<\/h2>\n