1 说明
在定制开发过程中，经常需要在前端单步调试代码，查看变量值或代码走向，这时候就需要在前端增加断点进行调试。本文介绍常用的几种添加断点的方式。
2 事件断点
在使用产品过程中，如果要定位某个功能的代码，可以选择监控浏览器事件，在界面触发事件时进入调试，一步步定位到具体的功能代码。其中浏览器事件包括：鼠标事件（click/mosemove等），键盘事件（keydown/input等），文档事件（load/unload等）......。以鼠标事件为例：
打开Chrome调试工具，设置监听鼠标单击事件：
回到Smartbi界面，在对应功能入口单击鼠标即可进入调试：
由于Smartbi封装了浏览器事件，所以一般来说，事件的入口都是相同的，在调试时，需要单步调试进入实际的方法：
调试过程中，如果出现F10按快了，不小心跳过关键代码，可通过右侧Call Stack来追踪已执行的javascript代码
3 监控元素属性
当没有对界面操作，界面元素发生变化时，或者希望精准定位元素属性发生变化的代码，可以考虑监控元素属性的变更事件。以进度条为例，在下载时，进度条会随着下载进度而改变，此时通过查看DOM元素，会发现进度条的div元素的with属性在变化：
右键进度条的DOM元素，设置监听属性变更事件。
当属性发生变化时，即可进入调试状态，定位到设置属性的具体代码：
4 快捷查找JS类
在Chrome调试工具中，可以直接使用快捷键：Ctrl+P或Ctrl+O查找当前已经加载的文件或JS类。如下图，打开Chrome调试工具后，直接按Ctrl+P查找util.js类，打开后直接添加临时断点，即可进行调试。（注意：只能查找到浏览器加载过的文件）
5 设置条件断点
在代码中添加临时断点时，可对断点设置触发条件，使其只在满足条件时才进入断点，这样可以在大量重复逻辑中，排除干扰，快速定位到指定情况进行调试。
6 其它调试技巧
Chrome调试工具还提供了很多其他特殊的调试方法，可以自行在网上查找相关文档学习。
