diff --git a/src/dashboard-front/src/views/online-debug/components/response-content.vue b/src/dashboard-front/src/views/online-debug/components/response-content.vue
index bd55bdeae..ad04da1c6 100644
--- a/src/dashboard-front/src/views/online-debug/components/response-content.vue
+++ b/src/dashboard-front/src/views/online-debug/components/response-content.vue
@@ -18,6 +18,7 @@
                 @click="stopPropa">
                 <bk-tab-panel label="Body" name="body"></bk-tab-panel>
                 <bk-tab-panel :label="t('请求详情')" name="detail"></bk-tab-panel>
+                <bk-tab-panel label="Headers" name="headers"></bk-tab-panel>
               </bk-tab>
             </div>
             <div class="response-status flex" @click="stopPropa" v-show="activeIndex?.includes(1)">
@@ -38,78 +39,92 @@
         </template>
         <template #content>
           <div class="response-main">
-            <div class="response-content-type flex" v-show="tabActive === 'body'">
-              <div class="payload-type">
-                <div
-                  :class="['payload-type-item', bodyType === 'pretty' ? 'active' : '']"
-                  @click="handleBodyTypeChange('pretty')"
-                >
-                  <span class="icon apigateway-icon icon-ag-cardd"></span>
-                  Pretty
+            <template v-if="tabActive !== 'headers'">
+              <div class="response-content-type flex" v-show="tabActive === 'body'">
+                <div class="payload-type">
+                  <div
+                    :class="['payload-type-item', bodyType === 'pretty' ? 'active' : '']"
+                    @click="handleBodyTypeChange('pretty')"
+                  >
+                    <span class="icon apigateway-icon icon-ag-cardd"></span>
+                    Pretty
+                  </div>
+                  <div
+                    :class="['payload-type-item', bodyType === 'raw' ? 'active' : '']"
+                    @click="handleBodyTypeChange('raw')"
+                  >
+                    <span class="icon apigateway-icon icon-ag-shitu-liebiao"></span>
+                    Raw
+                  </div>
                 </div>
-                <div
-                  :class="['payload-type-item', bodyType === 'raw' ? 'active' : '']"
-                  @click="handleBodyTypeChange('raw')"
+                <bk-select
+                  class="bk-select"
+                  v-model="responseType"
+                  :clearable="false"
+                  :filterable="false"
+                  :disabled="true"
+                  v-bk-tooltips="t('暂不支持切换')"
                 >
-                  <span class="icon apigateway-icon icon-ag-shitu-liebiao"></span>
-                  Raw
-                </div>
+                  <bk-option
+                    v-for="(item, index) in bodyTypeList"
+                    :id="item.value"
+                    :key="index"
+                    :name="item.label"
+                  />
+                </bk-select>
               </div>
-              <bk-select
-                class="bk-select"
-                v-model="responseType"
-                :clearable="false"
-                :filterable="false"
-                :disabled="true"
-                v-bk-tooltips="t('暂不支持切换')"
-              >
-                <bk-option
-                  v-for="(item, index) in bodyTypeList"
-                  :id="item.value"
-                  :key="index"
-                  :name="item.label"
-                />
-              </bk-select>
-            </div>
-            <div class="response-content-type flex" v-show="tabActive === 'detail'">
-              <div class="payload-type">
-                <div class="payload-type-item active">
-                  <span class="icon apigateway-icon icon-ag-shell"></span>
-                  Shell
-                </div>
-                <div class="payload-type-item">
+              <div class="response-content-type flex" v-show="tabActive === 'detail'">
+                <div class="payload-type">
+                  <div class="payload-type-item active">
+                    <span class="icon apigateway-icon icon-ag-shell"></span>
+                    Shell
+                  </div>
+                <!-- <div class="payload-type-item">
                   <span class="icon apigateway-icon icon-ag-python"></span>
                   Python
+                </div> -->
                 </div>
+                <bk-select
+                  class="bk-select"
+                  v-model="detailsType"
+                  :clearable="false"
+                  :filterable="false"
+                  :disabled="true"
+                  v-bk-tooltips="t('暂不支持切换')"
+                >
+                  <bk-option
+                    v-for="(item, index) in detailsTypeList"
+                    :id="item.value"
+                    :key="index"
+                    :name="item.label"
+                  />
+                </bk-select>
               </div>
-              <bk-select
-                class="bk-select"
-                v-model="detailsType"
-                :clearable="false"
-                :filterable="false"
-                :disabled="true"
-                v-bk-tooltips="t('暂不支持切换')"
-              >
-                <bk-option
-                  v-for="(item, index) in detailsTypeList"
-                  :id="item.value"
-                  :key="index"
-                  :name="item.label"
+              <div class="response-content">
+                <editor-monaco
+                  v-model="editorText"
+                  theme="Visual Studio"
+                  ref="resourceEditorRef"
+                  language="json"
+                  :minimap="false"
+                  :show-copy="true"
+                  :show-full-screen="true"
+                  :read-only="true"
                 />
-              </bk-select>
-            </div>
-            <div class="response-content">
-              <editor-monaco
-                v-model="editorText"
-                theme="Visual Studio"
-                ref="resourceEditorRef"
-                language="json"
-                :minimap="false"
-                :show-copy="true"
-                :show-full-screen="true"
-                :read-only="true"
-              />
-            </div>
+              </div>
+            </template>
+            <template v-else>
+              <bk-table
+                class="table-layout"
+                ref="bkTableRef"
+                :data="tableData"
+                show-overflow-tooltip
+                row-hover="auto"
+                :border="['outer', 'col']">
+                <bk-table-column :label="t('名称')" prop="name"></bk-table-column>
+                <bk-table-column :label="t('值')" prop="value"></bk-table-column>
+              </bk-table>
+            </template>
           </div>
         </template>
       </bk-collapse-panel>
@@ -134,9 +149,15 @@ const props = defineProps({
 
 const emit = defineEmits(['response-fold']);
 
+type TableDataItem = {
+  name: String;
+  value: String;
+};
+
 const activeIndex = ref<number[]>([]);
 const tabActive = ref<string>('body');
 const responseType = ref<string>('JSON');
+const tableData = ref<TableDataItem[]>([]);
 const bodyTypeList = ref([
   {
     value: 'JSON',
@@ -207,10 +228,29 @@ const setEditorValue = () => {
   activeIndex.value = [1];
 };
 
+const setTableData = () => {
+  const { headers } = data.value;
+  if (headers && JSON.stringify(headers) !== '{}') {
+    const list: TableDataItem[] = [];
+    Object.keys(headers).forEach((key: string) => {
+      list.push({
+        name: key,
+        value: headers[key],
+      });
+    });
+
+    tableData.value = list;
+  } else {
+    tableData.value = [];
+  }
+};
+
 watch(
   () => tabActive.value,
-  () => {
-    setEditorValue();
+  (v) => {
+    if (v !== 'headers') {
+      setEditorValue();
+    }
   },
 );
 
@@ -220,6 +260,7 @@ watch(
     data.value = v || {};
     tabActive.value = 'body';
     setEditorValue();
+    setTableData();
   },
 );