xzhuan原創(chuàng)稿件,轉(zhuǎn)載請注明出處!

1. VSCode添加插件 Debugger for Chrome

   
   

2. 修改部分項目文件
   參考Laya官網(wǎng)
   2.1 修改 .laya/compile.js
   找到sourceMap: false 修改為 sourcemap: true
   一共有兩個sourcemap的地方，都要修改設置為true 。
   2.2 修改 .laya/launch.json
   找到"sourceMaps": false, 修改為 "sourceMaps": true,
   這里也有兩處，一處是layaAir調(diào)試，一處是chrome調(diào)試

3. 修改 src/tsconfig.json

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

4. 修改.vscode/launch.json

{
   // 使用 IntelliSense 了解相關屬性。 
   // 懸停以查看現(xiàn)有屬性的描述。
   // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [ 
       {
           "name": "chrome調(diào)試",
           "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. 編輯器 項目設置如下圖 開啟調(diào)試輔助工具

   
   

7. 注意
   7.1 打斷點， F5調(diào)試運行即可
   7.2 每次修改代碼后，需要在編輯器F8編譯后 才會更新調(diào)試的代碼