Debug a Meteor Cordova App


by Spencer Carli

Isobuild is one of the many great features of Meteor. Without too much additional work you can build a mobile app by using the baked in Cordova support Meteor provides. However, debugging a Meteor Cordova app can be a hassle.

Below is a checklist of some packages and various other tips we’ve found that can help you solve that pesky problem you’re having with your app.

Packages

  • launch-screen- It’s a core package that gives you the power to decide when the launch screen will be enabled and disabled. If you’re seeing a white screen flash when your app loads, try using this package. https://atmospherejs.com/meteor/launch-screen
  • mdg:reload-on-resume - Not fond of your app restarting in the middle of use? Adding this package will prevent that from happening. You’ll still get the slightly jarring flash when you next open the app, but at least it won’t happen in the middle of using the app. https://atmospherejs.com/mdg/reload-on-resume

Tips

  • Read through the docs for `mobile-config.js` again. There is a lot that this file can do for you while building your app. http://docs.meteor.com/#/full/mobileconfigjs
  • Make sure any Meteor Cordova related code is inside of a Meteor.startup block

Debugging

  • Weird issues with your build? Start with a clean slate. Run these commands to clean out your local Cordova build.
    • Close Xcode project
    • Run rm -rf .meteor/local/cordova-build
    • In iOS simulator menu, click iOS Simulator, then click "Reset content & settings…"
    • Run meteor run ios-device
  • Running the app via meteor run ios isn’t the best experience. Hot Code Reload rarely worked and the device always defaulted to an iPhone 4s. We found that running meteor run ios-device (which opens Xcode) and selecting your physical device or a simulator was a much better development experience. Plus, you can view the logs in Xcode as your app is running.
  • [iOS] USE SAFARI. This was a big help for me. Just like developing in a browser, you can view and use the console like you would for any other site. You can do this for your Cordova app by opening Safari, choosing `Develop` from the menu, selecting your target (`iOS Simulator` or your device) and choosing the app. You’re now connected! alert(‘Woo!’); If you don’t have “Develop” in your menu make sure to enable it: http://macs.about.com/od/usingyourmac/qt/safaridevelop.htm
  • [Android] Use Chrome. Much like using Safari to debug an iOS app you can put chrome://inspect in the address bar of Google Chrome to debug for Android

The list above is mostly based off of our experience with Meteor Cordova on iOS. Have any tips that are Android specific? Or did we forget something with iOS? Please let us know so we can add it to the list!

We've also got a Github repo full of tips and tricks we've found while working with Meteor Cordova. Here's the link: https://github.com/Differential/meteor-mobile-cookbook

Share Share on Twitter Share on Facebook Share on LinkedIn

How Can We Help?

Reaching out doesn’t mean you’re ready to start a project, but we’d love to learn more about the challenge you’re facing, answer any questions, and see if we might be a good fit for working together.

Contact Us