diff --git a/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/ApiError_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/ApiError_spec.ts
new file mode 100644
index 00000000000..76fbdc58829
--- /dev/null
+++ b/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/ApiError_spec.ts
@@ -0,0 +1,26 @@
+import * as _ from "../../../../support/Objects/ObjectsCore";
+import { PageType } from "../../../../support/Pages/DebuggerHelper";
+import EditorNavigation, {
+  EditorViewMode,
+} from "../../../../support/Pages/EditorNavigation";
+
+describe("Api Error Debugger", { tags: ["@tag.IDE"] }, () => {
+  before(() => {
+    // Create api that causes an error
+    _.apiPage.CreateAndFillApi("https://fakeapi/user");
+  });
+  it("it shows error message", () => {
+    _.apiPage.RunAPI(false);
+    _.debuggerHelper.AssertOpen(PageType.API);
+    _.apiPage.ResponseStatusCheck("PE-RST-5000");
+  });
+  it("it shows debug button and navigates", () => {
+    _.apiPage.DebugError();
+    _.debuggerHelper.AssertSelectedTab("Error");
+    _.debuggerHelper.AssertErrorCount(1);
+    EditorNavigation.SwitchScreenMode(EditorViewMode.SplitScreen);
+    _.apiPage.DebugError();
+    _.debuggerHelper.AssertSelectedTab("Error");
+    _.debuggerHelper.AssertErrorCount(1);
+  });
+});
diff --git a/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/EntityBottomBar_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/EntityBottomBar_spec.ts
index 9eabb6ac947..a581b361022 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/EntityBottomBar_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/EntityBottomBar_spec.ts
@@ -2,7 +2,7 @@ import * as _ from "../../../../support/Objects/ObjectsCore";
 import { PageType } from "../../../../support/Pages/DebuggerHelper";
 import EditorNavigation from "../../../../support/Pages/EditorNavigation";
 
-describe("Entity bottom bar", { tags: ["@tag.Debugger"] }, () => {
+describe("Entity bottom bar", { tags: ["@tag.IDE"] }, () => {
   it("1. Debugger should be closable", () => {
     //Verify if bottom bar is closed.
     _.debuggerHelper.AssertClosed();
diff --git a/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/Logs2_spec.js b/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/Logs2_spec.js
index 1c39aedda1f..84207474a4c 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/Logs2_spec.js
+++ b/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/Logs2_spec.js
@@ -14,7 +14,7 @@ const generateTestLogString = () => {
   return logString;
 };
 
-describe("Debugger logs", { tags: ["@tag.Debugger"] }, function () {
+describe("Debugger logs", { tags: ["@tag.IDE"] }, function () {
   this.beforeEach(() => {
     logString = generateTestLogString();
   });
diff --git a/app/client/cypress/support/Pages/ApiPage.ts b/app/client/cypress/support/Pages/ApiPage.ts
index 115d2a3f591..060e46ceca2 100644
--- a/app/client/cypress/support/Pages/ApiPage.ts
+++ b/app/client/cypress/support/Pages/ApiPage.ts
@@ -5,6 +5,7 @@ import {
   PageLeftPane,
   PagePaneSegment,
 } from "./EditorNavigation";
+import * as _ from "../Objects/ObjectsCore";
 
 type RightPaneTabs = "datasources" | "connections";
 
@@ -81,6 +82,7 @@ export class ApiPage {
   _saveAsDS = ".t--store-as-datasource";
   _responseStatus = ".t--response-status-code";
   public _responseTabHeader = "[data-testid=t--tab-headers]";
+  public _headersTabContent = ".t--headers-tab";
   public _autoGeneratedHeaderInfoIcon = (key: string) =>
     `.t--auto-generated-${key}-info`;
   _nextCursorValue = ".t--apiFormPaginationNextCursorValue";
@@ -458,4 +460,9 @@ export class ApiPage {
     this.agHelper.AssertElementVisibility(this._headerKey(index));
     this.agHelper.AssertElementVisibility(this._headerValue(index));
   }
+
+  DebugError() {
+    this.agHelper.GetNClick(this._responseTabHeader);
+    cy.get(this._headersTabContent).contains("Debug").click();
+  }
 }
diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx
index 0c3530f7762..1f9fbbc9472 100644
--- a/app/client/src/components/editorComponents/ApiResponseView.tsx
+++ b/app/client/src/components/editorComponents/ApiResponseView.tsx
@@ -51,6 +51,7 @@ import { getApiPaneDebuggerState } from "selectors/apiPaneSelectors";
 import { getIDEViewMode } from "selectors/ideSelectors";
 import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 import ApiResponseMeta from "./ApiResponseMeta";
+import useDebuggerTriggerClick from "./Debugger/hooks/useDebuggerTriggerClick";
 
 const ResponseContainer = styled.div`
   ${ResizerCSS};
@@ -257,14 +258,7 @@ function ApiResponseView(props: Props) {
 
   const ideViewMode = useSelector(getIDEViewMode);
 
-  const onDebugClick = useCallback(() => {
-    AnalyticsUtil.logEvent("OPEN_DEBUGGER", {
-      source: "API",
-    });
-    dispatch(
-      setApiPaneDebuggerState({ selectedTab: DEBUGGER_TAB_KEYS.ERROR_TAB }),
-    );
-  }, []);
+  const onDebugClick = useDebuggerTriggerClick();
 
   const onRunClick = () => {
     props.onRunClick();
@@ -491,7 +485,7 @@ function ApiResponseView(props: Props) {
                 {
                   children: "Debug",
                   endIcon: "bug",
-                  onClick: () => onDebugClick,
+                  onClick: onDebugClick,
                   to: "",
                 },
               ]}