如何调试定位

接到需求,如果判断产品不支持需要定制,首先得判断是在哪里插入什么功能,前面介绍过,系统是以js业务逻辑组件方式按需加载的,那理论需要在哪里插入对应功能,就需要先找到源功能对应的js组件,下面从几个常用场景说明如何调试定位修改。

更改样式、图片之类

如果用户需求是:我要把xx地方的文字颜色改为xx,我要把这个图片替换下,因为扩展包中提供了更改样式和替换图片方法,具体请见替换Smartbi文件,那是如何找到对应的样式或图片,从而进行修改的呢?

1)、样式查找方法

替换Smartbi文件中修改组合分析报表工具栏中的刷新图标为例子,使用浏览器开发者工具的审查元素,找到刷新按钮使用的样式为:queryview-toolbar-refresh

有时候一个样式控制,譬如颜色,也许是其父元素的样式继承下来的,您需要确定是哪个样式起作用,这时可以在开发者工具右侧styles视图启用、删除或增加样式确认的,确认好了以后再在样式文件中修改。

 

2)、图片查找方法

图片查找方法和样式查找方法类似,主要确认使用的是哪个图片,那遇到类似上面图片因为比较小,会被转成base64返回,压根不知道是哪个路径怎么办呢?

这时候,您可以点击上图中样式旁边的  bof_merge.css.jsp:1095(点开后效果见下图),这个意思是queryview-toolbar-refresh样式在bof_merge.css.jsp中的1095行,上文说过系统中的css都是通过这个jsp合并一起返回的,但是他会在合并文件前都会注明这段css存于哪个文件(譬如:/** /vision/css/base.css */),搜索css,只要找到1095行之前的css文件标记,就知道存在于哪个css文件,然后取到war包中找到对应css文件,搜索对应样式就知道图片存于哪个目录然后替换。

当然还有更简单粗暴的方法,直接在war包中全文搜索对应的样式(仅搜索*.css文件即可)。

更改js组件之类

如果要更改现有js组件的内容、逻辑、布局或布局上文字,那就需要找到对应的js组件,找到对应js之后就可以参考如何修改Smartbi JS文件修改,主要有以下几种定位方式:

上文提过,smartbi是按需加载js组件的,且每个组件基本都会有对应的同名html或.template文件,并且命名都有规范,具有相应功能意义,那实际要看功能对应的js组件是哪个,只要在加载那个功能之前,监控网络请求,基本就能定位到对应的js组件。

譬如想查找业务主题编辑界面对应的js组件,那就可以打开chrome 开发者工具,切换到网络,在打开一个业务主题之前清空网络内容,然后再打开一个业务主题,从请求信息中就能大概猜出是哪个js(有时因为某个js组件太常用会事先加载网路请求中也许找不到(但布局html文件基本一定是要渲染时才加载的),这时可能需要依赖相应的布局html文件名猜测对应的js组件):

单步调试进去,这里需要看懂系统中EventAgent的原理,否则单步调试您可能会碰到困难,这里上两张图:

调试找到对应的代码后,回看堆栈:

更改js组件布局(html)

有时希望在某个界面添加或删除一个属性,这时可能涉及到修改界面,查找界面对应html和上文的更改js组件之类类似,而且通常更改了布局相应也会修改对应的js,只是布局修改方式通常都是找到对应.html或.template,然后扩展包中同目录下放同名文件即可替换,不过如果改动比较少,这种方式也尽量少用,因为涉及到升级风险(升级了新产品,新产品布局或许已发生变化,结果因为扩展包优先,升后还是用扩展包的),所以能用js代码动态添加dom元素的也可以考虑。

回到一开始的问题,本文相应的都给了一些答案,这里还没有怎么介绍到扩展包的其他功能,仅作为接触扩展包开发后需要了解的一些基础信息,辅助解决项目特定需求问题。