如何将bundle_ACTUAL.js的console.log输出重定向到HTML页面而非控制台

完全可以实现，核心思路是覆写原生console.log方法，在保留原有控制台输出能力的同时，将日志内容同步追加到页面DOM节点中展示。

完整实现代码 #

修改后的HTML文件如下：

<html>
    <head>
        <!-- 日志展示容器基础样式，可按需调整 -->
        <style>
            #log-container {
                background: #1e1e1e;
                color: #d4d4d4;
                padding: 16px;
                font-family: Consolas, monospace;
                height: 600px;
                overflow-y: auto;
                margin: 10px;
                border-radius: 4px;
            }
            .log-item {
                margin: 4px 0;
                padding: 2px 0;
                border-bottom: 1px solid #333;
                word-break: break-all;
            }
        </style>
        <script>
            // 先保存原生console.log方法，保证控制台还能正常输出
            const originalLog = console.log;
            window.addEventListener('DOMContentLoaded', () => {
                const logContainer = document.getElementById('log-container');
                // 覆写console.log方法
                console.log = function(...args) {
                    // 调用原生方法，保留控制台输出能力，不需要可以删除这行
                    originalLog.apply(console, args);
                    
                    // 生成日志内容，处理对象类型参数
                    const logContent = args.map(arg => {
                        if (typeof arg === 'object') {
                            return JSON.stringify(arg, null, 2);
                        }
                        return String(arg);
                    }).join(' ');

                    // 追加到页面容器
                    const logItem = document.createElement('div');
                    logItem.className = 'log-item';
                    logItem.textContent = logContent;
                    logContainer.appendChild(logItem);

                    // 自动滚动到最新日志位置，不需要可以删除这行
                    logContainer.scrollTop = logContainer.scrollHeight;
                }
            })
        </script>
        <script defer src="./bundle_ACTUAL.js"></script>
    </head>
    <body>
        <!-- 页面上的日志展示容器 -->
        <div id="log-container"></div>
    </body>
</html>

可选扩展 #

• 如果需要捕获console.error、console.warn等其他控制台输出方法，按照相同逻辑覆写对应方法即可，还可以给不同级别的日志设置不同文字颜色做区分。
• 可以按需调整日志容器的样式，适配自身页面布局。

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