Skip to main content

Storefront - Enterprise Debugging

Here is some general information you can use to assist in debugging component creation using Storefront - Enterprise.

Inspecting properties on Storefront - Enterprise components​

You can inspect the current properties of a Storefront - Enterprise element, or or one of your custom element implementations, using web development tools and targeting the DOM element in the Elements panel.

Chrome DevTools Elements Panel inspecting an Storefront - Enterprise element

You can then switch over to console and use the $0 variable to inspect the properties. Chrome DevTools Console Panel inspecting the $0 variable

Debug Flag​

When initializing Storefront - Enterprise, you may pass a debug flag which will output some additional information to the browser console as shown below.

import { init } from "@boldpenguin/sdk-core";
init({
  clientId: environment.clientId,
  env: environment.environmentFlag,
  googleApiToken: environment.googleApiToken,
  debug: true,
});

This will output all of the Redux actions and the outcome of the state changes as they are dispatched, and will send some Storefront - Enterprise specific error information to window.console.error where you can see the outcome of the Redux state changing in real time.

Developer console showing redux actions being dispatched Screenshot showing Chrome Developer Tools Console panel open and redux actions being dispatched