I, recently got a scenario at work where the feature had to be tested out in iOS.
It has to be noted that iOS Safari, as well as Chrome, uses the Webkit Engine on iOS. Rumours are that Google is building its own iOS javascript engine but it might not be available for public usage any sooner.
That said, I tested out the feature on an iOS Safari browser. Whether or not the feature worked, developers can never resist taking a look at the logs while testing, to ensure the flow. That's where my curiosity lay too.
Prerequisites
- MacBook device
- iOS device
- Cable that connects the above two devices
Steps to follow
Step 1 - On your iOS device:
- Open the Settings app on iOS
- Go to Safari
- Inside Safari, navigate to Advanced
- Here, enable Web Inspector
- Now open your Safari browser on iOS and have your Web app loaded for debugging
Step 2 - Connect your iOS device with your MacOS device using the cable
Step 3 - On your MacOS device
- Open the Safari browser on your MacOS device
- If you do not see the Develop Menu at the top, you have to enable it
- To enable Develop, Go to Safari > Settings
- In the Advanced tab, enable "Show Develop menu in menu bar" and the Develop option should appear in the Menu bar now
- Ensure your iOS device is unlocked and connected to the MacOS device
- Open the newly appearing Develop Menu
- Find your mobile device in the list and open its sub-menu
- In the menu, notice the URLs of the tabs you have opened on your iOS device
- Click on the URL of the tab that you want to inspect and there appears the debugger tool
Bonus Tip - In the menu for your iOS device, there's an option to Connect via Network. After the first time connection through a cable, when you enable this, thereafter you don't need the cable if both the MacOS & iOS devices are connected to the same network
Hope this helps and let us also stay tuned to know if Chrome ever brings its own Javascript Engine for iOS.
Comments
Post a Comment