Skip to main content

Development and debugging

The POS Dev Console and dev store provide tools to help you during development and debugging of your POS UI extensions.

Anchor to Using the POS Dev Console to troubleshoot and refineUsing the POS Dev Console to troubleshoot and refine

The POS Dev Console provides quick access to extension management during your development process.

To access the POS Dev Console, tap the app icon in the global navigation on the left on tablet experiences, and use the More menu on mobile experiences.

After installing your extension, you may use the console to:

  • Check for and identify errors which will appear next to your extension's name.
  • Toggle App persistence to keep your extension active between POS restarts.
  • Preview extension targets without needing to tap through to target locations.
  • Remove dev extensions to uninstall all dev extensions.
POS Dev Console and its location in the sidebar

Anchor to API errorsAPI errors

If an API receives an incorrect parameter, it won't attempt to perform the action and it will throw an error instead. This error can be viewed either by implementing a try/catch block or by using the Chrome console. For further debugging, you can use console.log to print any additional information in the console.

Anchor to Component errorsComponent errors

If a component is given an incorrect parameter, the extension will be replaced with a non-descriptive user interface that indicates an issue has occurred. In case the extension is running locally, the developer will also see the exact error displayed as a toast message. For further debugging, you can use console.log to print any additional information in the console.

In the future we plan to modify this behavior to display the error in the Chrome console instead, aligning with the API approach.

Anchor to Debugging on AndroidDebugging on Android

This section covers how to view POS UI extension logs and errors on Android devices.

Anchor to RequirementsRequirements

  • The extension needs to be running on a dev store in the POS app. Debugging is only available on dev stores. You can create a dev store from the Partner Portal, or you can use an existing dev store for debugging purposes. dev store
  • 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 set up a device for debugging purposes.

Anchor to StepsSteps

  1. Connect the Android device to your computer or launch the Android emulator.
  2. Make sure the POS UI extension is running on the POS app.
  3. Using Google Chrome, navigate to chrome://inspect.
  4. The UI extension sandbox should appear on the list as "Shopify UI Extensions Internal"
  5. Click the inspect button. This should open a DevTools window, where you will be able to interact with the console, and view console.log statements in your code along with inspecting the network activity.

Anchor to DemoDemo

The following demo shows how to debug a POS UI extension on Android by using the Chrome dev tools. The example extension code has console.log statements when the SmartGrid tile is pressed to open modal.

Debugging demo

Anchor to Debugging on iOSDebugging on iOS

This section covers how to view POS UI extension logs and errors on iOS devices.

Anchor to RequirementsRequirements

  • The extension needs to be running on a dev store in the POS app. Debugging is only available on dev stores. You can create a dev store from the Partner Portal, or you can use an existing dev store for debugging purposes. dev store
  • You have an iOS device available with the POS app installed. Please follow the Safari documentation to set up dev tooling.

Anchor to StepsSteps

  1. Connect the iOS device to your computer.
  2. Make sure the POS UI extension is running on the POS app.
  3. Using Safari on your computer, click the 'Develop' menu in the top toolbar.
  4. You should see your iOS device appear there. Select it. A new menu will appear, and you can then select the load.html context.
  5. This should open a new window, where you will be able to interact with the console, and view console.log statements in your code along with inspecting the network activity.

Anchor to DemoDemo

The following demo shows ow to debug a POS UI extension on iOS by using the Safari dev tools. The example extension code has console.log statements that appear when we open the Safari dev tools.

Debugging demo
Was this page helpful?