Use VsCode to debug PuerTs of UE5

1. Download the demo project for testing

The steps of configuring PuerTs are not repeated here.

2. Preparation

2.1 Opening a project

Normally, you can see the following screen when you open the project directly

insert image description here
If you click Run directly, you can find that the Output Log window below has started to print many cases.
It is because the project executes QuickStart.ts by default.

2.2 Open TsGameInstance.cpp

insert image description here

3. Add VsCode breakpoint

3.1 Find QuickStart.ts in VsCode, just break a point

(Here we take L17 as an example)
insert image description here

4. Modify the virtual machine port (8889)

(If you don’t know the purpose of the virtual machine, you can check ZombieYang’s tweet )
Go back to TsGameInstance.cpp
and uncomment
insert image description here
The picture is too long. The current code is as follows:

void UTsGameInstance::OnStart()
{
    
    
    //GameScript = MakeShared<puerts::FJsEnv>();
    GameScript = MakeShared<puerts::FJsEnv>(std::make_unique<puerts::DefaultJSModuleLoader>(TEXT("JavaScript")), std::make_shared<puerts::FDefaultLogger>(), 8889);
    GameScript->WaitDebugger();
    TArray<TPair<FString, UObject*>> Arguments;
    Arguments.Add(TPair<FString, UObject*>(TEXT("GameInstance"), this));
    GameScript->Start("QuickStart", Arguments);
}

Pay attention to the modified code. I have changed the port to " 8889 "
and opened WaitDebugger() at the same time, the purpose is for the Client to wait for the V8 virtual machine (the relationship between the Client and the V8 virtual machine can also be viewed on ZombieYang's tweet )

5. Add VsCode configuration

5.1 Open the Debug configuration of VsCode

insert image description here

5.2 Select Node.js: Attach

insert image description here

5.3 Change the port to (8889)

insert image description here

6. Start Debugging

6.1 Start VsCode standby

①First select the Debug configuration added in 5.2
insert image description here
②Click the green triangle on the left
to see the following schematic box