Fix `NODE_OPTIONS='--inspect'` not running expected (#51467)
## Fixing a bug
Fixes #50489
Fixes #48767
Fixes #45697
## What?
When running `NODE_OPTIONS='--inspect' next dev`
Then go to `http://localhost:3000/`
Will display error message `WebSockets request was expected` like the following screenshot
Also the debug port for app and page still not follow by user input
When `NODE_OPTIONS='--inspect=8000' next dev` the app debug port still `54151`
## Why?
#50248 added a function `getFreePort()` and it used on debug port and HTTP server port
So conflict happen between debug and HTTP port
Then show up error `WebSockets request was expected`
Here are some references about this error:
https://stackoverflow.com/questions/49766500/websockets-request-was-expected-error-when-using-inspect-brk-option
## How?
1. `getFreePort()` should only use on HTTP server
2. Added `getDebugPort()` for read the port from user input
3. Assign port to each worker
4. Add accurate info log for each debug port, e.g.: `proxy`,`router`,`app`,`page`
When `NODE_OPTIONS='--inspect' next dev`
When `NODE_OPTIONS='--inspect=8000' next dev`
Also fix VSCode debugger
It is worth noting that
We can't hit the breakpoint on the first execution
because the file does not exist there yet or was not compiled
In most cases, the breakpoint can only be triggered normally during the second execution
Closes NEXT-1179
Closes NEXT-517
Co-authored-by: Shu Ding <3676859+shuding@users.noreply.github.com>
