Debugging configuraiton for react project

Just drop some writing for react debugging. I have done this before, but keep forgetting some details when moving to a new environment again. So here we are:

Assumption:

* A React project in node.js project (usually writing in typescript and with webpack configuration)

* The client is WPF using webview2 to host the react website.

1. Produce the source map for the project files

React code is transpiled (from JSX and Typescript code) into a Javascript before being downloaded into the client (web browser, or webview2 in WPF). For debugging, a source map need to be produced and downloaded to the client as well. So, the first step is to generate a source map for the server. The quickest way to run webpack-dev-server, which can be configured in package.json:

"start": "webpack-dev-server --mode development",

When the `webpack-dev-server` is run in development mode, the source map will be inlined in the JavaScript code downloaded, or we call this mode  `eval-source-map`. 

There are multiple ways how to generate a source map through the `devtool` attribute in the `webpack.config.js`; you can google it and find the different values you can assign to this attribute. Running the dev server is equivalent to setting this attribute to  `eval-source-map`, which is not a full mapping but allows fast map generation.

2. Client-side debugging

For the client side, you can install the React Developer Tool on Chrome or Edge; that way, you can debug in the browser by opening Developer Tools in Chrome debugging. If your client is WebView2 inside WPF, you can enable DevTools so you can access the debugging functionality like in the web browser. 

   WebView.CoreWebView2.Settings.AreDevToolsEnabled = true;

or you can make the browser

In the Chrome DevTools, you should see something like this, in which you can put breakpoints etc, to debug.

3. Attach the browser to the VS code. 

Alternatively, you can debug directly from VSCode, but make sure you debug in the browser first to ensure all prerequisites are met.

To debug in VSCode, you need create launch configuration in .vscode, here's is the example of create launch configuration for edge, chrome, and webview2/

{

    // Use IntelliSense to learn about possible attributes.

    // Hover to view descriptions of existing attributes.

    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

    "version": "0.2.0",

    "configurations": [

       

        {

            "name": "Launch Chrome",

            "request": "launch",

            "type": "chrome",

            "url": "http://localhost:3006",

            "webRoot": "${workspaceFolder}/src",

            "sourceMaps": true,

            "trace": true,

        },

        {

            "type": "msedge",

            "request": "launch",

            "name": "Launch Edge against localhost",

            "url": "http://localhost:3006",

            "webRoot": "${workspaceFolder}/src",

            "sourceMaps": true,

            "useWebView": true

        },

        {

            "name": "Attach to WebView2",

            "type": "chrome",

            "request": "attach",

            "port": 9222,  // Default debug port for Chrome (WebView2)

            "webRoot": "${workspaceFolder}/src",

            "sourceMaps": true,

            "url": "http://localhost:3006"  // URL where React app is served

        }

    ]

 }