如何在Express.js+EJS项目中将服务端日志输出到浏览器控制台？

问题背景 #

我正在开发一个基于Express.js和EJS模板的天气预报大学课程项目，目前遇到调试问题：在EJS模板里写的<% console.log(locals.forecasts) %>只会输出到VSCode的服务端终端，无法显示在浏览器开发者工具的控制台中，希望解决这个问题以便调试前端数据。

解决方案 #

核心原因 #

EJS的<% %>标签内的代码是在Node.js服务端执行的，所以其中的console.log会直接输出到服务端终端，而非浏览器控制台。要在浏览器中打印数据，需要生成前端可执行的JavaScript代码，将服务端变量传递给前端并执行console.log。

修改步骤 #

在weather.ejs中，将原来的服务端console.log替换为前端<script>标签包裹的代码，通过<%= JSON.stringify(forecasts) %>将服务端的forecasts变量转为JSON字符串，供前端解析：

<% if (locals.forecasts) { %>
    <script>
        // 在浏览器控制台打印天气数据
        console.log('5-Day Forecast Data:', <%= JSON.stringify(forecasts) %>);
    </script>
    <h2>5-Day Forecast for <%= city %></h2>
    <div class="forecast-grid">
        <% forecasts.forEach(forecast => { %>
            <div class="forecast-card">
                <h3><%= new Date(forecast.dt * 1000).toLocaleDateString() %></h3>
                <p>Temperature: <%= forecast.main.temp %>°C</p>
                <p>Weather: <%= forecast.weather[0].main %></p>
                <p>Humidity: <%= forecast.main.humidity %>%</p>
                <p>Wind Speed: <%= forecast.wind.speed %> m/s</p>
            </div>
        <% }) %>
    </div>
<% } %>

关键说明 #

1. JSON.stringify(forecasts)：将服务端的JavaScript对象转为JSON字符串，确保可以安全嵌入到前端脚本中，自动处理引号、换行等特殊字符，避免语法错误。
2. <script>标签：这段代码会在浏览器加载页面时执行，其中的console.log会输出到浏览器开发者工具的控制台。

扩展：打印错误信息 #

如果需要在浏览器控制台打印错误信息，同样可以用这个方法：

<% if (locals.error) { %>
    <div class="error"><%= error %></div>
    <script>
        console.error('Weather App Error:', <%= JSON.stringify(error) %>);
    </script>
<% } %>

内容的提问来源于stack exchange，提问作者cyruss.banjee