如何在我的頁面中顯示一個苗條的控制台

Question

我想向我的 html 頁面添加一個控制台面板，就像在 svelte 站點的 REPL 頁面中一樣。

https://svelte.dev/repl/hello-world?version=3.55.1

我的網站生成為 static 網站並復制到 ESP8266 micro controller。我不知道該怎么做:-(

Answer 1

REPL 覆蓋console object 的方法來擴展它們。

例如，對於寫入消息的方法：

['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach((level) => {
    const original = console[level];
    console[level] = (...args) => {
        const stringifiedArgs = stringify(args);
        if (previous.level === level && previous.args && previous.args === stringifiedArgs) {
            parent.postMessage({ action: 'console', level, duplicate: true }, '*');
        } else {
            previous = { level, args: stringifiedArgs };

            try {
                parent.postMessage({ action: 'console', level, args }, '*');
            } catch (err) {
                parent.postMessage({ action: 'console', level: 'unclonable' }, '*');
            }
        }

        original(...args);
    };
});

來源

這使用postMessage發送包含記錄內容的消息事件，但您也可以使用其他機制。