I was writing a mobile application using Ionic Framework that watches the user location and does some actions if the user is passing through a certain area. Here is the lines of code I used to watch the location
navigator.geolocation.watchPosition(updatePosition,
positionFailed,
captureOptions);
During my initial testing of the app (on Chromium) I needed to a way to fake the browser's location in order to test my app's logic. There are several ways to fake the location for the mobile app, One great way was to use IBM MobileFirst Mobile Browser Simulator, but this would force me to use the IBM product. Another way was to use Ripple, Ripple is an in browser simulator created by BlackBerry to test HTML5 Blackberry apps inside the browser, I gave it a go once before and it good, and it allowed me to fake the location.
All of the above methods are good and will do the trick, but they all involve adding one more tool to my already packed development stack, then I found something hidden inside Chrome developer tools. There is an emulation tab that can be used to emulate a mobile a device screen along with its sensors. Here is how to use Chrome developer tools to fake a geolocation
- Open the Chrome developer tools and click on the "Emulation" tab on the lower level of tabs then click "Enable emulation"
- After emulation is enabled a whole new world is opened, you will notice that your current page will be emulated by default to a smaller screen size, uncheck "Emulate screen resolution" to return to normal desktop size.
- From the tabs on the left click "Sensors" and then click "Emulate geolocation coordinates" and add the fake coordinates you want to feed to your app.
- The beauty on this feature is that it works so well with geolocation.watchPosition above, each time you change the fake location on Chrome, the app gets notified of a position change and your new values are fed to it. So technically you can plot a course manually using this feature.
That was the easiest and most convenient way to test location for a mobile app on Chrome.
No comments:
Post a Comment