diff --git a/config/loaders/wxml-loader.js b/config/loaders/wxml-loader.js
index 66c56a5..8dbae14 100644
--- a/config/loaders/wxml-loader.js
+++ b/config/loaders/wxml-loader.js
@@ -84,6 +84,7 @@ const isSrc = (name) => name === 'src';
 
 const isDynamicSrc = (src) => /\{\{/.test(src);
 const oakMessage = 'oak-message';
+const oakDebugPanel = 'oak-debugPanel';
 const oakRegex = /(\/*[a-zA-Z0-9_-])*\/app\/|(\\*[a-zA-Z0-9_-])*\\app\\/;
 const localRegex = /(\/*[a-zA-Z0-9_-])*\/src+\/|(\\*[a-zA-Z0-9_-])*\\src+\\/;
 const oakPagesOrComponentsRegex =
@@ -151,7 +152,7 @@ module.exports = async function (content) {
         _compiler = {},
         resourcePath,
     } = this;
-    const { output } = _compiler.options;
+    const { output, mode } = _compiler.options;
     const { path: outputPath } = output;
     const { context, target } = webpackLegacyOptions || this;
     const issuer = _compilation.moduleGraph.getIssuer(this._module);
@@ -202,6 +203,14 @@ module.exports = async function (content) {
         ) {
             source = source + `\n <${oakMessage}></${oakMessage}>`;
         }
+        if (
+            mode !== 'production' &&
+            appJson &&
+            appJson.usingComponents &&
+            appJson.usingComponents[oakDebugPanel]
+        ) {
+            source = source + `\n <${oakDebugPanel}></${oakDebugPanel}>`;
+        }
     }
 
     const doc = new DOMParser({
diff --git a/config/mp/webpack.config.js b/config/mp/webpack.config.js
index f8513ee..53edfca 100644
--- a/config/mp/webpack.config.js
+++ b/config/mp/webpack.config.js
@@ -377,6 +377,10 @@ module.exports = function (webpackEnv) {
                 exclude: ['*/weui-miniprogram/*'],
                 include: ['project.config.json', 'sitemap.json'],
                 split: isEnvProduction,
+                debugPanel: {
+                    name: 'oak-debugPanel',
+                    show: !isEnvProduction,
+                },
             }),
             new webpack.DefinePlugin(env.stringified),
             new StylelintPlugin({
diff --git a/plugins/WechatMpPlugin.js b/plugins/WechatMpPlugin.js
index 75ba3bd..40fa911 100644
--- a/plugins/WechatMpPlugin.js
+++ b/plugins/WechatMpPlugin.js
@@ -66,7 +66,6 @@ function replaceDoubleSlash(str) {
 class OakWeChatMpPlugin {
     constructor(options = {}) {
         this.options = Object.assign(
-            {},
             {
                 context: path.resolve(process.cwd(), 'src'),
                 clear: true,
@@ -78,6 +77,10 @@ class OakWeChatMpPlugin {
                 vendorChunkName: 'vendor',
                 runtimeChunkName: 'runtime',
                 split: true,
+                debugPanel: {
+                    name: 'oak-debugPanel',
+                    show: true,
+                },
             },
             options
         );
@@ -329,10 +332,14 @@ class OakWeChatMpPlugin {
                 }
             };
 
-            for (const c of Object.values(usingComponents)) {
+            for (const k of Object.keys(usingComponents)) {
+                const c = usingComponents[k];
                 if (c.indexOf('plugin://') === 0) {
                     continue;
                 }
+                if (k === this.options.debugPanel.name && !this.options.debugPanel.show) {
+                    continue;
+                }
                 if (c.indexOf('/npm_components') === 0) {
                     const component = c.replace(
                         /\/npm_components/,
@@ -731,6 +738,9 @@ class OakWeChatMpPlugin {
             if (appJson.usingComponents) {
                 for (let ck of Object.keys(appJson.usingComponents)) {
                     let component = appJson.usingComponents[ck];
+                    if (ck === this.options.debugPanel.name && !this.options.debugPanel.show) {
+                        continue;
+                    }
                     if (getIsOak(component)) {
                         component = replaceOakPrefix(component);
                     } else if (getIsLocal(component)) {