diff --git a/resources/assets/js/api/Api.js b/resources/assets/js/api/Api.js
index d8024421a..1d3430769 100644
--- a/resources/assets/js/api/Api.js
+++ b/resources/assets/js/api/Api.js
@@ -68,7 +68,8 @@ const services = {
     SEARCH: "/home/search",
     PROCESSES: "/home/processes",
     USERS: "/home/users",
-    TASKS: "/home/tasks"
+    TASKS: "/home/tasks",
+    DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}"
 };
 
 export default {
diff --git a/resources/assets/js/api/Cases.js b/resources/assets/js/api/Cases.js
index 31cca7eaa..54b789ebd 100644
--- a/resources/assets/js/api/Cases.js
+++ b/resources/assets/js/api/Cases.js
@@ -84,10 +84,10 @@ export let cases = {
         return axios.post(window.config.SYS_SERVER +
             window.config.SYS_URI +
             `appProxy/getSummary`, params, {
-                headers: {
-                    'Cache-Control': 'no-cache'
-                }
-            });
+            headers: {
+                'Cache-Control': 'no-cache'
+            }
+        });
     },
     casenotes(data) {
         var params = new FormData();
@@ -186,8 +186,49 @@ export let cases = {
             keys: {},
             paged: dt.paged
         })
-    }
-
+    },
+    /**
+     * Make a search request to the Api service 
+     * @param {object} dt - filter parameters
+     */
+    debugStatus(dt) {
+        return Api.get({
+            service: "DEBUG_STATUS",
+            params: {},
+            keys: {
+                prj_uid: dt.PRO_UID
+            }
+        })
+    },
+    /**
+     * Get debug Vars in ajax service
+     * @param {*} data 
+     */
+    debugVars(data) {
+        var params;
+        if (data.filter === "all") {
+            return axios.get(window.config.SYS_SERVER +
+                window.config.SYS_URI +
+                `cases/debug_vars`);
+        } else {
+            params = new URLSearchParams();
+            params.append('filter', data.filter);
+            return axios.post(window.config.SYS_SERVER +
+                window.config.SYS_URI +
+                `cases/debug_vars`, params);
+        }
+    },
+    /**
+     * Get triggers debug Vars in ajax service
+     * @param {*} data 
+     */
+    debugVarsTriggers(data) {
+        let dc = _.random(0, 10000000000),
+            r = _.random(1.0, 100.0);
+        return axios.get(window.config.SYS_SERVER +
+            window.config.SYS_URI +
+            `cases/debug_triggers?r=${r}&_dc=${dc}`);
+    },
 };
 
 export let casesHeader = {
diff --git a/resources/assets/js/components/home/debugger/Debugger.vue b/resources/assets/js/components/home/debugger/Debugger.vue
new file mode 100644
index 000000000..4a641892a
--- /dev/null
+++ b/resources/assets/js/components/home/debugger/Debugger.vue
@@ -0,0 +1,300 @@
+<template>
+  <div class="debugger-container">
+    <tabs>
+      <tab name="Variables">
+        <div
+          class="btn-toolbar justify-content-between"
+          role="toolbar"
+          aria-label="Toolbar with button groups"
+        >
+          <b-form-radio-group
+            @change="changeOption"
+            v-model="optionsDebugVars.selected"
+            :options="optionsDebugVars.options"
+            button-variant="outline-secondary"
+            name="radio-btn-outline"
+            size="sm"
+            buttons
+          ></b-form-radio-group>
+        </div>
+        <div style="padding-top: 10px">
+          <v-client-table
+            :data="dataTable"
+            :columns="columns"
+            :options="options"
+            ref="vueTable"
+          />
+        </div>
+      </tab>
+      <tab name="Triggers">
+        <div>
+          <v-client-table
+            :data="dataTableTriggers"
+            :columns="columns"
+            :options="options"
+            ref="vueTableTriggers"
+          />
+        </div>
+      </tab>
+    </tabs>
+  </div>
+</template>
+
+<script>
+import Tabs from "../../../components/tabs/Tabs.vue";
+import Tab from "../../../components/tabs/Tab.vue";
+import api from "../../../api/index";
+export default {
+  name: "ButtonFleft",
+  props: {
+    data: Object
+  },
+  components: {
+    Tabs,
+    Tab,
+  },
+  data() {
+    return {
+      debugFullPage: false,
+      debugTabs: [],
+      activetab: 1,
+      variableTabs: [],
+      debugSearch: "",
+      isRTL: false,
+      dataTable: [],
+      dataTableTriggers: [],
+      columns: ["key", "value"],
+      options: {
+        perPage: 200,
+        filterable: true,
+        pagination: {
+          show: false
+        },
+        headings: {
+          key: this.$i18n.t("ID_NAME"),
+          value: this.$i18n.t("ID_FIELD_DYNAFORM_TEXT")
+        },
+      },
+      optionsDebugVars: {
+        selected: "all",
+        options: [
+          { text: this.$i18n.t("ID_OPT_ALL"), value: "all" },
+          { text: this.$i18n.t("ID_DYNAFORM"), value: "dyn" },
+          { text: this.$i18n.t("ID_SYSTEM"), value: "sys" }
+        ]
+      }
+    };
+  },
+  mounted() {
+    this.getDebugVars({ filter: "all" });
+    this.getDebugVarsTriggers();
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn v-btn-request " + cls;
+    },
+    showDebugger() {
+      this.$refs["modal-debugger"].show();
+    },
+    /**
+     * Get debug variables
+     */
+    getDebugVars(data) {
+      let that = this,
+        dt = [];
+      api.cases.debugVars(data).then((response) => {
+        _.forIn(response.data.data[0], function (value, key) {
+          dt.push({
+            key,
+            value
+          });
+        });
+        this.dataTable = dt;
+      });
+    },
+    /**
+     * Get trigger variables
+     */
+    getDebugVarsTriggers(data) {
+      let that = this,
+        dt = [];
+      api.cases.debugVarsTriggers(data).then((response) => {
+        if (response.data.length > 0) {
+          _.forIn(response.data.data[0], function (value, key) {
+            dt.push({
+              key,
+              value
+            });
+          });
+          this.dataTableTriggers = dt;
+        }
+      });
+    },
+    /**
+     * Change Radio option [All, Dynaform, System]
+     */
+    changeOption(opt) {
+      this.getDebugVars({ filter: opt });
+    }
+  },
+};
+</script>
+
+<style>
+.debugger-container {
+  overflow: auto;
+  max-width: 25%;
+  min-width: 25%;
+  padding: 0.1rem;
+  margin-right: 0;
+  margin-left: 0;
+  border-width: 1px;
+  border-top-left-radius: 0.1rem;
+  border-top-right-radius: 0.1rem;
+}
+
+.tabs-component {
+  margin: 0 0;
+}
+
+.tabs-component-tabs {
+  border: solid 1px #ddd;
+  border-radius: 6px;
+  margin-bottom: 5px;
+}
+
+@media (min-width: 700px) {
+  .tabs-component-tabs {
+    border: 0;
+    align-items: stretch;
+    display: flex;
+    justify-content: flex-start;
+    margin-bottom: -1px;
+  }
+}
+
+.tabs-component-tab {
+  color: #999;
+  font-size: 14px;
+  font-weight: 600;
+  margin-right: 0;
+  list-style: none;
+}
+
+.tabs-component-tab:not(:last-child) {
+  border-bottom: dotted 1px #ddd;
+}
+
+.tabs-component-tab:hover {
+  color: #666;
+}
+
+.tabs-component-tab.is-active {
+  color: #000;
+}
+
+.tabs-component-tab.is-disabled * {
+  color: #cdcdcd;
+  cursor: not-allowed !important;
+}
+
+@media (min-width: 700px) {
+  .tabs-component-tab {
+    background-color: #fff;
+    border: solid 1px #ddd;
+    border-radius: 3px 3px 0 0;
+    margin-right: 0.5em;
+    transform: translateY(2px);
+    transition: transform 0.3s ease;
+  }
+
+  .tabs-component-tab.is-active {
+    border-bottom: solid 1px #fff;
+    z-index: 2;
+    transform: translateY(0);
+  }
+}
+
+.tabs-component-tab-a {
+  align-items: center;
+  color: inherit;
+  display: flex;
+  padding: 0.75em 1em;
+  text-decoration: none;
+}
+
+.tabs-component-panels {
+  padding: 4em 0;
+}
+
+@media (min-width: 700px) {
+  .tabs-component-panels {
+    border-top-left-radius: 0;
+    background-color: #fff;
+    border: solid 1px #ddd;
+    border-radius: 0 6px 6px 6px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+    padding: 0.5em 0.5em;
+  }
+}
+
+.btn-group > input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  display: none;
+}
+
+.btn-outline-secondary-active {
+  color: #fff;
+  background-color: #6c757d;
+  border-color: #6c757d;
+}
+
+.VueTables__search-field > label {
+  display: none;
+}
+
+.VueTables.VueTables--client .row {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: 0px;
+  margin-left: 0px;
+}
+
+.debugger-container .VueTables.VueTables--client > * {
+  font-size: smaller;
+}
+
+.debugger-container .VueTables.VueTables--client .table td,
+.table th {
+  padding: 0.3rem;
+  vertical-align: top;
+  border-top: 1px solid #dee2e6;
+}
+
+.debugger-container .form-control {
+  display: block;
+  width: 100%;
+  height: 30px;
+  padding: 0.5rem 0.5rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.debugger-container .col-md-12 {
+  position: relative;
+  width: 100%;
+  padding-right: 0;
+  padding-left: 0;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/home/XCase.vue b/resources/assets/js/home/XCase.vue
index 03c0c51fa..5bdc05094 100644
--- a/resources/assets/js/home/XCase.vue
+++ b/resources/assets/js/home/XCase.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="d-flex">
     <iframe
       :width="width"
       ref="xIFrame"
@@ -7,21 +7,28 @@
       :src="path"
       :height="height"
       allowfullscreen
+      @load="onLoadIframe"
     ></iframe>
+    <Debugger v-if="openDebug === true" :style="'height:' + height + 'px'" />
   </div>
 </template>
 
 <script>
+import Debugger from "../components/home/debugger/Debugger.vue";
+import api from "../api/index";
 export default {
   name: "XCase",
-  components: {},
+  components: {
+    Debugger
+  },
   props: {
-    data: Object,
+    data: Object
   },
   mounted() {
+    let that = this;
     this.height = window.innerHeight - this.diffHeight;
     this.dataCase = this.$parent.dataCase;
-    if(this.dataCase.ACTION =="jump") {
+    if (this.dataCase.ACTION === "jump") {
       this.path =
         window.config.SYS_SERVER +
         window.config.SYS_URI +
@@ -33,24 +40,35 @@ export default {
         `cases/open?APP_UID=${this.dataCase.APP_UID}&DEL_INDEX=${this.dataCase.DEL_INDEX}&action=${this.dataCase.ACTION}`;
     }
 
+    setTimeout(() => {
+      api.cases.debugStatus(this.dataCase).then((response) => {
+        if (response.data) {
+          that.openDebug = true;
+        }
+      });
+    }, 2000);
   },
   data() {
     return {
+      openDebug: false,
+      dataCase: null,
       height: "100%",
       width: "100%",
       diffHeight: 10,
-      dataCase: null,
       path: "",
-      
     };
   },
   methods: {
     classBtn(cls) {
       return "btn v-btn-request " + cls;
     },
+    onLoadIframe() {},
   },
 };
 </script>
 
 <style>
+.debugger-inline-cont {
+  overflow: hidden;
+}
 </style>
diff --git a/resources/assets/js/home/main.js b/resources/assets/js/home/main.js
index b71b8c9d7..a03029bde 100644
--- a/resources/assets/js/home/main.js
+++ b/resources/assets/js/home/main.js
@@ -3,7 +3,7 @@ import VueRouter from "vue-router";
 import VueSidebarMenu from "vue-sidebar-menu";
 import VueI18n from 'vue-i18n';
 import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
-import { ServerTable, Event} from 'vue-tables-2';
+import { ServerTable, Event, ClientTable} from 'vue-tables-2';
 import "@fortawesome/fontawesome-free/css/all.css";
 import "@fortawesome/fontawesome-free/js/all.js";
 import 'bootstrap/dist/css/bootstrap-grid.css';
@@ -11,13 +11,13 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 import Home from "./Home";
-
 Vue.use(VueRouter);
 Vue.use(VueSidebarMenu);
 Vue.use(BootstrapVue);
 Vue.use(BootstrapVueIcons);
 Vue.use(VueI18n);
 Vue.use(ServerTable, {}, false, 'bootstrap3', {});
+Vue.use(ClientTable, {}, false, 'bootstrap3', {});
 window.ProcessMaker = {
     apiClient: require('axios')
 };