为何JavaScript自定义Logger日志未在控制台显示？

检查日志调用代码的执行时机与位置 #

你提供的index.js代码里未包含日志调用逻辑，若这些代码未被纳入执行流程（比如写在未引入的文件里，或未在Logger初始化后执行），自然不会输出日志。需确保日志调用放在Logger初始化完成之后：

import "./styles.css";
import { Logger } from "./logger";

Logger.configure({ ...Logger.defaultLoggerOptions, level: "debug" });
const logger = Logger.getLogger("vcw:app:api:user-service");

document.getElementById("app").innerHTML = `
<h1>Helo Vanil</h1>
<div>
  We u stathe saconfiguration as Parcel to bundle this sandbox, you can find more
  info about Parc
  <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.
</div>
`;

// 确保日志调用在Logger初始化后执行
logger.info(`[sendOtpCode] email: nnee, method:hhh`);
logger.debug(`[sendOtpCode] email: nnee, method:hhh`);
logger.error(`[sendOtpCode] email: nnee, method:hhh`);

排查自定义Logger的实现逻辑 #

你使用的是自定义Logger模块，若模块内部存在逻辑缺陷，会导致日志无法输出，需重点检查：

• configure方法是否正确保存了日志级别配置
• getLogger返回的实例是否根据配置的级别判断是否输出日志
• 是否调用了原生console方法完成日志输出

以下是一个基础的正确实现示例：

class Logger {
  static defaultLoggerOptions = { level: "info" };
  static options = { ...Logger.defaultLoggerOptions };

  static configure(options) {
    Logger.options = { ...Logger.defaultLoggerOptions, ...options };
  }

  static getLogger(namespace) {
    return {
      info(message) {
        if (["debug", "info", "error"].includes(Logger.options.level)) {
          console.info(`[${namespace}] ${message}`);
        }
      },
      debug(message) {
        if (Logger.options.level === "debug") {
          console.debug(`[${namespace}] ${message}`);
        }
      },
      error(message) {
        if (["debug", "info", "error"].includes(Logger.options.level)) {
          console.error(`[${namespace}] ${message}`);
        }
      }
    };
  }
}

export { Logger };

确认打包环境的日志输出限制 #

Parcel沙箱默认是开发模式，一般不会禁用控制台输出，但可检查是否存在自定义配置移除了日志相关代码。

内容的提问来源于stack exchange，提问作者user18639304