Nanfeng

Notes on software development, code, and curious ideas

Debug Cocos Creator Web with VS Code, Chrome and launch.json

In
Install the VS Code JavaScript debugger, configure launch.json for a Cocos Creator browser preview, set breakpoints in Chrome, and troubleshoot ports and paths.

  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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "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.

+