cannot log message when react app be loaded by electron

[huyinghuan]

I create a react app and use debug , debug(xxx) can work well on browser. but on electron user window.loadUrl("http://localhost:3000") load page, open electron dev tools, debug() cannot work.

code demo: https://github.com/huyinghuan/debug-issue

setup install deps:

cd $project
yarn install
cd ui
yarn install

run react app

cd $project
cd ui
yarn start

open browser, http://localhost:3000 in console debug work well.

run electron:
new terminal

cd $project
yarn start

when loaded page, in dev tools debug output nothing.

react app index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Debug from "debug";
const debug = Debug("ui:App");
localStorage.debug = "ui:*"
debug("hello")
ReactDOM.render(
  <React.StrictMode>
    <div className="App">
      debug test
    </div>
  </React.StrictMode>,
  document.getElementById('root')
);

[mqliutie]

兄弟, 咋解决的? 我这也是electron中不显示, localstorage也设置了, 甚至都主动设置了 enable = true 都不行

[mqliutie]

兄弟, 咋解决的? 我这也是electron中不显示, localstorage也设置了, 甚至都主动设置了 enable = true 都不行

原来 levels 要设置要把 Verbose 也选上

[gitname]

Thanks @mqliutie for posting your findings and @huyinghuan for reporting the issue.

---

For future readers, here's how I got it working:

1. Open the Electron Developer Tools.

   

2. In the Electron Developer Tools: On the "Application" tab, expand the "Local Storage" item in the sidebar, then click on the URL in the list. Then, on the right side of the panel, create an item whose key is debug and whose value is * (you can change the value to something more restrictive once you get the baseline functionality working).

   

3. In the Electron Developer Tools: On the "Console" tab, click the "Levels" menu (its label might be "Default Levels," "Custom Levels," or "All Levels") and ensure there is a check mark next to the word, "Verbose" (you can click on the word to add/remove the check mark next to it).

   

Now, the "Console" will show the messages logged via the debug package.

[Qix-]

Yeah I guess it didn't occur to me that Verbose is off by default, and since we now use console.debug by default, this is going to hit a few people.

The localStorage stuff is indeed documented, but the call to enable Verbose logging is not. I would merge a PR if you (or someone) added that last screenshot (in #808 (comment)) to the README. 🙂

Good catch!

[gitname]

Thanks! I'll open a PR with it in a few minutes.

[gitname]

@Qix- , I opened a PR just now (linked above). Thanks for telling me about this package's use of console.debug, as that helped me include some context about the issue and screenshot in the README.