# Debug Console
The Natively Debug Console is a built-in inspector that allows you to monitor the communication between your web application and the native mobile environment. It is the most powerful tool for identifying issues with native features.
{% hint style="info" %}
When submitting a support ticket regarding a native feature not working, please always attach a screenshot of the Debug Console. This provides us with the raw logs needed to skip the "guessing" phase and move straight to a resolution.
{% endhint %}
### Why use the Debug Console?
* Instantly see if a native SDK (OneSignal for Push Notifications or RevenueCat for In-app Purchases) is receiving data from your web app.
* Monitor logs and API responses directly on your physical device.
* Attaching a screenshot from the Debug Console to your support ticket allows our team to identify and fix your issue significantly faster.
### Implementation
{% tabs %}
{% tab title="Bubble.io Plugin" %}
To trigger the console, ensure you are using Natively iOS & Android app builder Plugin is updated to the latest version.You simply call the action from any workflow (such as a button click).
**1. Add the Action**
In your Bubble Editor, create a new workflow (e.g., *When Button 'Open Debug' is clicked*).
**2. Select the Natively Action**
Search for the following action in the workflow selector:
`Natively - Open Debug Console`
{% endtab %}
{% tab title="JavaScript SDK" %}
To trigger the console, ensure you are using JS SDK is updated to the latest version. You can call the console via a button click or a specific debug workflow in your app.
Use the global natively object to trigger the console from any JavaScript function.
```javascript
// Open the debug console
window.natively.openConsole();
```
{% endtab %}
{% tab title="React/Next.js" %}
To trigger the console, ensure you are using JS SDK is updated to the latest version. You can call the console via a button click or a specific debug workflow in your app.
You can call the function directly from the `useNatively` hook.
```javascript
import { useNatively } from 'natively';
const MyComponent = () => {
const natively = useNatively();
return (
);
};
```
{% endtab %}
{% endtabs %}
**Preview & Test**
Once the feature is triggered in your app, the console will slide up over it, showing logs.
### Troubleshooting
If you trigger the Natively Debug Console feature and nothing happens, check these two common blockers:
#### 1. Environment Mismatch
The Debug Console is a native feature.
* It will not work in standard mobile browsers (Safari, Chrome), or wrappers created by other services.
* It will work in your own builds created with Natively.
#### 2. Missing JS SDK Integration
The `openConsole` command is a message sent from your website to the native app. If the Natively JS SDK isn't properly installed in your web app's header, the message is never sent.
* How to fix: Ensure you have added the Natively script tag to your site's `` or installed the `natively` package.
* Check: Open your web browser's inspector (on desktop) and type `window.natively`. If it returns `undefined`, the SDK is not integrated correctly. Please follow this guide to integrate the Natively JS SDK: [How to get started?](/guides/integration/how-to-get-started.md#javascript-sdk)
---
# 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.buildnatively.com/guides/integration/debug-console.md?ask=
```
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.