1. 快捷键
1.1. 定位对话框JS类（Ctrl + Shift + F4 ）
系统中每个对话框，都会对应一个JS组件，当某个对话框处于打开状态时，可通过快捷键：Ctrl + Shift + F4 显示当前对话框对应的JS类名。效果如下：
取到JS类名之后，即可定位到JS文件。如需调试，在文件中找到对应的入口方法，添加debugger即可进行调试。
1.2. 定位资源树JS类（鼠标中键）
系统中存在很多的资源树，这些资源树都会对应一个资源树组件，当在“资源树”的“展开/收起”图标位置处点击鼠标“中键”，可以查看该资源树及树节点对应的类名信息，效果如下：
同理1.1，取到JS类名之后，即可定位到JS文件。如需调试，在文件中找到对应的入口方法，添加debugger即可进行调试。
2. 断点调试
2.1. 事件断点
在使用产品过程中，如果要定位某个功能的代码，可以选择监控浏览器事件，在界面触发事件时进入调试，一步步定位到具体的功能代码。其中浏览器事件包括：鼠标事件（click/mosemove等），键盘事件（keydown/input等），文档事件（load/unload等）......。以鼠标事件为例：
打开Chrome调试工具，设置监听鼠标单击事件：
回到Smartbi界面，在对应功能入口单击鼠标即可进入调试：
由于Smartbi封装了浏览器事件，所以一般来说，事件的入口都是相同的，在调试时，需要单步调试进入实际的方法：
调试过程中，如果出现F10按快了，不小心跳过关键代码，可通过右侧Call Stack来追踪已执行的javascript代码
2.2. 监控元素属性
当没有对界面操作，界面元素发生变化时，或者希望精准定位元素属性发生变化的代码，可以考虑监控元素属性的变更事件。以进度条为例，在下载时，进度条会随着下载进度而改变，此时通过查看DOM元素，会发现进度条的div元素的with属性在变化：
右键进度条的DOM元素，设置监听属性变更事件。
当属性发生变化时，即可进入调试状态，定位到设置属性的具体代码：
2.3. 快捷查找JS类
在Chrome调试工具中，可以直接使用快捷键：Ctrl+P或Ctrl+O查找当前已经加载的文件或JS类。如下图，打开Chrome调试工具后，直接按Ctrl+P查找util.js类，打开后直接添加临时断点，即可进行调试。（注意：只能查找到浏览器加载过的文件）
2.4. 设置条件断点
在代码中添加临时断点时，可对断点设置触发条件，使其只在满足条件时才进入断点，这样可以在大量重复逻辑中，排除干扰，快速定位到指定情况进行调试。
2.5. 其它调试技巧
Chrome调试工具还提供了很多其他特殊的调试方法，可以自行在网上查找相关文档学习。
3. HTML元素查找
当需要知道某个功能界面的逻辑时，如果懒得用断点调试，或调试过程中代码隐藏较深，调试起来效率很慢，可以尝试查找界面上的关键DOM元素（即一般只会出现在该功能界面上的元素），看看是否存在特殊的属性，如bofid、class等属性，然后进行全文搜索，看看能否查找到界面对应的HTML模板文件，如果查找到即可确定对应的JS代码，在JS入口方法处添加debugger即可进行调试。
之所以可以这么做是因为我们产品在设计上，一般遵循HTML代码与JS代码分离的规则，而HTML对应的JS代码在命名上会保持一致，如LoginView.html --> LoginView.js，ExcelImportView.html --> ExcelImportView.js。
因此查询元素属性时可先查询*.html, *.template（HTML模板文件的两种格式），查询不到，则可能该功能界面没有使用模板，可能是JS代码动态生成的，此时可再考虑用属性值查找*.js。
3.1. 示例：查找HTML模板
以查找Excel导入模板功能为例：
复制bofid="ssreporttemplate"，全文查找*.template, *.html文件：
查找完成后，发现可以唯一查找到一条匹配记录：
打开查找到的文件，比对模板的结构与实际界面上的结构是否一致。
3.2. 示例：查找JS文件
以查找定制管理快捷入口界面功能代码为例：
先复制class="superviseDefaultCommand_block"，全文搜索*.template, *.html文件，会发现没有搜索到结果，此时可考虑该class是JS代码动态赋予的，考虑用属性值全文搜索*.js：
查找完成后，发现可以唯一查找到一条匹配记录，打开文件后，即可查看功能的代码逻辑，如需调试，在方法入口处添加debugger即可：
4. 监控请求
Smartbi是按需加载JS组件的，在首次打开某个功能界面时，会加载该功能的所需的JS文件，及其对应的同名html或template模板文件，并且文件命名具有相应功能意义。据此特征，可在首次打开某个功能界面时，监控网络，查看具体请求的文件，根据文件名称，大致判断该功能对应的JS文件。
以查找创建用户功能代码为例：
先刷新浏览器，保证是第一次打开创建用户界面（再次打开可能会有缓存而不再请求文件）。打开Chrome调试工具，在点击“新建用户”按钮之前，切换到Network（网络）标签页，先清空所有历史信息，然后点击“新建用户”按钮：
查找请求的文件，根据名称大概判断UserCreateAction.js文件接近新建用户功能：
打开文件，在入口方法处添加debugger即可调试进入，判断是否为新建用户功能代码：
5. 监控RMIServlet请求
Smartbi的前后端交互主要通过RMIServlet请求，当功能存在前后端交互时，可通过分析RMIServlet的请求内容，快速定位到前后端代码。（注意：要观察前后的端数据交互时，需要在URL上添加debug=true参数，否则前后端交互数据会被加密。）
以查找灵活分析的保存逻辑为例：
与4.监控请求步骤一样，打开Chrome调试工具，切换到Network，在点击“保存”按钮前，先清空历史请求记录。然后再点击“保存”按钮：
页面提示报表“保存成功”，可以发现灵活分析的保存操作会发出三条RMIServlet请求，即保存操作发生了三次与服务器的交互动作。逐一查看RMIServlet的请求内容，判断查找实际的保存方法：（此过程也可以知道灵活分析保存方法的实际执行过程）
通过ClientReportService类名，与overwriteQuery方法名，即可直接定位到后端代码的逻辑。
注意：当通过类名无法直接查找到Module类时，则代表实际Module类的名称被重新定义过，此时可查找Smartbi.Application\src\web\WEB-INF\applicationContext.xml文件查找类名，找到Module类的实际名称，如：
此时，如果需要同时定位前端代码，则可以使用overwriteQuery方法名，进行全文搜索*.js文件：
根据查找结果，即可找到前端代码：
