Waf2框架前端调试技巧

一、调试模式与运行模式

EAS前端运行模式分为运行模式和Debug模式。

1.1 运行模式: 每个界面的JS都会被打包并且混淆，并将多个JS压缩到一个链接中。

1.2 Debug模式: JS的加载是单个加载的，如果想调试某个页面，可以在URL中加上&debug=true这样所有页面都以DEBUG模式加载JS。

注意: 前端调试请在debug模式下调试即url中需要有debug=true参数（调试快捷键ctrl shift alt d）。

二、静态化缓存与文件缓存

单据在第一次打开之后，会生成对应的文件缓存（存放在文件目录）以及静态化缓存（存放数据库）。当单据再次打开时会优先加载缓存的内容。

文件缓存存储目录：server\deploy\easweb.ear\eas_web.war\webviews\webframework\temp。

静态化缓存存储表：t_dyn_staticwebpage.

注意: 为了避免缓存对调试的影响，url中可以加上renderModel=client参数，可以用快捷键打开进行调试。

三、标准页面与扩展页面

分析问题时，需要先确定加载的标准页面还是扩展页面，这个涉及到排查问题的根源，扩展页面涉及到二开内容，可能会对标准产品产生较大影响，所有出现程序错误的概率要高很多。

那么如何确定出现问题的页面是标准页面还是扩展页面？

1. ctrl shift alt d调试打开页面，获取页面url里的uipk参数后缀；
2. F12打开调试工具，ctrl+p搜索此后缀，如果搜索到了扩展js文件，则说明为扩展页面；                                                                                                                                                                 
3. 反启用扩展方案后，再次进入页面为标准页面，可以观察分析得出是标准页面出现问题还是扩展页面出现问题。

四，调试技巧

调试技巧1——事件总线调试

在waf2框架的页面加载以及事件处理过程中，用到了事件总线进行事件管理，通过事件总线，可以方便的进行调试。

事件总线JS：ctrl p搜索文件eventbus.js

事件总线触发方法：firevent.

通过事件总线，可以获取到程序异常产生的大致范围在哪个事件，然后再去详细分析这个事件所执行到的代码，最终定位问题。

调试技巧2——监听DOM

Chrome浏览器：右键页面上的dom元素，可以发现有个Break On选项，可以监听dom变化，当dom变化时可以再观察堆栈定位dom变化产生的原因，最终定位问题。

调试技巧3——监听浏览器事件

在不清楚代码逻辑的情况下，可以采用此方式逐层跟踪代码，最终获取代码实现之处。

调试技巧4——监听请求

对异步请求设置监听，每次请求时都会进入断点，然后根据堆栈可以看出请求来源，再根据请求来源分析参数来定位问题原因。

调试技巧5——样式分析

样式优先级:

!important样式优先级 > 行内样式 > 样式类

样式类之间样式优先级根据样式权重决定。

如何观察dom元素实际使用的样式：

通过dom元素界面看computed页签可以确定当前加载的样式。

鼠标移上去才能出现的样式可以模拟操作来进行

五，调试工具与快捷键

Ctrl shift alt s 打开web实用开发功能

Ctrl shift alt d 打开调试界面

Ctrl shift alt m 打开性能分析工具

Ctrl shift alt p 清除文件缓存

Ctrl shift alt c 打开页面全局配置

注：部分版本可能不支持

六，常见调试入口

6.1轻提示类信息调试入口 wafmsgarea.js  show方法

6.2 弹窗类提示信息调试入口 wafmsgBox.js  showConfirm等方法

6.3 表格格式化调试入口grid.waf.js  $.fn.fmatter

6.4 表格刷新调试入口 grid.wafbase.js  搜索‘realoadGrid’

6.5 通用查询过滤条件调试入口 wafBizCommonQuery.js  reloadDataGrid方法

6.6 表单校验调试入口 webviews/webframework/ctrls/validator/js/validator.js  validateForm方法

6.7 页面控件渲染入口 /webframework/core/waf/pagerBuilder.js  _buildComponent方法

6.8 F7控件创建调试入口 webviews/bs_f7_web/f7/resources/js/jquery.ui.f7.js  _create方法

6.9 F7控件打开调试入口 webviews/bs_f7_web/f7/resources/js/jquery.ui.f7.js  open方法