Laya开发-VSCode断点调试

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

1. VSCode添加插件 Debugger for Chrome

   
   

2. 修改部分项目文件
   参考Laya官网
   2.1 修改 .laya/compile.js
   找到sourceMap: false 修改为 sourcemap: true
   一共有两个sourcemap的地方，都要修改设置为true 。
   2.2 修改 .laya/launch.json
   找到"sourceMaps": false, 修改为 "sourceMaps": true,
   这里也有两处，一处是layaAir调试，一处是chrome调试

3. 修改 src/tsconfig.json

{
 "compilerOptions": {
   "module": "es6",
   "target": "es6",
   "noEmitHelpers": true,
   "sourceMap": true
 },
 "exclude": [
   "node_modules"
 ]
}

4. 修改.vscode/launch.json

{
   // 使用 IntelliSense 了解相关属性。 
   // 悬停以查看现有属性的描述。
   // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [ 
       {
           "name": "chrome调试",
           "type": "chrome",
           "request": "launch",
           "file": "${workspaceRoot}/bin/index.html",
           "runtimeArgs": [
               "--allow-file-access-from-files",
               "--disable-web-security"
           ],
           "sourceMaps": true,
           "webRoot": "${workspaceRoot}",
           "userDataDir": "${workspaceRoot}/.laya/chrome",
           "sourceMapPathOverrides": {
               "src/*": "${workspaceRoot}/src/*"
           }        
       }
   ]
}

5. 修改.vscode/settings.json

{
   "search.exclude": {
       "**/src": true,
       "**/libs": true,
       "**/laya": true
   }
}

6. 编辑器 项目设置如下图 开启调试辅助工具

   
   

7. 注意
   7.1 打断点， F5调试运行即可
   7.2 每次修改代码后，需要在编辑器F8编译后 才会更新调试的代码