User Explorer

Recommended for debugging purposes only.

The User Explorer is not available in remote evaluation mode.

This guide explains how to check user identifiers and force-assign users to A/B Tests and Feature Flags.

Add the following dependency.

npm

// javascript-sdk@12.0.0 이상일 경우
npm install @hackler/javascript-devtools@2.0.0

// javascript-sdk@11.21.0 이상 12.0.0 미만일 경우
npm install @hackler/javascript-devtools@1.0.2

// javascript-sdk@11.21.0 미만일 경우
npm install @hackler/javascript-devtools@1.0.1

yarn

// javascript-sdk@12.0.0 이상일 경우
yarn add @hackler/javascript-devtools@2.0.0

// javascript-sdk@11.21.0 이상 12.0.0 미만일 경우
yarn add @hackler/javascript-devtools@1.0.2

// javascript-sdk@11.21.0 미만일 경우
yarn add @hackler/javascript-devtools@1.0.1

javascript-sdk version	javascript-devtools version
11.13.0 <= version < 11.21.0	1.0.1
11.21.0 <= version < 12.0.0	1.0.2
12.0.0 <= version	2.0.0

User Explorer Configuration

Key	Description	Default	Supported
devTool	Enables User Explorer.	undefined	11.13.0+
autoOpenDevTool	Option to automatically show the User Explorer button.	false	11.13.0+

• Pass HackleDevTools imported from "@hackler/javascript-devtools" to devTool.

• If autoOpenDevTool is set to true, the User Explorer window appears automatically without calling showUserExplorer.

Add the following options to your existing Hackle Client initialization code.

JavaScript

import * as Hackle from "@hackler/javascript-sdk";
import HackleDevTools from "@hackler/javascript-devtools"

const config = {
  devTool: HackleDevTools,
  autoOpenDevTool: false,
};

// YOUR_BROWSER_SDK_KEY로 초기화
const hackleClient = Hackle.createInstance(YOUR_BROWSER_SDK_KEY, config);

// 사용자 탐색을 나타내고 싶은 시점에 Trigger 되도록 해주세요.
hackleClient.showUserExplorer()

// 사용자 탐색 창을 닫고 싶을 경우에 Trigger 되도록 해주세요.
hackleClient.hideUserExplorer()

HTML

<script src="https://cdn2.hackle.io/npm/@hackler/javascript-devtools@[compatible version]/lib/index.browser.umd.min.js"></script>
<script>
  const config = {
    devTool: HackleDevTools.default,
  };

  // YOUR_BROWSER_SDK_KEY로 초기화
  const hackleClient = Hackle.createInstance(YOUR_BROWSER_SDK_KEY, config);

  // 사용자 탐색을 나타내고 싶은 시점에 Trigger 되도록 해주세요.
  hackleClient.showUserExplorer()

  // 사용자 탐색 창을 닫고 싶을 경우에 Trigger 되도록 해주세요.
  hackleClient.hideUserExplorer()

</script>

Set the autoOpenDevTool option to false in production.

If autoOpenDevTool is set to true, the User Explorer window appears automatically.

It is recommended to call hackleClient.showUserExplorer at the moment you want to display the User Explorer window.

User Explorer Window

A Hackle logo button is displayed at the bottom of the screen. Clicking the button opens the settings screen.

Checking User Identifiers

You can check and copy user identifiers at the top of the screen.

Force Assignment

• You can check the distribution results of A/B Tests and Feature Flags at the bottom of the screen.

• Click the SelectBox to force-assign a user to a specific group.

• Clicking the Reset button removes the force assignment.

• Clicking the Reset all button removes all force assignments.

• When force-assigned in the browser, it only applies when distributing in that browser. (It is not registered as a Test Device on the Dashboard.)

• If force assignment is not applied, please refresh the browser.