JavaScriptのconsole.logをHTML画面と開発者ツールの両方に出力する

2020年11月23日

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style>
    pre{
        padding:1em;
        background-color:black;
        color :green;
    }
    code{
        font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
        font-size:20px;
    }
    </style>

    <body>
       <pre><code id="log"></code></pre>
       <script>
            const logging = function(message){
                document.getElementById('log').innerHTML += message + '\n';
            };

            console._log = console.log;
            console.log = function(message){
                logging(message);
                console._log(message);
            };

            console._info = console.info;
            console.info = function(message){
                logging(message);
                console._info(message);
            };

            console._warn = console.warn;
            console.warn = function(message){
                logging(message);
                console._warn(message);
            };

            console._error = console.error;
            console.error = function(message){
                logging(message);
                console._error(message);
            };

            console.log('log');
            console.info('info');
            console.warn('warm');
            console.error('error');
        </script>
    </body>
</html>