However, I didn't want to accept that issue any longer and decided to figure out what I'm missing. And that's the reason I didn't use the debugger in the first place. So effectively you end up with two instances of the same app. Unfortunately, launching a new browser means you have to navigate to the page you actually want to debug and you lose all your state (e.g. Until now, I was only using the first option of launching a new window because I wasn't able to get the second option working.
On the other hand, VSCode offers two debugging options for JS apps: Launching the debugger with a new browser window or attaching the debugger to the already running app on a certain browser window/tab. If I need to check the value of a certain variable, I log it to the console and check the output on Chrome Dev Tools. A new Chrome tab is opened by React and I just keep this tab open forever. Usually, the React app is started with npm run start/yarn start (react-scripts start) and it runs on localhost:3000 and hot reloads when making file changes. It's not that I don't like debuggers, debugging JS is just not as convenient as it is in other programming languages. Only if it's really tricky, I use the VSCode debugger. When developing a React app (or any JavaScript app), I heavily use console.log() for debugging purposes if something is not running as expected. UPDATE: I released a npm package create-chrome-debugger that creates a Chrome Debugger shortcut to start Chrome in Remote Debugging Mode.
0 kommentar(er)
