How to clear console between HMR reloads?

[iandunn]

How can I console.clear() whenever I update any file in my project?

Without that, the console is quickly filled, and new messages are below the fold, so I constantly have to switch back to the browser and do a full refresh. That defeats the point of using HMR for me.

I've gotten this to work, but I have to put it in every single file in the project. I want to just put it in the root file. It'd be even better if there were a way to do it in vite.config.js, so I don't have to add extraneous things to my source.

if ( import.meta.hot ) {
	import.meta.hot.dispose( () => {
		console.clear();
	} );
}

[xuesongde]

I always face that problem, it hurts my feeling about coding.

[davidsavoie1]

I have found a way to clear the console between HMR updates. I put this code at the root of my project:

if (import.meta.hot) {
  import.meta.hot.on(
    "vite:beforeUpdate",
    () => console.clear()
  );
}

Each time a module is hot reloaded, the console is cleared.

[haron-IV]

Can you provide more info about how you implemented it?

[davidsavoie1]

I placed the above code in the main file that loads my app, like so:

import App from "./App.svelte";

if (import.meta.hot) {
  import.meta.hot.on(
    "vite:beforeUpdate",
    /* eslint-disable-next-line no-console */
    () => console.clear()
  );
}

new App({ target: document.getElementById("app") });

[vaynevayne]

What about users who need to cache logs? The logs are lost too!