I've been using React JS for a while now, and one of the most helpful things you can get for it is this extension: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en. It can debug the state of components, and basically show you the tree of react js components, instead of just html dom elements. It is very useful for debuggging, but I don't know if it can be used on a tauri app whilst running as a desktop app. When in development mode, the app is just running off of a local server, therefore I can just open it in a web browser to test it (for me it is http://localhost:1420/). Unfortunately, when I open it in the browser, it cannot access backend rust functions. Soon, my app will become completely dependant on the rust backend, so the frontend won't work unless it is connected to rust. This will mean that I cannot use this old trick, which means that I cannot use react developer tools to debug anymore which will make debugging the frontent much harder. Is there any way that I can use react developer tools on the desktop app, or can I somehow setup the localhost server so that I can just run it in a webbrowser with react dev tools and still have it be able to access the backend rust functions?

CodePudding user response：

You need to use the standalone React devtools: https://github.com/facebook/react/tree/main/packages/react-devtools#usage-with-react-dom. This will allow running the app in the Tauri window, thus keeping the connection with Rust working, while having a separate window for just the devtools.

If you're developing on Windows then it may interest you that Microsoft seemingly wants to add extension support for WebView2: https://github.com/MicrosoftEdge/WebView2Feedback/issues/191 (Notice the Tracked label added May 2022)