I guess that's also the reason I was not able to attach the VSCode debugger to my running React app. In my case, it re-used the existing Chrome window and didn't enable remote debugging. Then, when React wants to launch a new window, Chrome internally checks if it can use an existing window or if it has to create a new window. My assumption is that you enable remote debugging on process level and if you already started Chrome by clicking on the icon, remote debugging is not enabled by default. If Chrome is already running on your system, this React start script will not create a new window but will create a new tab on your existing Chrome window. You have to close Chrome completely before running this script. For example, Chrome is google chrome on macOS, google-chrome on Linux and chrome on Windows. The name of the browser depends on the operating system. However, the advanced configuration allows us to change the browser and how it is launched by setting two environment variables BROWSER and BROWSER_ARGS:Įnter fullscreen mode Exit fullscreen mode Unfortunately, the default React start script launches a browser without remote debugging (maybe for safety reasons?). When you click debug on VSCode it does exactly that: It starts a new browser window with this command line argument. For example, Chrome has to be started with the flag -remote-debugging-port=9222. In order to debug JS apps, the browser has to be started with remote debugging enabled. 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |