console logging

[peterbe]

I beg your pardon if this is off topic, and perhaps something that's inherent to Web Extension development (and not wxt specifically).

I did the installation (using the React) template and it was awesome. npm run dev and HMR just worked. Everything looks great.

What I didn't understand is; how do I get the console.log outputs?
I added:

+  useEffect(() => {
+    console.log("NEW COUNT VALUE:", count);
+  }, [count]);
+
+  console.log("RENDERING APP COMPONENT");

...into entrypoints/popup/App.tsx. But I don't see these?

npm run dev started a Chrome browser automatically. Great. I open its regular javascript console and see console logging from the webpage I opened. But where do I see console logging from within the App.tsx runtime?

[aklinker1]

Yup, this is a more general chrome extension question. Logs appear in the JS context's devtools window, not the CLI.

The CLI will only log vite-relaged errors, like when there's a syntax error and the file can't be served.

To see a log in the popup, you should open the popup, right click it, and choose "inspect". The devtools window that appears will include the log you're looking for.

For other JS contexts:

• Content script logs appear on the page they're ran in
• Background script/service worker logs are accessed from chrome://extensions

[peterbe]

To see a log in the popup, you should open the popup, right click it, and choose "inspect". The devtools window that appears will include the log you're looking for.

That was the trick I needed!
I couldn't figure that out. It's more a using-chrome kinda thing.
Ah well, in case others stumble on the same chrome usage skill problem, this is here for them.