Ionic Developer Tips
By default, when you view your app in the browser, Ionic will apply the iOS theme. However, since Ionic components adapt according to their platform, it is helpful to be able to view what your app looks like on Android. To do this, simply add
?ionicplatform=android to the URL where your app is being served:
http://localhost:8100/?ionicplatform=android. This will change how Ionic sees which platform you are on.
However, this will not change how the browser sees which platform you are on. To change how the browser sees which platform and device you are on, you must change the user-agent. To do this, open up Chrome DevTools, and toggle device mode on with Ctrl + Shift + M (Cmd + Shift + M on Mac).
Selecting devices from the device dropdown will change the user-agent, as well as the dimensions of the viewport. Between this and adding the
?ionicplatform=android URL param, you can check out how your app will look on a wide number of devices.
The iOS simulator allows you to test and debug your app before running it on an actual device. Before it can be used, we need to install Xcode, Apple's IDE. The Ionic CLI can then be used to run the app in the current directory on the simulator:
Passing in the
-lc flag will enable livereload and log console output to your terminal.
You can also use Xcode to launch the emulator and debug your app. Open up Xcode and open
../path-to-app/platforms/ios/myApp.xcodeproj. After your app loads, you will be able to run it and see all console output inside of Xcode's output window.
While the Android SDK comes with a stock emulator, it can be very slow and unresponsive at times. Genymotion is an alternate emulator that is blazing fast, and allows you to emulate native functionality like GPS and camera.
Safari can be used to debug an Ionic app on a connected iOS device. First, we need to enable Web Inspector on the connected device. Web Inspector can be found under
Settings > Safari > Advanced. Next, head over to the Safari on your Mac and enable Show Develop menu in menu bar under
Safari > Preferences > Advanced. The connected device should now appear in the Develop menu. From there, you can inspect it and use Safari's developer tools to debug your application!
Chrome DevTools are a very powerful set of tools for debugging your application. When you use
ionic serve to run your application in the browser, DevTools can be used to inspect elements, view console logs, profile your application, and much more.
In addition to using DevTools to debug your app in the browser, DevTools can be used to debug a remote physical Android device, or even a Genymotion emulator running your app. First off, we will need to have adb installed. Once installed, if your device is connected, or an Android emulator is running, you should be able to see your device listed when you run the following command:
Next, go to
chrome://inspect/#devices in Chrome and inspect your Android device. Note: you may need to change the settings on your device to allow USB debugging. From there, you can use Chrome to debug your application just like it is in the browser!
VS Code has a dedicated plugin for debugging apps built with Cordova. The plugin creates bridge between the device and the debugger and allows you to set break points in your editor directly.