diff --git a/web/pgadmin/tools/debugger/static/js/DebuggerModule.js b/web/pgadmin/tools/debugger/static/js/DebuggerModule.js
index 59f88ce3..3c2fe29d 100644
--- a/web/pgadmin/tools/debugger/static/js/DebuggerModule.js
+++ b/web/pgadmin/tools/debugger/static/js/DebuggerModule.js
@@ -219,7 +219,7 @@ export default class Debugger {
 
   // It will check weather the function is actually debuggable or not with pre-required condition.
   canDebug(itemData, item, data) {
-    var t = this.pgBrowser.tree,
+    let t = this.pgBrowser.tree,
       i = item,
       d = itemData;
     // To iterate over tree to check parent node
@@ -233,14 +233,14 @@ export default class Debugger {
     }
 
     // Find the function is really available in database
-    var tree = this.pgBrowser.tree,
+    let tree = this.pgBrowser.tree,
       info = tree.selected(),
       d_ = info ? tree.itemData(info) : undefined;
 
     if (!d_)
       return false;
 
-    var treeInfo = tree.getTreeNodeHierarchy(info);
+    let treeInfo = tree.getTreeNodeHierarchy(info);
 
     // For indirect debugging user must be super user
     if (data && data.debug_type && data.debug_type == 'indirect' &&
@@ -248,7 +248,7 @@ export default class Debugger {
       return false;
 
     // Fetch object owner
-    var obj_owner = treeInfo.function && treeInfo.function.funcowner ||
+    let obj_owner = treeInfo.function && treeInfo.function.funcowner ||
       treeInfo.procedure && treeInfo.procedure.funcowner ||
       treeInfo.edbfunc && treeInfo.edbfunc.funcowner ||
       treeInfo.edbproc && treeInfo.edbproc.funcowner;
@@ -343,16 +343,22 @@ export default class Debugger {
     }
     return db_label;
   }
+  
+  getTreeNodeData(item) {
+    let t = this.pgBrowser.tree,
+      i = item || t.selected(),
+      d = i ? t.itemData(i) : undefined,
+      node = d && this.pgBrowser.Nodes[d._type];
+
+    return [t,i,d,node];
+  }
   /*
       Get the function information for the direct debugging to display the functions arguments and  other informations
       in the user input dialog
     */
   getFunctionInformation(args, item) {
-    var self = this,
-      t = this.pgBrowser.tree,
-      i = item || t.selected(),
-      d = i ? t.itemData(i) : undefined,
-      node = d && this.pgBrowser.Nodes[d._type],
+    let [t,i,d, node] = this.getTreeNodeData(item);
+    let self = this,
       tree_data = this.pgBrowser.tree.translateTreeNodeIdFromReactTree(i),
       db_data = this.pgBrowser.tree.findNode(tree_data[3]),
       dbNode = db_data.domNode;
@@ -360,9 +366,9 @@ export default class Debugger {
     if (!d)
       return;
 
-    var is_edb_proc = d._type == 'edbproc';
+    let is_edb_proc = d._type == 'edbproc';
 
-    var treeInfo = t.getTreeNodeHierarchy(i),
+    let treeInfo = t.getTreeNodeHierarchy(i),
       _url = this.generate_url('init', treeInfo, node);
 
     this.api({
@@ -378,13 +384,13 @@ export default class Debugger {
         /* Initialize the target and create asynchronous connection and unique transaction ID
         If there is no arguments to the functions then we should not ask for for function arguments and
         Directly open the panel */
-        var _t = this.pgBrowser.tree,
+        let _t = this.pgBrowser.tree,
           _i = _t.selected(),
           _d = _i ? _t.itemData(_i) : undefined;
 
-        var newTreeInfo = _t.getTreeNodeHierarchy(_i);
+        let newTreeInfo = _t.getTreeNodeHierarchy(_i);
 
-        var baseUrl = self.getUrl(_d, newTreeInfo, trans_id);
+        let baseUrl = self.getUrl(_d, newTreeInfo, trans_id);
 
         self.api({
           url: baseUrl,
@@ -392,14 +398,14 @@ export default class Debugger {
         })
           .then(function (result) {
 
-            var data = result.data.data;
+            let data = result.data.data;
 
-            var url = url_for('debugger.direct', {
+            let url = url_for('debugger.direct', {
               'trans_id': trans_id,
             });
 
-            var browser_preferences = self.pgBrowser.get_preferences_for_module('browser');
-            var open_new_tab = browser_preferences.new_browser_tab_open;
+            let browser_preferences = self.pgBrowser.get_preferences_for_module('browser');
+            let open_new_tab = browser_preferences.new_browser_tab_open;
             if (open_new_tab && open_new_tab.includes('debugger')) {
               window.open(url, '_blank');
               // Send the signal to runtime, so that proper zoom level will be set.
@@ -414,7 +420,7 @@ export default class Debugger {
                 });
 
               // Create the debugger panel as per the data received from user input dialog.
-              var dashboardPanel = self.pgBrowser.docker.findPanels(
+              let dashboardPanel = self.pgBrowser.docker.findPanels(
                   'properties'
                 ),
                 panel = self.pgBrowser.docker.addPanel(
@@ -428,13 +434,13 @@ export default class Debugger {
 
               db_label = self.checkDbNameChange(data, dbNode, newTreeInfo, db_label);
 
-              var label = getAppropriateLabel(newTreeInfo);
+              let label = getAppropriateLabel(newTreeInfo);
               setDebuggerTitle(panel, browser_preferences, label, newTreeInfo.schema.label, db_label, null, self.pgBrowser);
 
               panel.focus();
               // Register Panel Closed event
               panel.on(self.wcDocker.EVENT.CLOSED, function () {
-                var closeUrl = url_for('debugger.close', {
+                let closeUrl = url_for('debugger.close', {
                   'trans_id': trans_id,
                 });
                 self.api({
@@ -462,16 +468,13 @@ export default class Debugger {
   }
 
   checkFuncDebuggable(args, item) {
-    var self = this,
-      t = this.pgBrowser.tree,
-      i = item || t.selected(),
-      d = i ? t.itemData(i) : undefined,
-      node = d && this.pgBrowser.Nodes[d._type];
+    let [t,i,d, node] = this.getTreeNodeData(item);
+    let self = this;
 
     if (!d)
       return;
 
-    var treeInfo = t.getTreeNodeHierarchy(i),
+    let treeInfo = t.getTreeNodeHierarchy(i),
       _url = this.generate_url('init', treeInfo, node);
 
     self.api({
diff --git a/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx b/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx
index 19fe4750..fa0f7676 100644
--- a/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx
+++ b/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx
@@ -243,6 +243,17 @@ export default function DebuggerArgumentComponent({ debuggerInfo, restartDebug,
     return myObj;
   }
 
+  function getFormattedArgsValues(argType, index, argData) {
+    let values = [];
+    if (argType[index].indexOf('[]') != -1 && argData['value'].length > 0) {
+      values = `{${argData['value']}}`;
+    } else {
+      values = argData['value'];
+    }
+
+    return values;
+  }
+
   function setFuncObj(funcArgsData, argMode, argType, argName, defValList, isUnnamedParam = false) {
     let index, values, funcObj = [];
     for (const argData of funcArgsData) {
@@ -251,13 +262,8 @@ export default function DebuggerArgumentComponent({ debuggerInfo, restartDebug,
         (argMode && argMode[index] == 'o' && !isEdbProc) && !isUnnamedParam) {
         continue;
       }
-
-      values = [];
-      if (argType[index].indexOf('[]') != -1 && argData['value'].length > 0) {
-        values = `{${argData['value']}}`;
-      } else {
-        values = argData['value'];
-      }
+      // Get formated values for argument.
+      values = getFormattedArgsValues(argType, index, argData);
 
       funcObj.push({
         'name': argName[index],
diff --git a/web/pgadmin/tools/debugger/static/js/components/DebuggerComponent.jsx b/web/pgadmin/tools/debugger/static/js/components/DebuggerComponent.jsx
index c473ffdf..826609ec 100644
--- a/web/pgadmin/tools/debugger/static/js/components/DebuggerComponent.jsx
+++ b/web/pgadmin/tools/debugger/static/js/components/DebuggerComponent.jsx
@@ -61,7 +61,7 @@ export default function DebuggerComponent({ pgAdmin, selectedNodeInfo, panel, ev
 
   const disableToolbarButtons = () => {
     eventBus.current.fireEvent(DEBUGGER_EVENTS.DISABLE_MENU);
-    eventBus.current.fireEvent(DEBUGGER_EVENTS.GET_TOOL_BAR_BUTTON_STATUS, {disabled: true});
+    eventBus.current.fireEvent(DEBUGGER_EVENTS.GET_TOOL_BAR_BUTTON_STATUS, { disabled: true });
   };
 
   const enableToolbarButtons = (key = null) => {
@@ -71,7 +71,7 @@ export default function DebuggerComponent({ pgAdmin, selectedNodeInfo, panel, ev
       eventBus.current.fireEvent(DEBUGGER_EVENTS.ENABLE_MENU);
     }
 
-    eventBus.current.fireEvent(DEBUGGER_EVENTS.GET_TOOL_BAR_BUTTON_STATUS, {disabled: false});
+    eventBus.current.fireEvent(DEBUGGER_EVENTS.GET_TOOL_BAR_BUTTON_STATUS, { disabled: false });
   };
 
   const reflectPreferences = useCallback(() => {
@@ -149,7 +149,7 @@ export default function DebuggerComponent({ pgAdmin, selectedNodeInfo, panel, ev
       var err = xhr.response.data;
       if (err.success == 0) {
         Notify.alert(gettext('Debugger Error'), err.errormsg, () => {
-          if(panel) {
+          if (panel) {
             panel.close();
           }
 
@@ -265,7 +265,7 @@ export default function DebuggerComponent({ pgAdmin, selectedNodeInfo, panel, ev
           // set the return code to the code editor text area
           if (
             res.data.data.result[0].src != null &&
-                        res.data.data.result[0].linenumber != null
+            res.data.data.result[0].linenumber != null
           ) {
             editor.current.setValue(res.data.data.result[0].src);
 
@@ -592,28 +592,33 @@ export default function DebuggerComponent({ pgAdmin, selectedNodeInfo, panel, ev
             }, { isFullScreen: false, isResizeable: true, showFullScreen: true, isFullWidth: true, dialogWidth: pgAdmin.Browser.stdW.md, dialogHeight: pgAdmin.Browser.stdH.md });
           }
         } else {
-          // Debugging of void function is started again so we need to start
-          // the listener again
-          var base_url = url_for('debugger.start_listener', {
-            'trans_id': params.transId,
-          });
-
-          api({
-            url: base_url,
-            method: 'GET',
-          })
-            .then(function () {
-              if (params.directDebugger.debug_type) {
-                pollEndExecutionResult(params.transId);
-              }
-            })
-            .catch(raisePollingError);
+          // This will start lister for void de
+          restartDebuggerListener();
         }
       })
       .catch(raiseJSONError);
   };
 
-  const pollEndExecuteError = (res ) => {
+  function restartDebuggerListener() {
+    // Debugging of void function is started again so we need to start
+    // the listener again
+    let base_url = url_for('debugger.start_listener', {
+      'trans_id': params.transId,
+    });
+
+    api({
+      url: base_url,
+      method: 'GET',
+    })
+      .then(function () {
+        if (params.directDebugger.debug_type) {
+          pollEndExecutionResult(params.transId);
+        }
+      })
+      .catch(raisePollingError);
+  }
+
+  const pollEndExecuteError = (res) => {
     params.directDebugger.direct_execution_completed = true;
     setActiveLine(-1);
 
@@ -755,7 +760,7 @@ export default function DebuggerComponent({ pgAdmin, selectedNodeInfo, panel, ev
 
   // This function will update messages tab
   const updateMessages = (msg) => {
-    if(msg) {
+    if (msg) {
       // Call function to update messages information
       eventBus.current.fireEvent(DEBUGGER_EVENTS.SET_MESSAGES, msg, true);
     }
@@ -766,7 +771,7 @@ export default function DebuggerComponent({ pgAdmin, selectedNodeInfo, panel, ev
 
     //Check first if previous execution was completed or not
     if (params.directDebugger.direct_execution_completed &&
-            params.directDebugger.direct_execution_completed == params.directDebugger.polling_timeout_idle) {
+      params.directDebugger.direct_execution_completed == params.directDebugger.polling_timeout_idle) {
       restart(params.transId);
     } else {
       // Make ajax call to listen the database message
diff --git a/web/pgadmin/tools/debugger/static/js/components/LocalVariablesAndParams.jsx b/web/pgadmin/tools/debugger/static/js/components/LocalVariablesAndParams.jsx
index 6d774692..951e4347 100644
--- a/web/pgadmin/tools/debugger/static/js/components/LocalVariablesAndParams.jsx
+++ b/web/pgadmin/tools/debugger/static/js/components/LocalVariablesAndParams.jsx
@@ -90,6 +90,19 @@ export function LocalVariablesAndParams({ type }) {
     });
   };
 
+  const handelBlurEvent = (row) => {
+    let data = [{
+      name: row.name,
+      value: row.value,
+      type: row.type
+    }];
+    if (preValue.current[row.name] != row.value && !disableVarChange) {
+      preValue.current[row.name] = row.value;
+      changeLocalVarVal(data);
+    }
+
+  };
+
   return (
     <Paper variant="outlined" elevation={0} className={classes.summaryContainer}>
       <TableContainer className={classes.container}>
@@ -120,20 +133,9 @@ export function LocalVariablesAndParams({ type }) {
                       onFocus={() => {
                         preValue.current[row.name] = row.value;
                       }}
-                      onBlur={() => {
-                        let data = [{
-                          name: row.name,
-                          value: row.value,
-                          type: row.type
-                        }];
-                        if (preValue.current[row.name] != row.value && !disableVarChange) {
-                          preValue.current[row.name] = row.value;
-                          changeLocalVarVal(data);
-                        }
-
-                      }}
+                      onBlur={()=> {handelBlurEvent(row);}}
                     ></InputDateTimePicker>
-                    : 
+                    :
 
                     <InputText value={row.value} type={row.dtype}
                       disabled={disableVarChange}
@@ -143,26 +145,15 @@ export function LocalVariablesAndParams({ type }) {
                       onFocus={() => {
                         preValue.current[row.name] = row.value;
                       }}
-                      onBlur={() => {
-                        let data = [{
-                          name: row.name,
-                          value: row.value,
-                          type: row.type
-                        }];
-                        if (preValue.current[row.name] != row.value && !disableVarChange) {
-                          preValue.current[row.name] = row.value;
-                          changeLocalVarVal(data);
-                        }
-
-                      }}
+                      onBlur={()=> {handelBlurEvent(row);}}
                     ></InputText>}</td>
               </tr>
             ))}
             {
               variablesData.length == 0 &&
-                            <tr key={_.uniqueId('c')} className={classes.cell}>
-                              <td colSpan={3} >{gettext('No data found')}</td>
-                            </tr>
+              <tr key={_.uniqueId('c')} className={classes.cell}>
+                <td colSpan={3} >{gettext('No data found')}</td>
+              </tr>
             }
 
           </tbody>
