一， 调试模式与运行模式 

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方法