Chrome debugger for vscode （react 使用vscode 调试 ：debugger for chrome 被弃用， 改用 JavaScript Debugger）

https://github.com/openvinotoolkit/cvat/issues/3525：Chrome debugger for vs-code is deprecated

 

Chrome debugger for vs-code is deprecated now, so we should move to the JavaScript Debugger

Possible Solution

Change vs-code tasks for compatibility with JavaScript Debugger

how ?

According to the doc, changing the type of launch target in launch.json will be enough. Other configs should work fine as is.

https://github.com/microsoft/vscode-js-debug

Taking help from the below link of changing vs-code tasks for compatibility with Javascript Debugger.

https://code.visualstudio.com/docs/editor/debugging

So changing the launch taget can solve the problem.

If you go back to the File Explorer view (Ctrl+Shift+E), you'll see that VS Code has created a .vscode folder and added the launch.json file to your workspace.
Variable substitution

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

VS Code makes commonly used paths and other values available as variables and supports variable substitution inside strings in launch.json. This means that you do not have to use absolute paths in debug configurations. For example, ${workspaceFolder} gives the root path of a workspace folder, ${file} the file open in the active editor, and ${env:Name} the environment variable 'Name'. You can see a full list of predefined variables in the Variables Reference or by invoking IntelliSense inside the launch.json string attributes.

Platform Specific Property

Launch.json supports defining values (for example, arguments to be passed to the program) that depend on the operating system where the debugger is running. To do so, put a platform-specific literal into the launch.json file and specify the corresponding properties inside that literal.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

This may work. For further you can refer to the doc.

 

 

{
    // 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": [    
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

https://github.com/microsoft/vscode-js-debug/blob/main/OPTIONS.md

　

pwa-chrome: attach

 

address

IP address or hostname the debugged browser is listening on.

 

Default value:

"localhost"

 

browserAttachLocation

Forces the browser to attach in one location. In a remote workspace (through ssh or WSL, for example) this can be used to attach to a browser on the remote machine rather than locally.

 

Default value:

"workspace"

 

cascadeTerminateToConfigurations

A list of debug sessions which, when this debug session is terminated, will also be stopped.

 

Default value:

[]

 

customDescriptionGenerator

Customize the textual description the debugger shows for objects (local variables, etc...). Samples:
1. this.toString() // will call toString to print all objects
2. this.customDescription ? this.customDescription() : defaultValue // Use customDescription method if available, if not return defaultValue
3. function (def) { return this.customDescription ? this.customDescription() : def } // Use customDescription method if available, if not return defaultValue

 

Default value:

undefined

 

customPropertiesGenerator

Customize the properties shown for an object in the debugger (local variables, etc...). Samples:
1. { ...this, extraProperty: '12345' } // Add an extraProperty 12345 to all objects
2. this.customProperties ? this.customProperties() : this // Use customProperties method if available, if not use the properties in this (the default properties)
3. function () { return this.customProperties ? this.customProperties() : this } // Use customDescription method if available, if not return the default properties

Deprecated: This is a temporary implementation of this feature until we have time to implement it in the way described here: microsoft/vscode#102181

 

Default value:

undefined

 

disableNetworkCache

Controls whether to skip the network cache for each request

 

Default value:

true

 

enableContentValidation

Toggles whether we verify the contents of files on disk match the ones loaded in the runtime. This is useful in a variety of scenarios and required in some, but can cause issues if you have server-side transformation of scripts, for example.

 

Default value:

true

 

inspectUri

Format to use to rewrite the inspectUri: It's a template string that interpolates keys in {curlyBraces}. Available keys are:
- url.* is the parsed address of the running application. For instance, {url.port}, {url.hostname}
- port is the debug port that Chrome is listening on.
- browserInspectUri is the inspector URI on the launched browser
- browserInspectUriPath is the path part of the inspector URI on the launched browser (e.g.: "/devtools/browser/e9ec0098-306e-472a-8133-5e42488929c2").
- wsProtocol is the hinted websocket protocol. This is set to wss if the original URL is https, or ws otherwise.

 

Default value:

undefined

 

outFiles

If source maps are enabled, these glob patterns specify the generated JavaScript files. If a pattern starts with ! the files are excluded. If not specified, the generated code is expected in the same directory as its source.

 

Default value:

[
  "${workspaceFolder}/**/*.js",
  "!**/node_modules/**"
]

 

outputCapture

From where to capture output messages: the default debug API if set to console, or stdout/stderr streams if set to std.

 

Default value:

"console"

 

pathMapping

A mapping of URLs/paths to local folders, to resolve scripts in the Browser to scripts on disk

 

Default value:

{}

 

pauseForSourceMap

Whether to wait for source maps to load for each incoming script. This has a performance overhead, and might be safely disabled when running off of disk, so long as rootPath is not disabled.

 

Default value:

true

 

perScriptSourcemaps

Whether scripts are loaded individually with unique sourcemaps containing the basename of the source file. This can be set to optimize sourcemap handling when dealing with lots of small scripts. If set to "auto", we'll detect known cases where this is appropriate.

 

Default value:

"auto"

 

port

Port to use to remote debugging the browser, given as --remote-debugging-port when launching the browser.

 

Default value:

0

 

resolveSourceMapLocations

A list of minimatch patterns for locations (folders and URLs) in which source maps can be used to resolve local files. This can be used to avoid incorrectly breaking in external source mapped code. Patterns can be prefixed with "!" to exclude them. May be set to an empty array or null to avoid restriction.

 

Default value:

null

 

restart

Whether to reconnect if the browser connection is closed

 

Default value:

false

 

showAsyncStacks

Show the async calls that led to the current call stack.

 

Default value:

true

 

skipFiles

An array of file or folder names, or path globs, to skip when debugging.

 

Default value:

[]

 

smartStep

Automatically step through generated code that cannot be mapped back to the original source.

 

Default value:

true

 

sourceMapPathOverrides

A set of mappings for rewriting the locations of source files from what the sourcemap says, to their locations on disk.

 

Default value:

{
  "webpack:///./~/*": "${webRoot}/node_modules/*",
  "webpack:////*": "/*",
  "webpack://?:*/*": "${webRoot}/*",
  "webpack:///([a-z]):/(.+)": "$1:/$2",
  "meteor://app/*": "${webRoot}/*"
}

 

sourceMapRenames

Whether to use the "names" mapping in sourcemaps. This requires requesting source content, which can be slow with certain debuggers.

 

Default value:

true

 

sourceMaps

Use JavaScript source maps (if they exist).

 

Default value:

true

 

targetSelection

Whether to attach to all targets that match the URL filter ("automatic") or ask to pick one ("pick").

 

Default value:

"automatic"

 

timeout

Retry for this number of milliseconds to connect to Node.js. Default is 10000 ms.

 

Default value:

10000

 

timeouts

Timeouts for several debugger operations.

 

Default value:

{}

 

trace

Configures what diagnostic output is produced.

 

Default value:

false

 

url

Will search for a tab with this exact url and attach to it, if found

 

Default value:

null

 

urlFilter

Will search for a page with this url and attach to it, if found. Can have * wildcards.

 

Default value:

""

 

vueComponentPaths

A list of file glob patterns to find *.vue components. By default, searches the entire workspace. This needs to be specified due to extra lookups that Vue's sourcemaps require in Vue CLI 4. You can disable this special handling by setting this to an empty array.

 

Default value:

[
  "${workspaceFolder}/**/*.vue",
  "!**/node_modules/**"
]

 

webRoot

This specifies the workspace absolute path to the webserver root. Used to resolve paths like /app.js to files on disk. Shorthand for a pathMapping for "/"

 

Default value:

"${workspaceFolder}"