1 说明
接到需求，如果判断是产品不支持的，需要定制，首先得判断是在哪里插入什么功能，或者需要修改什么文件，因此我们需要先定位到具体的JS组件，然后再根据需要进行修改。下面从几个常用场景说明如何定位。
| 注意 |
|---|
注意：说明调试定位之前，请选好一个前端调试工具，现在各浏览器实际都自带了调试工具，网上搜索：IE 开发者工具、Chrome 开发者工具、 火狐开发者工具等等，都会有大量的教程，各开发者工具的使用都大同小异，本文以chrome 开发者工具为例。 |
2 JS组件的定位
如果要更改现有js组件的内容、逻辑、布局或布局上文字，那就需要找到对应的js组件，找到对应js之后就可以参考如果要更改现有JS组件的内容、逻辑、布局或布局上文字，那就需要找到对应的JS组件，找到对应js之后就可以参考修改Smartbi JS文件修改，主要有以下几种定位方式：
2.1 调试快捷键
Smartbi 提供了很多操作快捷键，可以便捷地定位代码位置，具体可见：调试快捷键。
2.2 监控网络请求
使用开发者工具中的网络功能监控网络请求，根据请求js名称或html布局文件名称猜测。
Smartbi是按需加载js组件的，且每个组件基本都会有对应的同名html或.template文件，并且命名都有规范，具有相应功能意义，那实际要看功能对应的JS组件是哪个，只要在加载那个功能之前，监控网络请求，基本就能定位到对应的JS组件。
以查找创建用户功能代码为例：
1）先刷新浏览器，保证是第一次打开创建用户界面（再次打开可能会有缓存而不再请求文件）。打开Chrome调试工具，在点击“新建用户”按钮之前，切换到Network（网络）标签页，先清空所有历史信息，然后点击“新建用户”按钮：
2）查找请求的文件，根据名称大概判断UserCreateAction.js文件接近新建用户功能：
3）打开文件，在入口方法处添加debugger即可调试进入，判断是否为新建用户功能代码：
2.3 监控RMIServlet请求
Smartbi的前后端交互主要通过RMIServlet请求，当功能存在前后端交互时，可通过分析RMIServlet的请求内容，快速定位到前后端代码。（注意：要观察前后的端数据交互时，需要在URL上添加debug=true参数，否则前后端交互数据会被加密。）
以查找灵活分析的保存逻辑为例：
1）打开Chrome调试工具，切换到Network，在点击“保存”按钮前，先清空历史请求记录。然后再点击“保存”按钮：
2）页面提示报表“保存成功”，可以发现灵活分析的保存操作会发出三条RMIServlet请求，即保存操作发生了三次与服务器的交互动作。逐一查看RMIServlet的请求内容，判断查找实际的保存方法：（此过程也可以知道灵活分析保存方法的实际执行过程）。
3）通过ClientReportService类名，与overwriteQuery方法名，即可直接定位到后端代码的逻辑。
注意：当通过类名无法直接查找到Module类时，则代表实际Module类的名称被重新定义过，此时可查找Smartbi.Application\src\web\WEB-INF\applicationContext.xml文件查找类名，找到Module类的实际名称，如：
此时，如果需要同时定位前端代码，则可以使用overwriteQuery方法名，进行全文搜索*.js文件：
根据查找结果，即可找到前端代码：
2.4 特殊属性查找
在定制开发过程在，如果需要知道某个功能界面的逻辑，但不想用断点调试，或调试过程中代码隐藏较深，调试起来效率很慢，可以尝试查找界面上的关键DOM元素（即一般只会出现在该功能界面上的元素），看看是否存在特殊的属性，如bofid、class等属性，然后进行全文搜索，看看能否查找到界面对应的HTML模板文件，如果查找到即可确定对应的JS代码，在JS入口方法处添加debugger即可进行调试。
之所以可以这么做是因为我们产品在设计上，一般遵循HTML代码与JS代码分离的规则，而HTML对应的JS代码在命名上会保持一致，如LoginView.html --> LoginView.js，ExcelImportView.html --> ExcelImportView.js。因此查询元素属性时可先查询*.html, *.template（HTML模板文件的两种格式），查询不到，则可能该功能界面没有使用模板，可能是JS代码动态生成的，此时可再考虑用属性值查找*.js。
2.
34.1 示例：查找HTML模板
以查找Excel导入模板功能为例：
复制bofid="ssreporttemplate"，全文查找*.template, *.html文件：
查找完成后，发现可以唯一查找到一条匹配记录：
打开查找到的文件，比对模板的结构与实际界面上的结构是否一致。
2.
34.2 示例：查找JS文件
以查找定制管理快捷入口界面功能代码为例：
先复制class="superviseDefaultCommand_block"，全文搜索*.template, *.html文件，会发现没有搜索到结果，此时可考虑该class是JS代码动态赋予的，考虑用属性值全文搜索*.js：
查找完成后，发现可以唯一查找到一条匹配记录，打开文件后，即可查看功能的代码逻辑，如需调试，在方法入口处添加debugger即可：
2.4 监控RMIServlet请求
Smartbi的前后端交互主要通过RMIServlet请求，当功能存在前后端交互时，可通过分析RMIServlet的请求内容，快速定位到前后端代码。（注意：要观察前后的端数据交互时，需要在URL上添加debug=true参数，否则前后端交互数据会被加密。）
以查找灵活分析的保存逻辑为例：
1）打开Chrome调试工具，切换到Network，在点击“保存”按钮前，先清空历史请求记录。然后再点击“保存”按钮：
2）页面提示报表“保存成功”，可以发现灵活分析的保存操作会发出三条RMIServlet请求，即保存操作发生了三次与服务器的交互动作。逐一查看RMIServlet的请求内容，判断查找实际的保存方法：（此过程也可以知道灵活分析保存方法的实际执行过程）。
3）通过ClientReportService类名，与overwriteQuery方法名，即可直接定位到后端代码的逻辑。
注意：当通过类名无法直接查找到Module类时，则代表实际Module类的名称被重新定义过，此时可查找Smartbi.Application\src\web\WEB-INF\applicationContext.xml文件查找类名，找到Module类的实际名称，如：
此时，如果需要同时定位前端代码，则可以使用overwriteQuery方法名，进行全文搜索*.js文件：
根据查找结果，即可找到前端代码：
2.5 快捷查找JS类
在Chrome调试工具中，可以直接使用快捷键：Ctrl+P或Ctrl+O查找当前已经加载的文件或JS类。如下图，打开Chrome调试工具后，直接按Ctrl+P查找util.js类，打开后直接添加临时断点，即可进行调试。（注意：只能查找到浏览器加载过的文件）
