Angular中HMR后不清除浏览器控制台日志的实现方法

一、浏览器原生设置 #

• Chrome、Firefox等主流浏览器自带日志保留功能：
  • 打开开发者工具（F12），点击控制台右上角的齿轮图标（设置），勾选Preserve log（Chrome）或Persist logs（Firefox）。开启后，页面刷新、导航跳转时控制台日志不会被清空。
  • 部分高版本浏览器支持“保留日志直至手动清除”，即使关闭开发者工具再重新打开，之前的日志也能保留。

二、自定义日志持久化 #

如果需要跨会话保存日志（比如关闭浏览器后仍可查看），可以重写console方法，将日志存储到localStorage或全局变量中：

// 备份原生console方法
const originalLog = console.log;
const originalWarn = console.warn;
const originalError = console.error;

// 从localStorage读取历史日志
let logs = JSON.parse(localStorage.getItem('persistedConsoleLogs')) || [];

// 重写log方法，同时保存日志
console.log = function(...args) {
  originalLog.apply(console, args);
  logs.push({ type: 'log', args: args, timestamp: new Date().toISOString() });
  localStorage.setItem('persistedConsoleLogs', JSON.stringify(logs));
};

// 同理重写warn和error方法
console.warn = function(...args) {
  originalWarn.apply(console, args);
  logs.push({ type: 'warn', args: args, timestamp: new Date().toISOString() });
  localStorage.setItem('persistedConsoleLogs', JSON.stringify(logs));
};

console.error = function(...args) {
  originalError.apply(console, args);
  logs.push({ type: 'error', args: args, timestamp: new Date().toISOString() });
  localStorage.setItem('persistedConsoleLogs', JSON.stringify(logs));
};

// 页面加载时恢复历史日志
logs.forEach(entry => {
  console[entry.type](...entry.args);
});

这种方案可以在页面刷新后自动恢复之前的日志，甚至关闭浏览器再打开也能查看历史记录。

HMR（模块热替换）默认会在模块更新时重置应用状态，部分场景下会触发控制台清空，以下是两种可行的解决思路：

一、修改Webpack HMR配置禁用自动清控制台 #

Angular的HMR依赖Webpack的HotModuleReplacementPlugin，可以通过配置禁用自动清除控制台的行为：

1. 若项目使用自定义Webpack配置（如webpack.config.js），添加如下配置：

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.HotModuleReplacementPlugin({
      // 禁用插件自动清除控制台
      quiet: false,
      noInfo: false
    })
  ],
  entry: {
    main: [
      // 禁用客户端热替换脚本的清控制台行为
      'webpack-hot-middleware/client?noInfo=true&quiet=false&reload=false',
      './src/main.ts'
    ]
  }
};

2. 若使用Angular CLI，可通过angular.json中的customWebpackConfig引入上述配置文件。

二、通过HMR生命周期钩子保存/恢复日志 #

利用Angular HMR的生命周期钩子，在模块更新前保存日志，更新完成后恢复：

1. 修改main.ts中的HMR处理逻辑：

import { enableProdMode, NgModuleRef } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { hmrBootstrap } from './hmr';

// 全局变量存储日志
let persistedLogs: Array<{type: string, args: any[], timestamp: string}> = [];

// 重写console方法保存日志
const originalLog = console.log;
console.log = (...args) => {
  originalLog.apply(console, args);
  persistedLogs.push({ type: 'log', args, timestamp: new Date().toISOString() });
};
// 同理重写warn、error等方法

if (environment.production) {
  enableProdMode();
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
  if (module['hot']) {
    hmrBootstrap(module, bootstrap, (moduleRef: NgModuleRef<any>) => {
      // HMR更新前备份当前日志
      const backupLogs = [...persistedLogs];
      // 模块销毁后恢复日志
      moduleRef.onDestroy(() => {
        persistedLogs = backupLogs;
        // 重新输出所有历史日志
        backupLogs.forEach(entry => {
          console[entry.type](...entry.args);
        });
      });
    });
  } else {
    console.error('HMR未在webpack-dev-server中启用！');
  }
} else {
  bootstrap().catch(err => console.error(err));
}

2. 检查hmr.ts文件，确保没有主动调用console.clear()的代码，避免手动清空日志。

三、第三方日志库辅助方案 #

可以集成log4js或Angular官方的Logger服务，将日志输出到本地存储或自定义的页面日志面板中，HMR更新后从存储中读取日志并展示，完全脱离浏览器控制台的依赖。

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