diff --git a/src/api/actuator.js b/src/api/actuator.js
new file mode 100644
index 00000000..4c42bfee
--- /dev/null
+++ b/src/api/actuator.js
@@ -0,0 +1,21 @@
+import service from '@/utils/service'
+
+const baseUrl = '/api/admin/actuator'
+
+const actuatorApi = {}
+
+actuatorApi.logfile = () => {
+  return service({
+    url: `${baseUrl}/logfile`,
+    method: 'get'
+  })
+}
+
+actuatorApi.env = () => {
+  return service({
+    url: `${baseUrl}/env`,
+    method: 'get'
+  })
+}
+
+export default actuatorApi
diff --git a/src/views/interface/ThemeEdit.vue b/src/views/interface/ThemeEdit.vue
index c835b949..51df1def 100644
--- a/src/views/interface/ThemeEdit.vue
+++ b/src/views/interface/ThemeEdit.vue
@@ -14,7 +14,7 @@
             <a-form-item>
               <codemirror
                 v-model="content"
-                :options="options"
+                :options="codemirrorOptions"
               ></codemirror>
             </a-form-item>
             <a-form-item>
@@ -78,7 +78,7 @@ export default {
   data() {
     return {
       buttonDisabled: true,
-      options: {
+      codemirrorOptions: {
         tabSize: 4,
         mode: 'text/html',
         lineNumbers: true,
diff --git a/src/views/system/developer/DeveloperOptions.vue b/src/views/system/developer/DeveloperOptions.vue
index d7f18027..eb3955b2 100644
--- a/src/views/system/developer/DeveloperOptions.vue
+++ b/src/views/system/developer/DeveloperOptions.vue
@@ -2,22 +2,55 @@
   <div class="page-header-index-wide">
     <a-row>
       <a-col :span="24">
-        <div class="card-container">
+        <div
+          class="card-container"
+          v-if="options.developer_mode"
+        >
           <a-tabs type="card">
-            <a-tab-pane key="general">
+            <a-tab-pane key="environment">
               <span slot="tab">
-                <a-icon type="tool" />请求追踪
+                <a-icon type="safety" />运行环境
               </span>
-              请求追踪
+              <Environment />
+            </a-tab-pane>
+            <a-tab-pane key="runtimelogs">
+              <span slot="tab">
+                <a-icon type="code" />实时日志
+              </span>
+              <RuntimeLogs />
+            </a-tab-pane>
+            <a-tab-pane key="settings">
+              <span slot="tab">
+                <a-icon type="setting" />设置
+              </span>
+              <SettingsForm />
             </a-tab-pane>
           </a-tabs>
         </div>
+        <a-alert
+          v-else
+          message="提示"
+          description="当前没有启用开发者选项，请启用之后再访问该页面！"
+          type="error"
+          showIcon
+        />
       </a-col>
     </a-row>
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
+import Environment from './tabs/Environment'
+import RuntimeLogs from './tabs/RuntimeLogs'
+import SettingsForm from './tabs/SettingsForm'
 export default {
-
+  components: {
+    Environment,
+    RuntimeLogs,
+    SettingsForm
+  },
+  computed: {
+    ...mapGetters(['options'])
+  }
 }
 </script>
diff --git a/src/views/system/developer/tabs/Environment.vue b/src/views/system/developer/tabs/Environment.vue
new file mode 100644
index 00000000..a6eb5478
--- /dev/null
+++ b/src/views/system/developer/tabs/Environment.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    运行环境 {{ env }}
+  </div>
+</template>
+<script>
+import actuatorApi from '@/api/actuator'
+export default {
+  name: 'Environment',
+  data() {
+    return {
+      env: {}
+    }
+  },
+  created() {
+    this.loadEnv()
+  },
+  methods: {
+    loadEnv() {
+      actuatorApi.env().then(response => {
+        this.env = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/developer/tabs/RuntimeLogs.vue b/src/views/system/developer/tabs/RuntimeLogs.vue
new file mode 100644
index 00000000..2b587504
--- /dev/null
+++ b/src/views/system/developer/tabs/RuntimeLogs.vue
@@ -0,0 +1,67 @@
+<template>
+  <a-form layout="vertical">
+    <a-form-item>
+      <a-skeleton
+        active
+        :loading="loading"
+        :paragraph="{rows: 12}"
+      >
+        <codemirror
+          v-model="logContent"
+          :options="codemirrorOptions"
+        ></codemirror>
+      </a-skeleton>
+    </a-form-item>
+    <a-form-item>
+      <a-button type="primary" style="margin-right: 8px;">下载</a-button>
+      <a-button
+        type="dash"
+        @click="()=>this.loadLogs()"
+      >刷新</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+<script>
+import { codemirror } from 'vue-codemirror-lite'
+import 'codemirror/mode/shell/shell.js'
+import actuatorApi from '@/api/actuator'
+export default {
+  name: 'RuntimeLogs',
+  components: {
+    codemirror
+  },
+  data() {
+    return {
+      codemirrorOptions: {
+        tabSize: 4,
+        mode: 'shell',
+        lineNumbers: true,
+        line: true
+      },
+      logContent: '',
+      loading: true
+    }
+  },
+  created() {
+    this.loadLogs()
+  },
+  methods: {
+    loadLogs() {
+      this.loading = true
+      actuatorApi.logfile().then(response => {
+        this.logContent = response.data
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.CodeMirror {
+  height: 560px;
+}
+.CodeMirror-gutters {
+  border-right: 1px solid #fff3f3;
+  background-color: #ffffff;
+}
+</style>
diff --git a/src/views/system/developer/tabs/SettingsForm.vue b/src/views/system/developer/tabs/SettingsForm.vue
new file mode 100644
index 00000000..646e26d0
--- /dev/null
+++ b/src/views/system/developer/tabs/SettingsForm.vue
@@ -0,0 +1,46 @@
+<template>
+  <a-form layout="vertical">
+    <a-form-item label="开发者选项：">
+      <a-switch v-model="options.developer_mode" />
+    </a-form-item>
+    <a-form-item>
+      <a-button
+        type="primary"
+        @click="handleSaveOptions"
+      >保存</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+<script>
+import { mapActions } from 'vuex'
+import optionApi from '@/api/option'
+export default {
+  name: 'SettingsForm',
+  data() {
+    return {
+      options: []
+    }
+  },
+  created() {
+    this.loadFormOptions()
+  },
+  methods: {
+    ...mapActions(['loadOptions']),
+    loadFormOptions() {
+      optionApi.listAll().then(response => {
+        this.options = response.data.data
+      })
+    },
+    handleSaveOptions() {
+      optionApi.save(this.options).then(response => {
+        this.loadFormOptions()
+        this.loadOptions()
+        this.$message.success('保存成功！')
+        if (!this.options.developer_mode) {
+          this.$router.push({ name: 'ToolList' })
+        }
+      })
+    }
+  }
+}
+</script>