Cocos Creator开发 Vscode+chrome浏览器调试

xzhuan原创稿件,转载请注明出处!

1. vscode 安装插件 Debugger for Chrome
2. 调试配置 launch.json 如下

{
   // 使用 IntelliSense 了解相关属性。 
   // 悬停以查看现有属性的描述。
   // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
   "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}"
           }
       }
   ]
}
注意： 跨域那个 不需要可以注释

3. vscode中 F5 启动调试

   
   

4. 如上图 控制台看日志，源代码那里添加 断点调试
   搞定~~~