diff --git a/frontend/src/business/components/api/definition/components/ApiVariableAdvance.vue b/frontend/src/business/components/api/definition/components/ApiVariableAdvance.vue
index 7bdf81b1d8..8ba1296ce5 100644
--- a/frontend/src/business/components/api/definition/components/ApiVariableAdvance.vue
+++ b/frontend/src/business/components/api/definition/components/ApiVariableAdvance.vue
@@ -39,7 +39,8 @@
       </el-tab-pane>
 
       <!--场景自定义变量-->
-      <el-tab-pane :label="$t('api_test.automation.scenario_total')" name="variable" v-if="scenarioDefinition != undefined">
+      <el-tab-pane :label="$t('api_test.automation.scenario_total')" name="variable"
+                   v-if="scenarioDefinition != undefined">
         <div>
           <el-row style="margin-bottom: 10px">
             <div style="float: left">
@@ -88,17 +89,17 @@
         <ms-container :class="{'maximize-container': !asideHidden}" v-outside-click="outsideClick">
           <ms-aside-container @setAsideHidden="setAsideHidden" style="padding-top: 0px">
             <div v-loading="loading" v-show="!asideHidden">
-                <el-tree node-key="resourceId"
-                         highlight-current
-                         ref="preTree"
-                         v-show="!asideHidden"
-                         :props="props"
-                         :data="scenarioDefinition"
-                         :default-expanded-keys="expandedNode"
-                         :expand-on-click-node="false"
-                         @node-click="nodeClick"
-                         @node-expand="nodeExpand"
-                         @node-collapse="nodeCollapse" >
+              <el-tree node-key="resourceId"
+                       highlight-current
+                       ref="preTree"
+                       v-show="!asideHidden"
+                       :props="props"
+                       :data="scenarioDefinition"
+                       :default-expanded-keys="expandedNode"
+                       :expand-on-click-node="false"
+                       @node-click="nodeClick"
+                       @node-expand="nodeExpand"
+                       @node-collapse="nodeCollapse">
                   <span class="custom-tree-node father" slot-scope="{node, data}">
                      <!-- 步骤组件-->
                      <ms-component-config
@@ -109,9 +110,9 @@
                        :type="data.type"
                        :scenario="data"
                        :env-map="projectEnvMap"
-                       />
+                     />
                   </span>
-                </el-tree>
+              </el-tree>
             </div>
           </ms-aside-container>
 
@@ -149,10 +150,12 @@
               <div v-for="(item, index) in scenarioPreRequestParams" :key="index" class="kv-row item">
                 <el-row type="flex" :gutter="20" justify="space-between" align="middle">
                   <el-col class="item">
-                    <el-input v-model="item.name" size="small" :readonly="true" @click.native="savePreParams(item.name)"/>
+                    <el-input v-model="item.name" size="small" :readonly="true"
+                              @click.native="savePreParams(item.name)"/>
                   </el-col>
                   <el-col class="item">
-                    <el-input v-model="item.exp" size="small" :readonly="true" @click.native="savePreParams(item.name)"/>
+                    <el-input v-model="item.exp" size="small" :readonly="true"
+                              @click.native="savePreParams(item.name)"/>
                   </el-col>
                 </el-row>
               </div>
@@ -178,6 +181,22 @@
           </el-col>
         </el-row>
       </el-tab-pane>
+
+      <el-tab-pane :label="$t('api_test.definition.document.request_info')" v-if="showMockVars">
+        <el-row>
+          <el-col :span="18" class="col-height">
+            <div>
+              <h1>{{ $t('api_test.definition.document.request_info') }}</h1>
+              <el-table border :data="requestValues"
+                        class="adjust-table table-content"
+                        @row-click="handleRowClick">
+                <el-table-column prop="type" :label="$t('commons.name')" width="150"/>
+                <el-table-column prop="name" :label="$t('api_test.value')" width="250"/>
+              </el-table>
+            </div>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
     </el-tabs>
     <div style="padding-top: 10px;">
       <el-row type="flex" align="bottom">
@@ -229,6 +248,12 @@
           return false;
         }
       },
+      showMockVars: {
+        type: Boolean,
+        default() {
+          return false;
+        }
+      },
       variables: Array,
       scenarioDefinition: Array,
     },
@@ -275,12 +300,41 @@
           {name: "number"}
         ],
         mockFuncs: MOCKJS_FUNC.map(f => {
-          return {name: f.name + " " + f.des + " " + this.$t('api_test.request.parameters_filter_example') + "：" + f.ex, value: f.name}
+          return {
+            name: f.name + " " + f.des + " " + this.$t('api_test.request.parameters_filter_example') + "：" + f.ex,
+            value: f.name
+          }
         }),
         jmeterFuncs: JMETER_FUNC,
         mockVariableFuncs: [],
         jmeterVariableFuncs: [],
         dialogVisible: true,
+        requestValues: [
+          {
+            type: this.$t('api_test.request.address'),
+            name: "${address}"
+          },
+          {
+            type: "Header " + this.$t('api_test.definition.document.request_param'),
+            name: "${header.param}"
+          },
+          {
+            type: this.$t('api_test.request.body') + this.$t('api_test.variable'),
+            name: "${body.param}"
+          },
+          {
+            type: this.$t('api_test.request.body') + this.$t('api_test.variable') + " (Raw)",
+            name: "${bodyRaw}"
+          },
+          {
+            type: "Query " + this.$t('api_test.definition.document.request_param'),
+            name: "${query.param}"
+          },
+          {
+            type: "Rest " + this.$t('api_test.definition.document.request_param'),
+            name: "${rest.param}"
+          },
+        ],
 
         // 自定义变量相关
         defineVariable: "",
@@ -333,18 +387,18 @@
         this.operatingElements = this.stepFilter.get("ALL");
       },
       open() {
-        if(this.scenarioDefinition != undefined){
+        if (this.scenarioDefinition != undefined) {
           // 标识为场景编辑入口进入
           this.ifFromVariableAdvance = true;
         }
         this.itemValueVisible = true;
         // 关闭页面重新进入需要再做过滤
-        if(this.ifFromVariableAdvance && this.$refs.preTree != undefined && this.currentTab == 3){
+        if (this.ifFromVariableAdvance && this.$refs.preTree != undefined && this.currentTab == 3) {
           this.componentActive(this.$refs.preTree.root);
         }
       },
       prepareData(data) {
-        if(data != undefined || data != null){
+        if (data != undefined || data != null) {
           this.scenario = data;
         }
         if (this.scenario) {
@@ -390,11 +444,11 @@
 
       // 获取该节点及所有子节点下的前置提取参数 key/value
       getExtractDataByNode(data, node) {
-        if(!node.isLeaf){
-          if(node.childNodes.length > 0){
-            for(let i=0; i<node.childNodes.length; i++){
-              if(node.childNodes[i].isLeaf){ //是叶子节点
-                if(node.childNodes[i].data.type === 'Extract'){ //叶子节点的数据的类型是 提取
+        if (!node.isLeaf) {
+          if (node.childNodes.length > 0) {
+            for (let i = 0; i < node.childNodes.length; i++) {
+              if (node.childNodes[i].isLeaf) { //是叶子节点
+                if (node.childNodes[i].data.type === 'Extract') { //叶子节点的数据的类型是 提取
                   let extractJsonParams = (node.childNodes[i].data.json).map(v => {
                     return {name: v.variable, value: v.value, exp: v.expression}
                   });
@@ -411,7 +465,7 @@
                   }
                 }
                 continue;
-              }else{
+              } else {
                 this.getExtractDataByNode(node.childNodes[i].data, node.childNodes[i]);
               }
             }
@@ -419,24 +473,24 @@
         }
       },
       componentActive(node) {
-        if(this.ifFromVariableAdvance){
+        if (this.ifFromVariableAdvance) {
           this.setLeafNodeUnVisible(node);
         }
       },
       // 递归设置不需要显示的叶子节点
       setLeafNodeUnVisible(node) {
-        if(!node.isLeaf){
-          if(node.childNodes.length > 0){
-            for(let i=0; i<node.childNodes.length; i++){
+        if (!node.isLeaf) {
+          if (node.childNodes.length > 0) {
+            for (let i = 0; i < node.childNodes.length; i++) {
               // 提取参数不需要隐藏
-              if(node.childNodes[i].isLeaf && node.childNodes[i].level > 1){
+              if (node.childNodes[i].isLeaf && node.childNodes[i].level > 1) {
                 node.childNodes[i].visible = false;
-                if(node.childNodes[i].data.type === 'Extract' && node.data.type !== 'HTTPSamplerProxy'){
+                if (node.childNodes[i].data.type === 'Extract' && node.data.type !== 'HTTPSamplerProxy') {
                   node.childNodes[i].visible = true;
                 }
-              }else{
+              } else {
                 // 等待控制器不显示
-                if(node.childNodes[i].level == 1 && node.childNodes[i].data.type === 'ConstantTimer'){
+                if (node.childNodes[i].level == 1 && node.childNodes[i].data.type === 'ConstantTimer') {
                   node.childNodes[i].visible = false;
                 }
                 this.setLeafNodeUnVisible(node.childNodes[i]);
@@ -446,12 +500,12 @@
         }
       },
 
-      getAllExtractDataByNode(){
-        if(this.ifFromVariableAdvance){
+      getAllExtractDataByNode() {
+        if (this.ifFromVariableAdvance) {
           this.selectedNode = undefined;
           this.selectedTreeNode = undefined;
           this.scenarioPreRequestParams = [];
-          if(this.$refs.preTree != undefined){
+          if (this.$refs.preTree != undefined) {
             this.getExtractDataByNode(null, this.$refs.preTree.root);
           }
         }
@@ -468,7 +522,7 @@
         this.itemValue = null;
         this.itemValuePreview = null;
 
-        if(this.ifFromVariableAdvance && this.currentTab === 3){
+        if (this.ifFromVariableAdvance && this.currentTab === 3) {
           // 前置提取屏蔽部分叶子节点
           this.componentActive(this.$refs.preTree.root);
         }
@@ -505,18 +559,18 @@
           let index = this.mockVariableFuncs.indexOf(itemFunc);
           this.mockVariableFuncs = this.mockVariableFuncs.slice(0, index);
           this.mockVariableFuncs.push({name: '', params: []});
-          let valindex = this.itemValue.indexOf('|'+func.name);
-          this.itemValue = this.itemValue.slice(0,valindex);
-        }else {
+          let valindex = this.itemValue.indexOf('|' + func.name);
+          this.itemValue = this.itemValue.slice(0, valindex);
+        } else {
           this.methodChange(itemFunc, func);
         }
       },
       addFunc() {
-        if(this.itemValue == undefined || this.itemValue == null){
+        if (this.itemValue == undefined || this.itemValue == null) {
           this.$warning(this.$t('api_test.request.parameters_advance_add_mock_error'));
           return;
         }
-        if(this.itemValue.indexOf('@') == -1){
+        if (this.itemValue.indexOf('@') == -1) {
           this.itemValue = '@' + this.itemValue;
         } else {
           this.itemValue = this.itemValue;
@@ -543,13 +597,13 @@
         this.mockVariableFuncs.push({name: '', params: []});
       },
       saveAdvanced() {
-        if(this.itemValue != null && this.itemValue != undefined
+        if (this.itemValue != null && this.itemValue != undefined
           && this.itemValue.indexOf('@') == -1
-          && this.itemValue.indexOf('$') == -1){
+          && this.itemValue.indexOf('$') == -1) {
           this.$set(this.currentItem, 'value', '@' + this.itemValue);
         } else {
           this.$set(this.currentItem, 'value', this.itemValue);
-          if(this.currentItem.mock != undefined){
+          if (this.currentItem.mock != undefined) {
             this.$set(this.currentItem, 'mock', this.itemValue);
           }
         }
@@ -603,7 +657,7 @@
         this.itemValue = '${' + data + '}';
       },
       handleRowClick(row) {
-        if(row && row.name){
+        if (row && row.name) {
           this.itemValue = row.name;
         }
       },
@@ -648,10 +702,10 @@
       },
 
       showNode(node) {
-        for(let i=0; i<node.hashTree.length; i++){
+        for (let i = 0; i < node.hashTree.length; i++) {
           // 右边展示如果包含了前置提取表单,且是 HTTPSamplerProxy 类型，则不需要显示提取参数列表
-          if(node.hashTree[i].type == 'Extract' && node.type == 'HTTPSamplerProxy'
-            && this.scenarioPreRequestParams.length > 0){
+          if (node.hashTree[i].type == 'Extract' && node.type == 'HTTPSamplerProxy'
+            && this.scenarioPreRequestParams.length > 0) {
             this.scenarioPreRequestParams = [];
             break;
           }
@@ -663,8 +717,8 @@
         return false;
       },
       filterSonNode(item) {
-        if(item.type == 'Assertions' || item.type == 'ConstantTimer'
-          || item.type == 'JDBCPreProcessor' || item.type == 'JDBCPostProcessor'){
+        if (item.type == 'Assertions' || item.type == 'ConstantTimer'
+          || item.type == 'JDBCPreProcessor' || item.type == 'JDBCPostProcessor') {
           return false;
         }
         return true;
diff --git a/frontend/src/business/components/api/definition/components/mock/Components/MockApiResponseBody.vue b/frontend/src/business/components/api/definition/components/mock/Components/MockApiResponseBody.vue
index 159d1ef608..85f29829a1 100644
--- a/frontend/src/business/components/api/definition/components/mock/Components/MockApiResponseBody.vue
+++ b/frontend/src/business/components/api/definition/components/mock/Components/MockApiResponseBody.vue
@@ -21,6 +21,7 @@
       <ms-json-code-edit
           v-if="body.format==='JSON-SCHEMA'"
           :body="body"
+          :show-mock-vars="true"
           ref="jsonCodeEdit"/>
       <ms-code-edit
           v-else-if="codeEditActive && loadIsOver"
diff --git a/frontend/src/business/components/api/definition/components/mock/Components/MockApiVariable.vue b/frontend/src/business/components/api/definition/components/mock/Components/MockApiVariable.vue
index e8535836ae..b6879911c3 100644
--- a/frontend/src/business/components/api/definition/components/mock/Components/MockApiVariable.vue
+++ b/frontend/src/business/components/api/definition/components/mock/Components/MockApiVariable.vue
@@ -22,7 +22,7 @@
             </template>
           </el-input>
           <el-autocomplete :disabled="isReadOnly" v-if="suggestions" v-model="item.name" size="small"
-                           :fetch-suggestions="querySearch" @change="change" :placeholder="keyText" show-word-limit>
+                           :fetch-suggestions="querySearch" @input="change" @change="change" :placeholder="keyText" show-word-limit>
             <template v-slot:prepend>
               <el-select v-if="type === 'body'" :disabled="isReadOnly" class="kv-type" v-model="item.type"
                          @change="typeChange(item)">
diff --git a/frontend/src/business/components/common/json-schema/JsonSchemaEditor.vue b/frontend/src/business/components/common/json-schema/JsonSchemaEditor.vue
index b85da9cd7a..298e604eff 100644
--- a/frontend/src/business/components/common/json-schema/JsonSchemaEditor.vue
+++ b/frontend/src/business/components/common/json-schema/JsonSchemaEditor.vue
@@ -8,6 +8,7 @@
         <div style="min-height: 200px">
           <json-schema-editor class="schema"
                               :value="schema"
+                              :show-mock-vars="showMockVars"
                               :scenario-definition="scenarioDefinition"
                               @editScenarioAdvance="editScenarioAdvance"
                               lang="zh_CN" custom/>
@@ -39,6 +40,12 @@
         type: Boolean,
         default: true
       },
+      showMockVars: {
+        type: Boolean,
+        default() {
+          return false;
+        }
+      },
       scenarioDefinition: Array,
     },
     created() {
diff --git a/frontend/src/business/components/common/json-schema/schema/editor/main.vue b/frontend/src/business/components/common/json-schema/schema/editor/main.vue
index 3bc19528b7..f9e71d717a 100644
--- a/frontend/src/business/components/common/json-schema/schema/editor/main.vue
+++ b/frontend/src/business/components/common/json-schema/schema/editor/main.vue
@@ -24,6 +24,7 @@
         <ms-mock :disabled="pickValue.type==='object' || pickKey ==='root' || pickValue.type==='array' || pickValue.type==='null'"
                  :schema="pickValue"
                  :scenario-definition="scenarioDefinition"
+                 :show-mock-vars="showMockVars"
                  @editScenarioAdvance="editScenarioAdvance"/>
       </el-col>
       <el-col :span="4">
@@ -46,6 +47,7 @@
       <json-schema-editor v-for="(item,key,index) in pickValue.properties" :value="{[key]:item}"
                           :parent="pickValue" :key="index" :deep="deep+1" :root="false" class="children"
                           :scenario-definition="scenarioDefinition"
+                          :show-mock-vars="showMockVars"
                           @editScenarioAdvance="editScenarioAdvance"
                           :lang="lang" :custom="custom" @changeAllItemsType="changeAllItemsType" @reloadItems="reloadItems"/>
     </template>
@@ -53,6 +55,7 @@
       <json-schema-editor v-for="(item,key,index) in pickValue.items" :value="{[key]:item}" :parent="pickValue" :key="index"
                           :deep="deep+1" :root="false" class="children"
                           :scenario-definition="scenarioDefinition"
+                          :show-mock-vars="showMockVars"
                           @editScenarioAdvance="editScenarioAdvance"
                           :lang="lang" :custom="custom" @changeAllItemsType="changeAllItemsType"/>
     </template>
@@ -108,6 +111,12 @@ export default {
       type: Object,
       required: true
     },
+    showMockVars: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
     disabled: { //name不可编辑，根节点name不可编辑,数组元素name不可编辑
       type: Boolean,
       default: false
diff --git a/frontend/src/business/components/common/json-schema/schema/editor/mock/MockComplete.vue b/frontend/src/business/components/common/json-schema/schema/editor/mock/MockComplete.vue
index 9d39ff0525..56985704cc 100644
--- a/frontend/src/business/components/common/json-schema/schema/editor/mock/MockComplete.vue
+++ b/frontend/src/business/components/common/json-schema/schema/editor/mock/MockComplete.vue
@@ -12,7 +12,7 @@
       @select="change">
       <i slot="suffix" class="el-input__icon el-icon-edit pointer" @click="advanced(mock)"></i>
     </el-autocomplete>
-    <ms-api-variable-advance :scenario-definition="scenarioDefinition" :current-item="mock" ref="variableAdvance"/>
+    <ms-api-variable-advance :show-mock-vars="showMockVars" :scenario-definition="scenarioDefinition" :current-item="mock" ref="variableAdvance"/>
 
   </div>
 </template>
@@ -32,6 +32,12 @@
       },
       disabled: Boolean,
       scenarioDefinition: Array,
+      showMockVars: {
+        type: Boolean,
+        default() {
+          return false;
+        }
+      },
     },
     data() {
       return {