Debugging POS UI Extensions
This tutorial covers how to debug POS UI Extension using an Android device and Chrome.
RequirementsAnchor link to section titled "Requirements"
- The extension needs to be running on a development store in the POS app. Debugging is only available on development stores. You can create a development store from the Partner Portal, or you can use an existing development store for debugging purposes.
- You've set up an Android Studio emulator, or you have an Android device available with the POS app installed. If you use an Android device, you can follow the Chrome developer documentation to setup device for debugging purpose.
You can debug your POS UI Extension by following these steps:
- Connect the Android device to your computer or launch the Android emulator.
- Make sure the POS UI Extension is running on the POS app.
- Using Google Chrome, navigate to chrome://inspect.
- The UI Extension WebView should appear on the list as "Shopify UI Extensions Internal"
- Click the inspect button. This should open a DevTools window, where you will able to interact with the console, and view
console.logstatements in your code along with inspecting the network activity.
The following demo shows the debugging in action leveraging tools such as Console and Network available in Chrome. The example extension code has
console.log statements when the SmartGrid tile is pressed to open modal and also to log the remote fetch response.