diff --git a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
index 3da8ffcd09..ed3f79391e 100644
--- a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
+++ b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
@@ -5,6 +5,7 @@ import {
   useDeleteAllInspectorVars,
   useDeleteInspectVar,
   useDeleteNodeInspectorVars,
+  useEditInspectorVar,
   useInvalidateConversationVarValues,
   useInvalidateSysVarValues,
   useSysVarValues,
@@ -16,7 +17,7 @@ const useInspectVarsCrud = () => {
     appId,
     nodesWithInspectVars,
     getInspectVar,
-    setInspectVar,
+    setInspectVarValue,
     deleteAllInspectVars: deleteAllInspectVarsInStore,
     deleteNodeInspectVars: deleteNodeInspectVarsInStore,
     deleteInspectVar: deleteInspectVarInStore,
@@ -32,6 +33,8 @@ const useInspectVarsCrud = () => {
   const { mutate: doDeleteNodeInspectorVars } = useDeleteNodeInspectorVars(appId)
   const { mutate: doDeleteInspectVar } = useDeleteInspectVar(appId)
 
+  const { mutate: doEditInspectorVar } = useEditInspectorVar(appId)
+
   const fetchInspectVarValue = (selector: ValueSelector) => {
     const nodeId = selector[0]
     const isSystemVar = selector[1] === 'sys'
@@ -40,21 +43,6 @@ const useInspectVarsCrud = () => {
     // fetch values under nodeId. system var and conversation var has different fetch method
   }
 
-  const editInspectVarValue = (varId: string, value: any) => {
-    console.log('edit var', varId, value)
-
-    // call api and update store
-  }
-
-  const editInspectVarSelector = (varId: string, selector: ValueSelector) => {
-    console.log('edit var selector', varId, selector)
-    // call api and update store
-  }
-
-  const editInspectVarValueType = (varId: string, valueType: VarType) => {
-    console.log('edit var value type', varId, valueType)
-  }
-
   const deleteInspectVar = async (nodeId: string, varId: string) => {
     await doDeleteInspectVar(varId)
     deleteInspectVarInStore(nodeId, varId)
@@ -72,6 +60,24 @@ const useInspectVarsCrud = () => {
     deleteAllInspectVarsInStore()
   }
 
+  const editInspectVarValue = async (nodeId: string, varId: string, value: any) => {
+    await doEditInspectorVar({
+      nodeId,
+      varId,
+      value,
+    })
+    setInspectVarValue(nodeId, varId, value)
+  }
+
+  const editInspectVarSelector = (varId: string, selector: ValueSelector) => {
+    console.log('edit var selector', varId, selector)
+    // call api and update store
+  }
+
+  const editInspectVarValueType = (varId: string, valueType: VarType) => {
+    console.log('edit var value type', varId, valueType)
+  }
+
   const isInspectVarEdited = (nodeId: string, key: string) => {
     return getInspectVar(nodeId, key) !== getLastRunVar(nodeId, key)
   }
@@ -79,7 +85,7 @@ const useInspectVarsCrud = () => {
   const resetToLastRunVar = (nodeId: string, key: string) => {
     const lastRunVar = getLastRunVar(nodeId, key)
     if (lastRunVar)
-      setInspectVar(nodeId, key, lastRunVar)
+      setInspectVarValue(nodeId, key, lastRunVar)
   }
 
   console.log(conversationVars, systemVars)
diff --git a/web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts b/web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts
index 0e5768681a..28ad70554b 100644
--- a/web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts
+++ b/web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts
@@ -17,7 +17,7 @@ type InspectVarsActions = {
   deleteNodeInspectVars: (nodeId: string) => void
   getNodeInspectVars: (nodeId: string) => NodeWithVar | undefined
   hasNodeInspectVars: (nodeId: string) => boolean
-  setInspectVar: (nodeId: string, name: string, value: any) => void
+  setInspectVarValue: (nodeId: string, name: string, value: any) => void
   deleteInspectVar: (nodeId: string, varId: string) => void
   getInspectVar: (nodeId: string, name: string) => any // The big value is null
 }
@@ -77,13 +77,13 @@ export const createInspectVarsSlice: StateCreator<InspectVarsSliceShape> = (set,
     hasNodeInspectVars: (nodeId) => {
       return !!get().getNodeInspectVars(nodeId)
     },
-    setInspectVar: (nodeId, name, value) => {
+    setInspectVarValue: (nodeId, varId, value) => {
       set(produce((state: InspectVarsSliceShape) => {
         const nodes = state.nodesWithInspectVars.map((node) => {
           if (node.nodeId === nodeId) {
             return produce(node, (draft) => {
               const needChangeVarIndex = draft.vars.findIndex((varItem) => {
-                return varItem.selector[1] === name
+                return varItem.id === varId
               })
               if (needChangeVarIndex !== -1)
                 draft.vars[needChangeVarIndex].value = value
diff --git a/web/service/use-workflow.ts b/web/service/use-workflow.ts
index ed9c809813..38187e6087 100644
--- a/web/service/use-workflow.ts
+++ b/web/service/use-workflow.ts
@@ -195,3 +195,18 @@ export const useDeleteInspectVar = (appId: string) => {
     },
   })
 }
+
+// edit the name or value of the inspector var
+export const useEditInspectorVar = (appId: string) => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'edit inspector var', appId],
+    mutationFn: async (params: {
+      nodeId: string
+      varId: string
+      name?: string
+      value?: any
+    }) => {
+      console.log('edit inspector var', params)
+    },
+  })
+}