美文网首页
Laya开发-VSCode断点调试

Laya开发-VSCode断点调试

作者: xzhuan | 来源:发表于2021-03-18 18:18 被阅读0次

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"
 ]
}
  1. 修改.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/*"
           }        
       }
   ]
}
  1. 修改.vscode/settings.json
{
   "search.exclude": {
       "**/src": true,
       "**/libs": true,
       "**/laya": true
   }
}
  1. 编辑器 项目设置如下图 开启调试辅助工具


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

相关文章

网友评论

      本文标题:Laya开发-VSCode断点调试

      本文链接:https://www.haomeiwen.com/subject/bhspcltx.html