vite-uni-dev-tool/dev/devConsole/index.ts

vite-uni-dev-tool, debug, uni-app, 一处编写，到处调试

import { DevEvent } from '../devEvent';
import type { DevTool } from '../type';
import {
  getCurrentDate,
  getCurrentPagePath,
  transformValueToView,
  isArray,
  parseValue,
} from '../utils/index';

/**
 * DevTool 包装之后的 console 类
 *
 * 用于记录 console 日志
 *
 * 覆盖 console 将会导致难以预料的事情发生，因此不建议覆盖 console
 *
 * @export
 * @class DevConsole
 */
export class DevConsole {
  event: DevEvent;

  /**
   * 时间戳记录
   *
   * @memberof DevConsole
   */
  timeMap = new Map<string, number>();

  /**
   * 计数器记录
   *
   * @memberof DevConsole
   */
  countMap = new Map<string, number>();

  constructor(event: DevEvent) {
    this.event = event;
  }

  /**
   * 包装之后的 console 方法
   *
   * @param {DevTool.ConsoleType} type
   * @param {any[]} args
   * @memberof DevConsole
   */
  factory(type: DevTool.ConsoleType, args: any[]) {
    console[type](...args);

    const isDestroy = this.event.getDevToolDestroy();

    if (isDestroy) return;

    const position = getCurrentPagePath();
    const time = getCurrentDate();
    // 获取调用栈（从第4行开始，跳过 console.log 和 wrapper 函数）
    const stackList = new Error()?.stack?.split('\n');
    const stack = stackList?.slice(3)?.[0];

    let argList = args?.map((item) => {
      return {
        type: transformValueToView(item),
        // 处理 item 循环引用问题
        value: parseValue(item),
      };
    });

    if (isArray(args) && args.length > 0) {
      this.event.updateConsoleList([
        {
          type,
          position,
          time,
          args: argList,
          stack,
        },
      ]);
    }
  }

  /**
   * DevTool 包装之后的 console.log 方法
   *
   * @param {...any[]} args
   * @memberof DevConsole
   */
  log(...args: any[]) {
    this.factory('log', args);
  }

  /**
   * DevTool 包装之后的 console.info 方法
   *
   * @param {...any[]} args
   * @memberof DevConsole
   */
  info(...args: any[]) {
    this.factory('info', args);
  }

  /**
   * DevTool 包装之后的 console.warn 方法
   *
   * @param {...any[]} args
   * @memberof DevConsole
   */
  warn(...args: any[]) {
    this.factory('warn', args);
  }

  /**
   * DevTool 包装之后的 console.error 方法
   *
   * @param {...any[]} args
   * @memberof DevConsole
   */
  error(...args: any[]) {
    this.factory('error', args);
  }

  /**
   * DevTool 包装之后的 console.time 方法
   *
   * @param {string} label
   * @memberof DevConsole
   */
  time(label: string) {
    console.time(label);
    this.timeMap.set(label, Date.now());
  }

  /**
   * DevTool 包装之后的 console.timeEnd 方法
   *
   * @param {string} label
   * @memberof DevConsole
   */
  timeEnd(label: string) {
    this.factory('timeEnd', [label]);

    const isDestroy = this.event.getDevToolDestroy();

    if (isDestroy) return;

    const position = getCurrentPagePath();
    const time = getCurrentDate();
    // 获取调用栈（从第4行开始，跳过 console.log 和 wrapper 函数）
    const stackList = new Error()?.stack?.split('\n');

    const stack = stackList?.slice(3)?.[0];

    const startTime = this.timeMap.get(label);

    if (startTime) {
      const duration = Date.now() - startTime;
      this.event.updateConsoleList([
        {
          type: 'log',
          position,
          time,
          args: [
            {
              type: 'string',
              value: `${label ?? '[DevTool timeEnd error]'}: ${duration}ms`,
            },
          ],
          stack,
        },
      ]);
    }
    this.timeMap.delete(label);
  }

  /**
   *  DevTool 包装之后的 console.clear 方法
   *
   * @memberof DevConsole
   */
  clear() {
    this.factory('clear', []);
    this.event.updateConsoleList([]);
  }

  /**
   * DevTool 包装之后的 console.count 方法
   *
   * @param {string} [label='']
   * @memberof DevConsole
   */
  count(label: string = '') {
    this.factory('count', [label]);

    const isDestroy = this.event.getDevToolDestroy();

    if (isDestroy) return;

    this.countMap.set(label, (this.countMap.get(label) || 0) + 1);

    // 获取调用栈（从第4行开始，跳过 console.log 和 wrapper 函数）
    const stackList = new Error()?.stack?.split('\n');

    const stack = stackList?.slice(3)?.[0];

    this.event.updateConsoleList([
      {
        type: 'log',
        position: getCurrentPagePath(),
        time: getCurrentDate(),
        args: [
          {
            type: 'string',
            value: `${label}: ${this.countMap.get(label)}`,
          },
        ],
        stack,
      },
    ]);
  }

  /**
   * DevTool 包装之后的 console.countReset 方法
   *
   * @param {string} [label='']
   * @memberof DevConsole
   */
  countReset(label: string = '') {
    this.countMap.delete(label);
  }

  /**
   * 原始 console.assert 方法
   *
   * @param {...any[]} args
   * @memberof DevConsole
   */
  assert(...args: any[]) {
    console.assert(...args);
  }

  /**
   * 原始 console.debug 方法
   *
   * @param {...any[]} args
   * @memberof DevConsole
   */
  debug(...args: any[]) {
    console.debug(...args);
  }

  /**
   * 原始 console.dir 方法
   *
   * @param {...any[]} args
   * @memberof DevConsole
   */
  dir(...args: any[]) {
    console.dir(...args);
  }

  /**
   * 原始 console.dirxml 方法
   *
   * @param {...any[]} args
   * @memberof DevConsole
   */
  dirxml(...args: any[]) {
    console.dirxml(...args);
  }

  /**
   * 原始 console.group 方法
   *
   * @param {...any[]} args
   * @memberof DevConsole
   */
  group(...args: any[]) {
    console.group(args);
  }

  /**
   * 原始 console.groupCollapsed 方法
   *
   * @param {...any[]} args
   * @memberof DevConsole
   */
  groupCollapsed(...args: any[]) {
    console.groupCollapsed(...args);
  }

  /**
   * 原始 console.groupEnd 方法
   *
   * @memberof DevConsole
   */
  groupEnd() {
    console.groupEnd();
  }

  /**
   * 原始 console.table 方法
   *
   * @param {...any[]} args
   * @memberof DevConsole
   */
  table(...args: any[]) {
    console.table(...args);
  }

  /**
   * 原始 console.timeStamp 方法
   *
   * @param {...any[]} args
   * @memberof DevConsole
   */
  timeStamp(...args: any[]) {
    console.timeStamp(...args);
  }

  /**
   * 原始 console.profile 方法
   *
   * @param {...any[]} args
   * @memberof DevConsole
   */
  trace(...args: any[]) {
    console?.trace?.(...args);
  }

  /**
   * 原始 console.profile 方法
   *
   * @param {string} label
   * @memberof DevConsole
   */
  // profile(label?: string) {
  //   console?.profile?.(label);
  // }

  /**
   * 原始 console.profileEnd 方法
   *
   * @param {string} [label]
   * @memberof DevConsole
   */
  // profileEnd(label?: string) {
  //   console?.profileEnd?.(label);
  // }
}