> For the complete documentation index, see [llms.txt](https://docs.betterbugs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.betterbugs.io/developer-guide-old/using-web-sdk/development-mode.md).

# Development mode

### What are the Use Cases of Using the Development Mode in BetterBugs.io Web SDK Widget

* Allows you to use the widget in the development/ testing/staging environments.
* Use the widget during development, alpha testing, beta testing, bug bashes, and for QA overall. 
* Perfect for collecting feedback and bug reports for the app from within your internal team.

{% hint style="info" icon="lightbulb" %}
**PREREQUISITE**

* Make sure that the SDK is installed correctly and the widget is visible in your app screen. 
* The "**mode**" property in initialization code is [set to "**development**"](/developer-guide-old/using-web-sdk.md).
  {% endhint %}

### How to Report a Bug using BetterBugs.io Web SDK Widget in Development Mode: Step-by-Step

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Fq1tfwCWHzJnrFn0GwE6F%2F05-Web-SDK-Bug_Reporting-Flow-in-Development%20Mode.mp4?alt=media&token=87633790-8cea-481c-8bf1-fcc6c2a7bc58>" %}
How to Report a Bug using BetterBugs.io Web SDK Widget in Development Mode | Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open the widget and select screen capturing mode

When you encounter an issue/bug/error on the web app, click the “**Report Bug**” widget and select the screen capture mode:&#x20;

* **Screenshot**
* **Screen record** (record screen up to 10 mins by default, can be configured for up to 15 mins)

For instance, click the “**Screenshot**” option
{% endstep %}

{% step %}

#### Grant permission to capture the screen instantly

Next, click “**Allow**” to grant permissions to instantly capture your screen.
{% endstep %}

{% step %}

#### Annotate the screenshot

You can add annotations to the screenshot to highlight the issue from the annotations toolbar. Then, hit the ✔️ button.
{% endstep %}

{% step %}

#### Add details

Next, add the details for the issue:

* **Title**  – Bug/Feedback title.
* **Description** — Quick summary, issue repro steps, and additional context.&#x20;
* **Add assignee** — Select an assignee from the Workspace members.
* **Add reporter\*** — Add a reporter name from the Workspace members. It's a required field.
  {% endstep %}

{% step %}

#### Submit

Finally, hit the “**Submit**” button to create and send the bug report
{% endstep %}
{% endstepper %}

You’re good to do.&#x20;

After you submit the report gets added to the BetterBugs.io account.&#x20;

You can access the complete report in the BetterBugs.io dashboard. It should be available in the BetterBugs.io project that’s integrated with the SDK widget.