diff --git a/.node/server.js b/.node/server.js
index d8c99e9..05dc171 100644
--- a/.node/server.js
+++ b/.node/server.js
@@ -19,7 +19,7 @@ esbuild
       host: "localhost",
     },
     {
-      entryPoints: [path.resolve(__dirname, "../src/main.ts")],
+      entryPoints: [path.resolve(__dirname, "../src/main.dev.ts")],
       outfile: path.resolve(__dirname, "../dist/main.dev.js"),
       platform: "browser",
       globalName: "bvplayer_core",
diff --git a/src/main.dev.ts b/src/main.dev.ts
new file mode 100644
index 0000000..978585a
--- /dev/null
+++ b/src/main.dev.ts
@@ -0,0 +1,52 @@
+/*
+ * @Author: Shirtiny
+ * @Date: 2021-06-11 10:01:14
+ * @LastEditTime: 2021-12-11 11:41:23
+ * @Description:
+ */
+import { LEVELS, ShLogger } from "./model/shLogger";
+import { Logger, LoggerOption, LoggerOptionParam } from "./model/logger";
+import { css } from "./style/index";
+import { Theme } from "./style/theme";
+const theme = new Theme();
+
+const logger = new ShLogger();
+
+const request = () => {
+  return new Promise((r) => {
+    setTimeout(() => {
+      r("ok");
+    }, 300);
+  });
+};
+
+const run = () => {
+  logger.group("logger", () => {
+    logger.version("app-name", "1.1.2", { level: LEVELS.version });
+
+    logger.log(
+      "log",
+      { level: LEVELS.log },
+      ", logger default options: ",
+      logger.getLoggerOption(),
+    );
+
+    logger.debug("debug message", { level: LEVELS.debug });
+    logger.http("req and rep", { level: LEVELS.http });
+    logger.api("api message", { level: LEVELS.api });
+    logger.service("service data", { level: LEVELS.service });
+    logger.interval("interval task", { level: LEVELS.interval });
+    logger.key("ENTER", { level: LEVELS.key });
+    logger.warn("warnning message", { level: LEVELS.warn });
+    logger.error(new Error("error message"), { level: LEVELS.error });
+  });
+};
+
+logger.timing("run logger test", async (step) => {
+  step("run step start");
+  run();
+  const res = await request();
+  step("run step",["any data"], { res });
+  logger.trace("test for trace", { a: "any data" });
+  step("run step end");
+});
diff --git a/src/main.ts b/src/main.ts
index 62b8e20..a20d67c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,7 +5,7 @@
  * @Description:
  */
 import { LEVELS, ShLogger } from "./model/shLogger";
-import { Logger } from "./model/logger";
+import { Logger, LoggerOption, LoggerOptionParam } from "./model/logger";
 import { css } from "./style/index";
 import { Theme } from "./style/theme";
 
@@ -13,6 +13,6 @@ const theme = new Theme();
 
 const sh_log = new ShLogger();
 
-export { theme, ShLogger, css, Logger, LEVELS };
+export { theme, ShLogger, css, Logger, LEVELS, LoggerOption, LoggerOptionParam };
 
 export default sh_log;
diff --git a/src/model/baseLogger.ts b/src/model/baseLogger.ts
index 9c4e704..baebe31 100644
--- a/src/model/baseLogger.ts
+++ b/src/model/baseLogger.ts
@@ -9,13 +9,49 @@ export interface ILog {
   (...data: any[]): void;
 }
 
+export interface ILogGroup {
+  (...label: any[]): void;
+}
+
+export interface ILogGroupEnd {
+  (): void;
+}
+
+export interface ILogTime {
+  (label?: string): void;
+}
+
+export interface ILogTimeStep {
+  (label?: string, ...data: any[]): void;
+}
+
+export interface ILogTimeEnd {
+  (label?: string): void;
+}
+
+export interface ILogTrace {
+  (...data: any[]): void;
+}
+
 export interface IBaseLoggerOption {
   enable?: boolean;
   log?: ILog;
+  logGroup?: ILogGroup;
+  logGroupEnd?: ILogGroupEnd;
+  logTime?: ILogTime;
+  logTimeStep?: ILogTimeStep;
+  logTimeEnd?: ILogTimeEnd;
+  logTrace?: ILogTrace;
 }
 
 export interface ILogger {
   log: ILog;
+  logGroup: ILogGroup;
+  logGroupEnd: ILogGroupEnd;
+  logTime: ILogTime;
+  logTimeStep: ILogTimeStep;
+  logTimeEnd: ILogTimeEnd;
+  logTrace: ILogTrace;
 }
 
 export class BaseLogger implements ILogger {
@@ -23,11 +59,14 @@ export class BaseLogger implements ILogger {
 
   constructor(option?: IBaseLoggerOption) {
     this._option = {
-      enable:
-        typeof option?.enable === "boolean"
-          ? option.enable
-          : true,
+      enable: typeof option?.enable === "boolean" ? option.enable : true,
       log: option?.log,
+      logGroup: option?.logGroup,
+      logGroupEnd: option?.logGroupEnd,
+      logTime: option?.logTime,
+      logTimeStep: option?.logTimeStep,
+      logTimeEnd: option?.logTimeEnd,
+      logTrace: option?.logTrace,
     };
   }
 
@@ -36,6 +75,36 @@ export class BaseLogger implements ILogger {
     enable && log && log(...data);
   }
 
+  logGroup(...label: any[]): void {
+    const { enable, logGroup } = this._option;
+    enable && logGroup && logGroup(...label);
+  }
+
+  logGroupEnd() {
+    const { enable, logGroupEnd } = this._option;
+    enable && logGroupEnd && logGroupEnd();
+  }
+
+  logTime(label?: string): void {
+    const { enable, logTime } = this._option;
+    enable && logTime && logTime(label);
+  }
+
+  logTimeStep(label?: string, ...data: any[]): void {
+    const { enable, logTimeStep } = this._option;
+    enable && logTimeStep && logTimeStep(label, ...data);
+  }
+
+  logTimeEnd(label?: string) {
+    const { enable, logTimeEnd } = this._option;
+    enable && logTimeEnd && logTimeEnd(label);
+  }
+
+  logTrace(...data: any[]) {
+    const { enable, logTrace } = this._option;
+    enable && logTrace && logTrace(...data);
+  }
+
   set baseOption(option: IBaseLoggerOption) {
     this._option = option;
   }
diff --git a/src/model/logger.ts b/src/model/logger.ts
index f0c0d3c..8d49443 100644
--- a/src/model/logger.ts
+++ b/src/model/logger.ts
@@ -1,5 +1,14 @@
 import { Shape } from "./../style/shape";
-import { BaseLogger, IBaseLoggerOption } from "./baseLogger";
+import {
+  BaseLogger,
+  IBaseLoggerOption,
+  ILogGroup,
+  ILogGroupEnd,
+  ILogTime,
+  ILogTimeStep,
+  ILogTimeEnd,
+  ILogTrace,
+} from "./baseLogger";
 import { Theme } from "./../style/theme";
 import { ILog } from "./baseLogger";
 /*
@@ -9,26 +18,57 @@ import { ILog } from "./baseLogger";
  * @Description:
  */
 
-type LoggerOptionParam = {
+export type TitlePairs = { str: string; style?: string }[];
+
+export type LoggerOptionParam = {
   enable?: boolean;
+
+  // TODO: console adapter console方法由adapter实现
   log?: ILog;
+  logGroup?: ILogGroup;
+  logGroupCollapsed?: ILogGroup;
+  logGroupEnd?: ILogGroupEnd;
+  logTime?: ILogTime;
+  logTimeStep?: ILogTimeStep;
+  logTimeEnd?: ILogTimeEnd;
+  logTrace?: ILogTrace;
+
   level?: number;
   shape?: Shape;
+  isCollapsed?: boolean;
 };
 
-class LoggerOption implements IBaseLoggerOption {
+export class LoggerOption implements IBaseLoggerOption {
   enable?: boolean;
   log?: ILog;
+  logGroup?: ILogGroup;
+  logGroupCollapsed?: ILogGroup;
+  logGroupEnd?: ILogGroupEnd;
+  logTime?: ILogTime;
+  logTimeStep?: ILogTimeStep;
+  logTimeEnd?: ILogTimeEnd;
+  logTrace?: ILogTrace;
   level?: number;
   shape?: Shape;
+  isCollapsed?: boolean;
 
   constructor(param?: LoggerOptionParam) {
     const defaultOptionParam = {
       enable: true,
-      log: (...args: any) => window?.console?.log(...args),
+      log: (...args: any[]) => window?.console?.log(...args),
+      logGroup: (...label: any[]) => window?.console?.group(...label),
+      logGroupCollapsed: (...label: any[]) =>
+        window?.console?.groupCollapsed(...label),
+      logGroupEnd: () => window?.console?.groupEnd(),
+      logTime: (label?: string) => window?.console?.time(label),
+      logTimeStep: (label?: string, ...data: any[]) =>
+        window?.console?.timeLog(label, ...data),
+      logTimeEnd: (label?: string) => window?.console?.timeEnd(label),
+      logTrace: (...data: any[]) => window?.console?.trace(...data),
       // miku!
       level: 39,
       shape: new Theme().shapes.slider,
+      isCollapsed: true,
     };
 
     this.enable =
@@ -36,11 +76,28 @@ class LoggerOption implements IBaseLoggerOption {
         ? param.enable
         : defaultOptionParam.enable;
     this.log = (param && param.log) || defaultOptionParam.log;
+    this.logGroup = (param && param.logGroup) || defaultOptionParam.logGroup;
+    this.logGroupCollapsed =
+      (param && param.logGroupCollapsed) ||
+      defaultOptionParam.logGroupCollapsed;
+    this.logGroupEnd =
+      (param && param.logGroupEnd) || defaultOptionParam.logGroupEnd;
+    this.logTime = (param && param.logTime) || defaultOptionParam.logTime;
+    this.logTimeStep =
+      (param && param.logTimeStep) || defaultOptionParam.logTimeStep;
+    this.logTimeEnd =
+      (param && param.logTimeEnd) || defaultOptionParam.logTimeEnd;
+    this.logTrace = (param && param.logTrace) || defaultOptionParam.logTrace;
+
     this.level =
       param && typeof param.level === "number"
         ? param.level
         : defaultOptionParam.level;
     this.shape = param && param.shape ? param.shape : defaultOptionParam.shape;
+    this.isCollapsed =
+      param && param.isCollapsed
+        ? param.isCollapsed
+        : defaultOptionParam.isCollapsed;
   }
 }
 
@@ -56,7 +113,17 @@ export class Logger extends BaseLogger {
   setLoggerOption(option: object) {
     const newOption: LoggerOption = { ...this.loggerOption, ...option };
     this.loggerOption = newOption;
-    super.baseOption = { enable: newOption.enable, log: newOption.log };
+    super.baseOption = {
+      enable: newOption.enable,
+      log: newOption.log,
+      logGroup: newOption.isCollapsed
+        ? newOption.logGroupCollapsed
+        : newOption.logGroup,
+      logGroupEnd: newOption.logGroupEnd,
+      logTime: newOption.logTime,
+      logTimeEnd: newOption.logTimeEnd,
+      logTrace: newOption.logTrace,
+    };
   }
 
   getLoggerOption() {
@@ -74,15 +141,11 @@ export class Logger extends BaseLogger {
     return true;
   }
 
-  protected customFormat(
-    level: number,
-    pairs: ({ str: string; style?: string })[],
-    ...data: any[]
-  ) {
+  protected customFormat(level: number, pairs: TitlePairs, ...data: any[]) {
     if (!this.isLevelAllowed(level)) return;
     const content = "%c" + pairs.map((p) => p.str).join("%c");
     const descStyles = pairs.map((p) => p.style);
-    super.log(content, ...descStyles, ...data);
+    this.log(content, ...descStyles, ...data);
   }
 
   protected formatLog(
@@ -94,7 +157,45 @@ export class Logger extends BaseLogger {
     ...data: any[]
   ) {
     if (!this.isLevelAllowed(level)) return;
-    super.log(`%c${title}%c${message}`, titleCss, messageCss, ...data);
+    this.log(`%c${title}%c${message}`, titleCss, messageCss, ...data);
+  }
+
+  protected formatGroup(
+    level: number,
+    label: string | TitlePairs,
+    logs: () => void,
+  ) {
+    if (!this.isLevelAllowed(level)) return;
+    if (Array.isArray(label)) {
+      const title = "%c" + label.map((p) => p.str).join("%c");
+      const descStyles = label.map((p) => p.style);
+      this.logGroup(title, ...descStyles);
+    } else {
+      this.logGroup(String(label));
+    }
+
+    logs();
+    this.logGroupEnd();
+  }
+
+  protected async formatTiming(
+    level: number,
+    label: string,
+    logs: (step: (...data: any[]) => void) => any,
+    stepSplit: string = "<---",
+  ) {
+    if (!this.isLevelAllowed(level)) return;
+    this.logTime(label);
+
+    await logs((...data: any[]) => {
+      this.logTimeStep(label, stepSplit, ...data);
+    });
+    this.logTimeEnd(label);
+  }
+
+  protected formatTrace(level: number, ...data: any[]) {
+    if (!this.isLevelAllowed(level)) return;
+    this.logTrace(...data);
   }
 }
 
diff --git a/src/model/shLogger.ts b/src/model/shLogger.ts
index 3eb7be7..01161c0 100644
--- a/src/model/shLogger.ts
+++ b/src/model/shLogger.ts
@@ -25,6 +25,7 @@ const read = (exec: (reader: FileReader) => void): Promise<any> => {
 
 export enum LEVELS {
   log = 0,
+  trace = 0,
   version = 0,
   repo = 0,
   img = 0,
@@ -32,12 +33,14 @@ export enum LEVELS {
   warn = 2,
   key = 3,
   interval = 3,
+  group = 4,
   service = 4,
   doms = 5,
   api = 5,
   http = 6,
   component = 6,
   debug = 7,
+  timing = 7,
 }
 
 type LogType = {
@@ -164,11 +167,7 @@ export class ShLogger extends Logger {
   }
 
   doms = (message: string, ...nodes: any[]) => {
-    this.formatShapeLog(
-      logTypes.doms,
-      message,
-      [...nodes],
-    );
+    this.formatShapeLog(logTypes.doms, message, [...nodes]);
   };
 
   component = (componentName: any, message: string, ...data: any[]) => {
@@ -180,6 +179,29 @@ export class ShLogger extends Logger {
     );
   };
 
+  group = (label: string, logs: () => void) => {
+    this.formatGroup(
+      LEVELS.group,
+      [
+        {
+          str: label,
+          style: css`
+            color: ${Colors.groupBlue};
+          `,
+        },
+      ],
+      logs,
+    );
+  };
+
+  timing = (label: string, logs: (step: (...data: any[]) => void) => any) => {
+    this.formatTiming(LEVELS.timing, label, logs, "|");
+  };
+
+  trace = (...data: any[]) => {
+    this.formatTrace(LEVELS.trace, ...data);
+  };
+
   warn(message: string, ...data: any[]) {
     this.formatShapeLog(logTypes.warn, message, ...data);
   }
diff --git a/src/style/theme.ts b/src/style/theme.ts
index 7a2cad4..158d85c 100644
--- a/src/style/theme.ts
+++ b/src/style/theme.ts
@@ -23,6 +23,7 @@ export enum Colors {
   gray = "#8c8c8c",
   darkGreen = "#3f6600",
   cutePurple = "#6a51b2",
+  groupBlue = "#39B5E0"
 }
 
 export class Theme {