How to display a svelte console in my page

Question

I want to add a console panel to my html page like in the REPL page of the svelte site.

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

My site was generating as a static site and copy in an ESP8266 micro controller. I have no idea how to do that :-(

Answer 1

The REPL overwrites the methods of the console object to extend them.

E.g. for the methods that write messages:

['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);
    };
});

Source

This uses postMessage to send a message event containing the logged contents, but you could use other mechanisms as well.