# User Explorer

{% hint style="info" %}
**Recommended for debugging purposes only.**
{% endhint %}

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

Add the following dependency.

{% tabs %}
{% tab title="npm" %}

```shell
// react-sdk@11.21.0 이상일 경우
npm install @hackler/javascript-devtools@1.0.2

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

{% endtab %}

{% tab title="yarn" %}

```shell
// react-sdk@11.21.0 이상일 경우
yarn add @hackler/javascript-devtools@1.0.2

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

{% endtab %}
{% endtabs %}

<table><thead><tr><th width="250">react-sdk version</th><th>javascript-devtools version</th></tr></thead><tbody><tr><td>11.13.0 &#x3C;= version &#x3C; 11.21.0</td><td>1.0.1</td></tr><tr><td>11.21.0 &#x3C;= version</td><td>1.0.2</td></tr></tbody></table>

### User Explorer Configuration

<table><thead><tr><th width="150">Key</th><th>Description</th><th width="120">Default</th><th width="110">Supported</th></tr></thead><tbody><tr><td><code>devTool</code></td><td>Enables User Explorer.</td><td><code>undefined</code></td><td>11.13.0+</td></tr><tr><td><code>autoOpenDevTool</code></td><td>Option to automatically show the User Explorer button.</td><td><code>false</code></td><td>11.13.0+</td></tr></tbody></table>

* Pass `HackleDevTools` imported from `"@hackler/javascript-devtools"` to `devTool`. **(Required\*)**
* If `autoOpenDevTool` is set to `true`, the User Explorer window appears automatically without calling `showUserExplorer`. (Default value is `false`.)

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

```javascript
import { createInstance } from "@hackler/react-sdk";
import HackleDevTools from "@hackler/javascript-devtools"

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

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

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

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

{% hint style="danger" %}
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.
{% endhint %}

### User Explorer Window

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

![](/files/HrTlpLTauEo9s9nR2mJ2)

## Checking User Identifiers

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

![](/files/13J1uI8RYJ7Df51doXsV)

## 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.

![](/files/BmIkwGXMU3YGjODY9wLQ)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hackle.io/en/development-guide/react/react-user-explorer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.