Debugging

Under the hood, Shopify App Bridge uses Redux to manage actions and app state. All actions dispatched by your app are recorded by Redux, and you can use Redux DevTools to review, replay, and dispatch actions to help you debug.

Set up Redux DevTools

  1. Follow the instructions to install Redux DevTools in your browser. The following examples are based on using Google Chrome, but similar steps apply for Firefox.
  2. Open your app in a development store.
  3. Open the Redux DevTools.

Inspecting dispatched actions

From the Inspector tab in Redux DevTools, select the App Bridge instance. You should see a list of all dispatched App Bridge actions on the left-hand side.

Click on an action in the list to get more information about that action.

Action

After you select an action, click the Action tab to get more information about the action's payload.

State

After you select an action, click the State tab to see the state of the Shopify App Bridge data store after the action was dispatched. Your app state is contained in the appBridge.store property. You can click (pin) next to appBridge.store to bookmark this property so you can quickly review the state. The information shown here is identical to what you get when calling app.getState locally on your app.

Diff

After you select an action, click the Diff tab to see the difference between your app state after the action was dispatched. In the following example, a LOADING::CLEAR action was dispatched to set the loading state to false:

Replaying actions

In Redux DevTools, click the clock icon to open the playback controller. This lets you step backward and forward through actions, and replay them in sequence.

Dispatching actions

In Redux DevTools, click on the keyboard icon to open the dispatcher to manually dispatch actions directly on the store. This lets you quickly debug without using any code. Each action must contain the following properties: type, group, version. The payload is optional depending on the action being dispatched.

Shopify App Bridge automatically fills out the required values for you when dispatching actions through an app. When using the DevTools to dispatch, you must supply the required values yourself.

Here is an example of a show Toast action:

{
  group: 'Toast',
  payload: {
    duration: 3000,
    message: 'Hello world!'
  },
  type: 'APP::TOAST::SHOW',
  version: '0.8.1',
}

You can paste the above directly inside the dispatcher and press Dispatch to submit the action:

Sign up for a Partner account to get started.

Sign up