已通过npm start启动Angular项目，如何在终端查看日志？

嘿，我来帮你搞定这个问题！当你用npm start启动Angular应用时，默认情况下浏览器的console.log只会在DevTools里显示，但确实有几种方法能把这些日志同步到终端里，下面是几个实用的方案：

1. 用Chrome远程调试直接捕获日志（快速临时方案） #

如果你用Chrome浏览器，这个方法不用装额外依赖就能搞定：

• 先关掉所有Chrome窗口，然后用命令行启动Chrome并开启远程调试：
  • Windows：chrome.exe --remote-debugging-port=9222
  • Mac：/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
  • Linux：google-chrome --remote-debugging-port=9222
• 接着安装chrome-remote-interface工具：npm install -g chrome-remote-interface
• 最后运行命令连接到调试端口，捕获控制台日志：

  chrome-remote-interface --host localhost --port 9222 Runtime.enable Runtime.consoleAPICalled
  

  现在你在浏览器里的console.log就会同步输出到终端了！

2. 使用ngx-logger实现双向日志输出（适合长期项目） #

如果你的项目需要长期在终端和浏览器同时输出日志，ngx-logger是个不错的选择：

• 先安装依赖：npm install ngx-logger
• 在app.module.ts中导入并配置模块，比如：

  import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';
  
  @NgModule({
    imports: [
      LoggerModule.forRoot({
        level: NgxLoggerLevel.DEBUG,
        serverLogLevel: NgxLoggerLevel.DEBUG,
        serverLoggingUrl: 'http://localhost:3000/log' // 后面要搭的日志接收服务地址
      })
    ]
  })
  export class AppModule { }
  

• 然后写一个简单的Node.js日志接收服务（比如log-server.js）：

  const http = require('http');
  const server = http.createServer((req, res) => {
    let logContent = '';
    req.on('data', chunk => logContent += chunk.toString());
    req.on('end', () => {
      console.log('Browser Console:', JSON.parse(logContent).message);
      res.writeHead(200);
      res.end();
    });
  });
  server.listen(3000, () => console.log('Log server running on port 3000'));
  

• 启动日志服务：node log-server.js，再正常启动Angular应用，之后用this.logger.log()替代console.log()，日志就会同时出现在浏览器和终端里。

3. 用BrowserSync代理转发日志（简单易用） #

BrowserSync不仅能帮你实现热重载，还能转发浏览器日志到终端：

• 全局安装BrowserSync：npm install -g browser-sync
• 启动Angular应用后，再开一个终端运行：

  browser-sync start --proxy "localhost:4200" --logLevel "debug"
  

  之后访问BrowserSync提供的地址（默认是localhost:3000），浏览器的控制台日志就会同步到终端里了。

4. 临时应急方案：自定义日志函数 #

如果你不想装任何依赖，也可以写个简单的自定义函数，在打印日志的同时发送到本地临时服务：

• 先写个极简的Node.js服务（temp-log-server.js）：

  const http = require('http');
  http.createServer((req, res) => {
    req.pipe(process.stdout); // 直接把请求内容输出到终端
    res.end();
  }).listen(3001);
  

• 在Angular应用里创建一个全局函数：

  export function log(message: any) {
    console.log(message);
    fetch('http://localhost:3001', {
      method: 'POST',
      body: JSON.stringify({ log: message }),
      headers: { 'Content-Type': 'application/json' }
    });
  }
  

• 启动临时服务：node temp-log-server.js，然后在代码里用log()代替console.log()，终端就能收到日志了。

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