# Live Debugging

## Introduction

The Live Debugging feature in Ingest Labs displays all the tags that are triggered in real-time on a particular page. You can perform live debugging for both the server-side tags and browser-side tags. The event data is populated in the live debugging section.

## **Procedure**

There are two environments present:

* **Production** – When elements are pushed to the production environment, you can check the live details in the production environment. 
* **Staging** – When elements are pushed to the staging environment, you can check the live details in the staging environment.

<figure><img src="/files/9mOTpcgHLMVkCtSnrd9y" alt=""><figcaption></figcaption></figure>

**Step 1:** Select **Production** from the drop-down.

**Note**: When elements are pushed to the staging environment, you can check the live details in the staging environment.

<figure><img src="/files/bT9nttmqxLYJu9UaDoYn" alt=""><figcaption></figcaption></figure>

**Step 2:** Click the **Start Debugging** button.

<figure><img src="/files/kNflGKFZUgfk9Mau2EX6" alt=""><figcaption></figcaption></figure>

**Step 3:** The **Start Live Debugging** popup window opens. Without entering a Debug ID, click **Start**.

<figure><img src="/files/zDUapBMiKEnLyDK1qnaE" alt=""><figcaption></figcaption></figure>

**Step 4:** The ***Live mode*** option is displayed with a red dot indicator. You can view all the events firing in real-time traffic on the website.

<figure><img src="/files/JD0GBrIGQPnPvjJMgIh2" alt=""><figcaption></figcaption></figure>

**Step 4.1**: To stop debugging, click the ***Live mode*** drop-down and select **Stop Debugging.**

<figure><img src="/files/ubkEVH8ekDoyg2kerIKJ" alt=""><figcaption></figcaption></figure>

**Step 4.2:** To clear the debugging session, click the ***Live mode*** drop-down and select **Clear**.

<figure><img src="/files/PAZ34SkmIa79iz41m0Bt" alt=""><figcaption></figcaption></figure>

**Step 5:** Click on **View request** of any SS tag to view API call request/response body.

![](https://ingest-lab.netlify.app/images/livedebuggingimages/viewrequest.png)

**Step 5.1:** The ***Tag Request Details*** popup window opens. You can view the following tag details:

* **Tag URL** – displays the tag URL.
* **Tag URL Query Parameters Assignment** – displays the query parameters associated with the tag.

<figure><img src="/files/Ts2UkeOhYURkDVLxRyp6" alt=""><figcaption></figcaption></figure>

**Step 5.2:** Click **Data Elements** to view the data element details.

<figure><img src="/files/6EqsvN1qL8NUb6UEuMgH" alt=""><figcaption></figcaption></figure>

**Step 5.3:** Click **Request Body** to view the details of the request body.

![](https://ingest-lab.netlify.app/images/livedebuggingimages/requestbody.png)

**Step 5.4:** Click **Response Body** to view the details of the response body.

![](https://ingest-lab.netlify.app/images/livedebuggingimages/responsebody.png)

The following are the additional fields that appear on the *Live Debugging* screen.

| Field Name     | Description                                                                           |
| -------------- | ------------------------------------------------------------------------------------- |
| **Event Time** | Displays the event time-stamp.                                                        |
| **Page Name**  | The page from which the tag is triggered.                                             |
| **Provider**   | Displays the Provider details.                                                        |
| **Tag**        | Displays the Tag details.                                                             |
| **Platform**   | Displays the Platform from which the page is accessed.                                |
| **Domain**     | Shows the domain from which the tag is triggered.                                     |
| **Status**     | Displays the tag status, indicating whether the tag is successfully triggered or not. |

**Note 1:** You can perform the Live Debugging in two ways, either through the console or through a Live Debugging session on Ingest Labs.

**Note 2:** Use the pagination control at the bottom of the page to navigate through multiple pages. The current page is highlighted in blue.

<figure><img src="/files/z18ykFY8kXMpRXLPkziU" alt=""><figcaption></figcaption></figure>

**Step 6**: Click **Add Filter**. The *Add Filter* panel opens on the right side

<figure><img src="/files/5rSdfIaaMgIChEKaveDh" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/rroAtMYqtHjMoN3ZWvtr" alt=""><figcaption></figcaption></figure>

**Step 6.1:** Under **Field,** click ***Select Field*** drop-down and choose the required field.

<figure><img src="/files/iIRwOFWxbgvT5MltHX3z" alt=""><figcaption></figcaption></figure>

**Step 6.2:** Under **Operator**, click the *Select an Operator* drop-down. You will see two options:

* is one of
* is not one of

<figure><img src="/files/T0lyKfPoSKGxYnfw4r7X" alt=""><figcaption></figcaption></figure>

**Step 6.3:** After selecting an operator, a list opens. Select one or multiple values as needed.

<figure><img src="/files/A9zuqVPY1TkHVkaOIHPy" alt=""><figcaption></figcaption></figure>

**Step 6.4:** Click **Add Filter** to apply the filter.

<figure><img src="/files/TiA5uAusMsrZEwmTyMLo" alt=""><figcaption></figcaption></figure>

**Note:** Click **Cancel** to close the panel without saving any changes.

<figure><img src="/files/h2Vzo6TMuhEbatL6JFII" alt=""><figcaption></figcaption></figure>

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaDMDmegqZUJFhJhF4JQG%2Fuploads%2F6hVWUozkQ62ZLbckvN3w%2FLive%20Debugging.mp4?alt=media&token=c6f103d2-ee8f-4857-9d45-2720780ee1b3>" %}

## Related Topics <a href="#relatedtopics" id="relatedtopics"></a>

The Live Debugging section includes the following topics:

* [Retrieve the Debug ID Using Console](/tag-manager/live-debugging/retrieve-the-debug-id-using-console.md)
* [Use IngestLabs Debugging session](/tag-manager/live-debugging/view-requests-from-a-live-debugging-session.md)
* [Filter the Events During Live Debugging](/tag-manager/live-debugging/filter-the-events-during-live-debugging.md)


---

# 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.ingestlabs.com/tag-manager/live-debugging.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.