| title | Debugging Mobile Apps |
|---|---|
| id | debugging-mobile-apps |
WaveMaker uses Cordova platform to build hybrid mobile apps. While Cordova handles the native JavaScript API binding, WaveMaker handles the core app logic and UI. A mobile app built using WaveMaker runs in a web view (equivalent to a web browser). How to debug the web view layer is explained below.
- Android Mobile
- An App (to debug) built on Cordova
- Desktop/laptop with chrome browser
-
On your android mobile, go to Settings > Security. Enable ‘Unknown sources: Allow installation of apps from unknown sources’
-
Go to Settings > About Phone. In ‘About Phone’ page, click on build number for 7 times to enable developer options.
-
Go to Settings > Developer Options. Enable USB debugging.
- Open the app on mobile and connect mobile to a desktop with a USB cable.
- On the desktop, open a chrome browser and go to ‘chrome://inspect#devices’. All available apps for debugging are shown on that page.
- Click on inspect link that appears below to your app.Chrome debugging tools will open and you can debug the app.
- iPhone
- Mobile app built on Cordova
- MacBook (or Mac Pro or Mac Mini) with safari browser
- Open Settings and Tap on Safari
- In Safari Settings, Tap on Advanced
- Turn on Web Inspector.
- Open Safari browser > preferences
- Go to Advanced and check on ‘Show Develop Menu in menu bar’
- Open the app to debug on iPhone.
- Connect iPhone to a MacBook with a USB cable.
- Open Safari in a MacBook, and click on ‘Develop’ menu.
- Under Develop menu, all connected devices (iPhone) are listed.Under each Device sub-menu, all apps available to debug in that device are listed.
- Click on the app’s page to open the debugger.
