Debugging a Cocos Creator Project with VS Code and Chrome

1. Install the JavaScript Debugger (Nightly) extension in VS Code if your VS Code version does not already provide the required browser-debugging support.

2. Add the following debugging configuration to .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Cocos Chrome",
      "url": "http://localhost:7456",
      "sourceMaps": true,
      "userDataDir": "${workspaceRoot}/.vscode/chrome",
      "diagnosticLogging": false,
      "webRoot": "${workspaceRoot}",
      "sourceMapPathOverrides": {
        "assets/*": "${workspaceRoot}/assets/*"
      },
      "runtimeArgs": ["--disable-web-security"],
      "pathMapping": {
        "/preview-scripts/assets": "${workspaceRoot}/temp/quick-scripts/assets",
        "/": "${workspaceRoot}"
      },
      "runtimeExecutable": "C:/Program Files/Google/Chrome/Application/chrome.exe"
    }
  ]
}

Update url if the Cocos Creator preview server uses another port, and replace runtimeExecutable with the actual path to Chrome on your computer.

--disable-web-security weakens browser security for that debug profile. Use it only when local cross-origin testing genuinely requires it, keep the dedicated userDataDir, and do not use that browser instance for ordinary browsing or authenticated services.