页面树结构
转至元数据结尾
转至元数据起始

正在查看旧版本。 查看 当前版本.

与当前比较 查看页面历史

版本 1 下一个 »


1 说明

    在定制开发过程在,如果需要知道某个功能界面的逻辑,但不想用断点调试,或调试过程中代码隐藏较深,调试起来效率很慢,可以尝试查找界面上的关键DOM元素(即一般只会出现在该功能界面上的元素),看看是否存在特殊的属性,如bofid、class等属性,然后进行全文搜索,看看能否查找到界面对应的HTML模板文件,如果查找到即可确定对应的JS代码,在JS入口方法处添加debugger即可进行调试。

    之所以可以这么做是因为我们产品在设计上,一般遵循HTML代码与JS代码分离的规则,而HTML对应的JS代码在命名上会保持一致,如LoginView.html --> LoginView.jsExcelImportView.html --> ExcelImportView.js。因此查询元素属性时可先查询*.html, *.template(HTML模板文件的两种格式),查询不到,则可能该功能界面没有使用模板,可能是JS代码动态生成的,此时可再考虑用属性值查找*.js

    本文以实际的示例说明如何使用这两种方式进行代码定位。

2 示例:查找HTML模板

    以查找Excel导入模板功能为例:

    

    复制bofid="ssreporttemplate",全文查找*.template, *.html文件:

    

    查找完成后,发现可以唯一查找到一条匹配记录:

    

    打开查找到的文件,比对模板的结构与实际界面上的结构是否一致。

    

     

2 示例:查找JS文件

     以查找定制管理快捷入口界面功能代码为例:

    

    先复制class="superviseDefaultCommand_block",全文搜索*.template, *.html文件,会发现没有搜索到结果,此时可考虑该class是JS代码动态赋予的,考虑用属性值全文搜索*.js

    

    查找完成后,发现可以唯一查找到一条匹配记录,打开文件后,即可查看功能的代码逻辑,如需调试,在方法入口处添加debugger即可:

    

  • 无标签