Doing serverside debugging in reactjs

Question

As I wants to debug the server side SSR(Server side render) code using visual studio code. currently it's debugging only to the bundled files. that is bit tedious to do. So, I am trying to debug the actual file while SSR is running.

Please advise any way or Visual studio code lunch setting configuration.

currently using configuration in lunch settings :-

       {
        "type": "node",
        "request": "attach",
        "name": "Attach by Process ID",
        "protocol": "inspector",
        "processId": "${command:PickProcess}",
        "sourceMaps": true,
        "stopOnEntry": false,
        "cwd": "${workspaceRoot}",
        "port": 9229,
        "sourceMapPathOverrides": { 
        "webpack:///./*": "${workspaceFolder}/*",
        "webpack:///*": "*"
        }
        }

So, I am attaching with node process running.

score 1 · Answer 1 · answered Oct 01 '20 at 06:28

1

from vs-code Documentation

To debug the client side React code, we'll need to install the Debugger for Chrome extension.

Note: This tutorial assumes you have the Chrome browser installed. There are also debugger extensions for the Edge and Firefox browsers.

Open the Extensions view (Ctrl+Shift+X) and type 'chrome' in the search box. You'll see several extensions which reference Chrome.

Configure the chrome debugger and get started (this for client)

As for SSR

Debug server-side in Node.js

answered Oct 01 '20 at 06:28

sasha romanov

377
5
18

1

as per webpack configuration we are having sourceMapping configuration. which we have applied for SSR webpack config. --> devtool: 'source-map' which means that it will show the original source code for the minified files. for easy debugging . So, while doing the debugging for Server Side Render in Reactjs . we wants to debug to the original mapped files for the respective bundled file. currently with the given configuration we are able to debug the bundled files only. but we wants debug the actual mapped files. – Muna Oct 01 '20 at 10:14

Dmitry Tomashevich · Answer 2 · 2021-03-15T17:27:01.850

I have found solution while experimenting with SSR and react here. I had just the same problem, spent about 4 hours.

So I have such config in my launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach",
            "port": 9229,
            "request": "attach",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "pwa-node",
            "outFiles": ["${workspaceFolder}/build/**/*.js"]
        },
    ]
}

So, you need outFiles option to be mupped to your webpack bundle with source maps

like here

Here you can find the details

Update! I have found that vscode does not consider variable names from source maps. Well I moved to the chrome debugger and it works well. This is the link where you can find how to configure chrome debugger, it's much easier

Doing serverside debugging in reactjs

2 Answers2

Linked