--- title: Development and debugging description: Discover how you can develop and debug your POS UI extensions. source_url: html: 'https://shopify.dev/docs/apps/build/pos/debugging' md: 'https://shopify.dev/docs/apps/build/pos/debugging.md' --- # Development and debugging The POS Dev Console and dev store provide tools to help you during development and debugging of your POS UI extensions. *** ## Using 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 can use the console to: * Check for and identify errors that'll 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](https://shopify.dev/assets/assets/apps/pos/devconsole-reference-fEwltfHT.png) *** ## API errors If an API receives an incorrect parameter, it doesn't attempt to perform the action and throws an error instead. You can view this error 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. *** ## Component errors If a component is given an incorrect parameter, the extension is replaced with a non-descriptive user interface that indicates an issue has occurred. If the extension is running locally, then you 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.** *** ## Debugging on Android This section covers how to view POS UI extension logs and errors on Android devices. ### Requirements * The extension needs to be running on a [dev store](https://shopify.dev/docs/apps/tools/development-stores) in the POS app. Debugging is only available on dev stores. You can create a dev store from the Partner Dashboard, or you can use an existing dev store for debugging purposes. ![dev store](https://shopify.dev/assets/assets/apps/pos/debug-development-store-BDGN_Jzt.png) * 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, then you can follow the [Chrome developer documentation](https://developer.chrome.com/docs/devtools/remote-debugging/) to set up a device for debugging purposes. ### Steps 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 **Inspect** to open a DevTools window. You can use this window to interact with the console, view `console.log` statements in your code, and inspect the network activity. ### Android Demo 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](https://shopify.dev/assets/assets/apps/pos/debug-ui-extension-f6Iq5mhX.gif) *** ## Debugging on i​OS This section covers how to view POS UI extension logs and errors on iOS devices. ### Requirements * The extension needs to be running on a [dev store](https://shopify.dev/docs/apps/tools/development-stores) in the POS app. Debugging is only available on dev stores. You can create a dev store from the Partner Dashboard, or you can use an existing dev store for debugging purposes. ![dev store](https://shopify.dev/assets/assets/apps/pos/debug-development-store-BDGN_Jzt.png) * You have an iOS device available with the POS app installed. Follow the [Safari documentation](https://support.apple.com/en-ca/guide/safari/sfri20948/mac) to set up dev tooling. ### Steps 1. Connect the iOS device to your computer. 2. Make sure the POS UI extension is running on the POS app. 3. On your computer, open Safari and select the **Develop** menu in the top toolbar. 4. Select your iOS device to open the device menu. 5. Select the `load.html` context. Using the window that opens, you can interact with the console, view \`console.log statements, and inspect network activity. ### i​OS Demo The following demo shows how 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](https://shopify.dev/assets/assets/apps/pos/debug-ui-extension-ios-DjTRqTFs.gif) ***