Troubleshoot JavaScript SDK

On this page
Debug Mode
Activate Debug Mode
Debug Panel
Debug Logs
Troubleshooting Tips
Debug Tip #1: Check if SDK is loaded
Debug Tip #2: Test with a newly opened Incognito Window
Debug Tip #3: Check if your are using the audience type
Debug Tip #4: Reset user data in your account to start over
Debug Tip #5: Inspect network tab

Debug Mode

Our JavaScript SDK has a built-in Debug Mode which will help you to track down and troubleshoot issues with your Refiner installation. When activated, an information panel in the top left corner of your web-browser will provide insights about the current state of your installation.

Activate Debug Mode

There are two ways to enable the Debug Mode:

  • By adding a parameter to the current URL
  • By executing the setDebugMode method of our SDK

Enable with URL parameters

To enable the debug mode, add a ‘#refiner_debug‘ hash to your URL and reload the page. 

https://your-app.com#refiner_debug=true

Alternatively, you can also add ‘&refiner_debug=true‘ parameter to your URL.

https://your-app.com?refiner_debug=true

Once enabled, the Debug Mode stays active in your current Browser until you disabled it. Keeping the Debug Mode persistent is helpful when debugging for examples page load triggers.

To disable Debug Mode, you need to set the URL parameter refiner_debug from true to false:

https://your-app.com#refiner_debug=false

Or alternatively:

https://your-app.com?refiner_debug=false

Enable with setDebugMode method

If you don’t want to fiddle with URL parameters, you can execute the following method to activate the Debug Mode:

_refiner('setDebugMode', true);

You can execute this method either in your app code, or in the developer console of your browser.

Once enabled, the Debug Mode stays active in your current Browser until you disabled it. Keeping the Debug Mode persistent is helpful when debugging for examples page load triggers.

To disable Debug Mode, execute the same method with ‘false’ as the second parameter:

_refiner('setDebugMode', false);

Debug Panel

When the Debug Mode is enabled, an information panel appears in the top left corner of your browser window as shown below.

The information panel provides information on whether or not our client was installed correctly, if you are identifying your users, and if there are any communication issues with our servers.

If the information panel does not appear, please try reloading the page again. If it still doesn’t appear, please refer to Debug Tip #1 further below.

Debug Logs

In addition to showing the Quick Debug Window, enabling Debug Mode will also generate detailed logs. To inspect those logs, you need to open the Developer Tools Console of your browser.

In Google Chrome you can open the Developer Tools with the keyboard shortcut “Option + ⌘ + J” on macOS, or “Shift + CTRL + J” on Windows/Linux.

In Firefox, the Developer Console can be opened with the shortcut “Ctrl + Shift + I” or F12 on Windows and Linux, or “Cmd + Opt + I” on macOS.

Once opened, navigate to the “Console” tab. You should see detailed logs about all important events and data exchanges with our server.

When interacting with our support team, a screenshot of the logs as shown below will be incredible helpful.