search

unplugin / unplugin-turbo-console

🚀 Improve the Developer Experience of console
https://utc.yuy1n.io
MIT License
507 stars 11 forks source link

Redirect server logs to browser console during development #36

Closed unlocomqx closed 2 months ago

unlocomqx commented 3 months ago

Clear and concise description of the problem

I would like to view server logs in the browser console during development. The browser console is more convenient for inspecting js objects for example.

Suggested solution

The plugin could send the logs via the socket (Just guessing as I don't know the internals)

Alternative

No response

Additional context

No response

Validations

yuyinws commented 3 months ago

Nuxt has a similar feature. I will try to integrate it on this plugin.

unlocomqx commented 3 months ago

That's where I got the idea. I saw it on Twitter I think. It would be cool to have it in other frameworks. Thank you for your neat work!

yuyinws commented 2 months ago

This feature had released on v1.9.0. You can refer docs for usage detail.

unlocomqx commented 2 months ago

Thank you for implementing this feature, it's so useful!

I will try it and give you my feedback

Thank you

unlocomqx commented 2 months ago

Hi I tried it with SSR (using sveltekit) The websocket is initialized by the client, so the server logs before the client init are not reported. I suggested dumping the server logs to the client using a script tag when the socket is not yet init'ed

Thank you

yuyinws commented 2 months ago

Could you provide a minimal reproduction for your usecase?

unlocomqx commented 2 months ago

Here's the simplest repro

Thank you

yuyinws commented 2 months ago

I try to transform the initWebsocket to IIFE and use a script tag to load it.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        %sveltekit.head%
    </head>
    <script src="/@id/__x00__~console"></script>
    <body data-sveltekit-preload-data="hover">
        <div style="display: contents">%sveltekit.body%</div>
    </body>
</html>

Unfortunately it still have the same question.

What do you mean dumping the server logs to the client using a script tag when the socket is not yet init'ed ?

unlocomqx commented 2 months ago

I meant including the logs in the html directly when the websocket is still not initialized.

Example:

tConsole.log('Hello')

injects a script like this

Otherwise when the page is loading, there won't be a socket to receive the message

yuyinws commented 2 months ago

tConsole is a runtime function and called on the server side.

I'm not familiar with Sveltekit, is there any way to inject a Githubissues.

  • Githubissues is a development platform for aggregating issues.