Ionic: Live Reload & Console Logging in the Simulator

  • January 12th, 2016

Here’s a quick tip for those using the Ionic Framework:

Say you’re building your application up, and have been using ionic serve to serve your application to your browser for testing.

Using ionic serve can be all well and good, until of course, you want to harness any of your mobile device’s functionality using Cordova. Cordova plugins don’t work in your browser, because they are built to access a device-based API (like camera, for example).

So the next thing you do is use the ionic emulate command to run your app in a real device emulator. In the case of iOS, we have iOS Simulator, which we could run with ionic emulate ios.

Great, but now we’re losing some of the benefits of ionic serve – most notably, Live Reload and console logging.

With Live Reload, the productivity boost of being able to make small changes without re-serving the app is clear. With console logging, it is especially useful to have output when it comes to JavaScript-based errors – something that emulators like iOS Simulator won’t provide.

The good news is, Live Reload and console logging are now available to ionic emulate in beta. Just add the Live Reload and console logging flags:

ionic emulate ios -l -c

And, for example, I can now see the error of my JavaScript ways in the command line output:

Ionic Console Error

If you’re anything like me, these two features alone can save up to hours fixing bugs. Hats off to the Ionic team for making it happen!

Read more on the Ionic Framework website — including more optional flags you can use. Enjoy!

Tags: , , , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *