How to Debug Shopify POS App Console Logs on iOS (Using Safari DevTools)

If you’re building a Shopify POS UI extension or custom POS app, debugging on iOS can feel like a black box. In this guide, you’ll learn exactly how to see your console.log output and errors from the Shopify POS app running on an iPhone or iPad, using Safari DevTools on a Mac.

💡 Prefer video? Watch the full walkthrough below.

Why you need Safari DevTools for Shopify POS on iOS

Shopify POS on iOS runs your UI extensions inside a WebView. That means you can’t just open Chrome DevTools like on desktop – you need to attach Safari’s Web Inspector on macOS to the iOS WebView. Once connected, you can:

• View console.log statements in real time.
• Inspect runtime errors and warnings.
• Inspect network requests and responses.
• Debug layout and components inside the POS UI extension.

Debugging is only available when your extension is running on a dev store, so make sure you’re not using a production store for this.

Prerequisites

Before you start, make sure you have:

• A Mac with Safari installed.
• An iPhone or iPad with the Shopify POS app installed.
• A dev store with your POS UI extension or app installed and running.
• A USB/Lightning/USB‑C cable to connect the iOS device to your Mac.
• Some console.log statements already added in your extension code.

On iOS, you must also enable the Web Inspector feature so Safari can attach to the WebView.

Step 1: Enable Web Inspector on iOS

First, turn on the developer Web Inspector in iOS so that Safari on your Mac can see the Shopify POS WebView.

1. On your iPhone/iPad, open Settings.
2. Scroll down and tap Safari.
3. Scroll to the bottom and tap Advanced.
4. Turn on Web Inspector.

This tells iOS that its WebViews (including the one used by Shopify POS) can be inspected from a Mac using Safari DevTools.

Step 2: Enable the Develop menu in Safari on macOS

Next, you need to expose the Develop menu in Safari, which is where your iOS device will show up.

1. On your Mac, open Safari.
2. In the menu bar, go to Safari → Settings (or Preferences on older versions).
3. Click the Advanced tab.
4. Enable the option to show features for web developers so that the Develop menu appears in the top toolbar.

After this, you should see a Develop item in the Safari menu bar at the top of your screen.

Step 3: Connect your iOS device and open Shopify POS

Now it’s time to hook everything up physically and logically.

1. Connect your iPhone/iPad to your Mac using a USB/Lightning/USB‑C cable.
2. If your iOS device shows a prompt to Trust This Computer, tap Trust and enter your passcode.
3. On the iOS device, open the Shopify POS app.
4. Log into your dev store if you’re not already logged in.
5. Navigate to the screen where your POS UI extension or app runs, and make sure it’s loaded and visible.

Your extension code (with console.log statements) should now be active inside the POS WebView.

Step 4: Attach Safari DevTools to the Shopify POS WebView

With the device connected and POS running, you can now attach Safari’s Web Inspector.

1. On your Mac, in Safari, click the Develop menu in the top toolbar.
2. In the dropdown, you should see your iOS device name listed (for example, “John’s iPhone”).
3. Hover over your device name to open its submenu.
4. In the submenu, look for an entry that corresponds to the Shopify POS WebView.
   • For POS UI extensions, Shopify’s docs describe this as the load.html context.
5. Click that load.html (or equivalent POS WebView entry).

Safari will open a new Web Inspector window attached to the Shopify POS WebView, which is where your extension is running.

Step 5: Open the Console and see console.log output

Once Web Inspector is open, you can access your logs and debug information.

1. In the Web Inspector window, click the Console tab.
2. Make sure your Shopify POS app and extension are still open on the iOS device.
3. On the iOS device, trigger the actions in your extension that contain console.log statements (for example, tap a “Test” button or perform a checkout flow).
4. Watch the Console pane in Safari – you should see your console.log messages appear live as your code runs.

You’ll also see JavaScript errors, warnings, and other messages, which is invaluable for debugging things like API calls, component props, and unexpected runtime issues.

Step 6: Use the Inspector for deeper debugging

Beyond simple logging, Safari DevTools gives you more ways to understand what’s happening inside your POS extension.

You can:

• Inspect elements in the Elements tab to see the rendered DOM inside the WebView.
• Use Network to inspect API calls, request payloads, and responses.
• Set breakpoints in the Sources tab to pause execution and inspect variables.
• Combine try/catch with console.log for smarter error reporting, as recommended in Shopify’s debugging docs.

This brings your mobile POS debugging experience closer to what you’re used to on desktop web apps.

Troubleshooting: when your logs don’t show up

If you don’t see your device, the WebView, or your logs, check the following:

Develop menu missing in Safari

• Revisit Safari → Settings → Advanced and ensure show features for web developers is enabled.

iOS device not appearing in Develop menu

• Confirm the device is connected with a cable.
• Make sure you tapped Trust This Computer on the iPhone/iPad.
• Confirm Web Inspector is enabled in iOS Settings → Safari → Advanced.

No load.html / POS context

• Ensure the Shopify POS app is open and your extension is visible and running on a dev store.

No console.log output

• Double‑check that your console.log statements are reachable in the code path you’re triggering.
• Make sure you’re connected to the correct WebView context (if there are multiple entries under your device).
• Try closing and reopening Shopify POS, then reattaching Web Inspector.

Bonus: debugging Shopify POS on Android

If you also develop for Android, Shopify supports debugging POS UI extensions through Chrome DevTools:

• Connect your Android device or emulator.
• Ensure the extension is running on a dev store through POS.
• In Chrome on your desktop, go to chrome://inspect.
• Find “Shopify UI Extensions Internal”, then click Inspect to open DevTools and see console.log and network activity.

Final thoughts

With Web Inspector and Safari DevTools, debugging Shopify POS on iOS becomes much more predictable. Instead of guessing why something fails on a device, you get real‑time logs, errors, and network insights directly from the POS WebView.

Use this setup while you build and iterate on your POS UI extensions, and you’ll ship more reliable features faster.