Another code snippet to run Java JUnit quickly from the command line:

(Assuming you have download Java SDK, and add JAVA_HOME to your PATH variable)

1. You have downloaded the Maven binary zip and extracted it to your local folder e.g Program files

2. Add the `bin` folder of the Maven folder to your PATH

3. Create a project folder called this `Testing`

4. Inside "Testing" folder, create two folders, one for your Java code files and another for your Test files. For the Java files folder, create `src\main\java`. for testing files create `src\test\java`. By putting the files inside  the `java` folder, the test files can use the Java classes without using any import, and both will be on the default namespace. 

5. put pom.xml inside "Testing" folder, the pomxl should import the Junit

<project xmlns="http://maven.apache.org/POM/4.0.0"

         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0

                             http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>

    <artifactId>my-project</artifactId>

    <version>1.0-SNAPSHOT</version>

    <dependencies>

        <!-- JUnit 5 Dependencies -->

        <dependency>

            <groupId>org.junit.jupiter</groupId>

            <artifactId>junit-jupiter-api</artifactId>

            <version>5.7.0</version>

            <scope>test</scope>

        </dependency>

        <dependency>

            <groupId>org.junit.jupiter</groupId>

            <artifactId>junit-jupiter-engine</artifactId>

            <version>5.7.0</version>

            <scope>test</scope>

        </dependency>

    </dependencies>

    <build>

        <plugins>

            <!-- Maven Surefire Plugin for running tests -->

            <plugin>

                <groupId>org.apache.maven.plugins</groupId>

                <artifactId>maven-surefire-plugin</artifactId>

                <version>3.0.0-M5</version>

                <configuration>

                    <includes>

                        <include>**/*Test.java</include>

                    </includes>

                </configuration>

            </plugin>

        </plugins>

    </build>

</project>

5. Open the command line or terminal in the "Testing" folder, and run "mvn test"

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

        }

    ]

 }