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

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

与当前比较 查看页面历史

版本 1 下一个 »

    

1 事件断点

    在使用产品过程中,如果要定位某个功能的代码,可以选择监控浏览器事件,在界面触发事件时进入调试,一步步定位到具体的功能代码。其中浏览器事件包括:鼠标事件(click/mosemove等),键盘事件(keydown/input等),文档事件(load/unload等)......。以鼠标事件为例:

    打开Chrome调试工具,设置监听鼠标单击事件:

    

    回到Smartbi界面,在对应功能入口单击鼠标即可进入调试:

    

    由于Smartbi封装了浏览器事件,所以一般来说,事件的入口都是相同的,在调试时,需要单步调试进入实际的方法:

    

        

    


    调试过程中,如果出现F10按快了,不小心跳过关键代码,可通过右侧Call Stack来追踪已执行的javascript代码

    

监控元素属性

    当没有对界面操作,界面元素发生变化时,或者希望精准定位元素属性发生变化的代码,可以考虑监控元素属性的变更事件。以进度条为例,在下载时,进度条会随着下载进度而改变,此时通过查看DOM元素,会发现进度条的div元素的with属性在变化:

    

    右键进度条的DOM元素,设置监听属性变更事件。

    

     当属性发生变化时,即可进入调试状态,定位到设置属性的具体代码:

     

3 快捷查找JS

    在Chrome调试工具中,可以直接使用快捷键:Ctrl+P或Ctrl+O查找当前已经加载的文件或JS类。如下图,打开Chrome调试工具后,直接按Ctrl+P查找util.js类,打开后直接添加临时断点,即可进行调试。(注意:只能查找到浏览器加载过的文件)

    

     

设置条件断点

     在代码中添加临时断点时,可对断点设置触发条件,使其只在满足条件时才进入断点,这样可以在大量重复逻辑中,排除干扰,快速定位到指定情况进行调试。

    

    

    

5 其它调试技巧

     Chrome调试工具还提供了很多其他特殊的调试方法,可以自行在网上查找相关文档学习。

  • 无标签