1 说明
在定制开发过程中，经常需要在前端单步调试代码，查看变量值或代码走向，这时候就需要在前端增加断点进行调试。本文介绍常用的几种添加断点的方式。
2，经常需要在前端单步调试代码，查看变量值或代码走向，特别是在生产环境中跟踪问题时，需要在 JavaScript 代码的指定位置添加 debugger 断点，对代码进行调试。但通常情况下，我们无法直接修改生产环境的 JS 代码并重新部署系统。这时候我们可以用下述两种方法进行调试。
| 注意 |
|---|
注意：如果要调试smartbi，最好在url中增加debug=true参数（例如http://192.168.1.10:16000/smartbi/vision/index.jsp?debug=true），否则前后端交互是加密了的。 |
2 浏览器开发者工具调试
注意：说明调试定位之前，请选好一个前端调试工具，现在各浏览器实际都自带了调试工具，网上搜索：IE 开发者工具、Chrome 开发者工具、 火狐开发者工具等等，都会有大量的教程，各开发者工具的使用都大同小异，本文以chrome 开发者工具为例。
2.1 事件断点
在使用产品过程中，如果要定位某个功能的代码，可以选择监控浏览器事件，在界面触发事件时进入调试，一步步定位到具体的功能代码。其中浏览器事件包括：鼠标事件（click/mosemove等），键盘事件（keydown/input等），文档事件（load/unload等）......。以鼠标事件为例：
打开Chrome调试工具，设置监听鼠标单击事件：
回到Smartbi界面，在对应功能入口单击鼠标即可进入调试：
由于Smartbi封装了浏览器事件，所以一般来说，事件的入口都是相同的，在调试时，需要单步调试进入实际的方法：
调试过程中，如果出现F10按快了，不小心跳过关键代码，可通过右侧Call Stack来追踪已执行的javascript代码
2.2 监控元素属性
当没有对界面操作，界面元素发生变化时，或者希望精准定位元素属性发生变化的代码，可以考虑监控元素属性的变更事件。以进度条为例，在下载时，进度条会随着下载进度而改变，此时通过查看DOM元素，会发现进度条的div元素的with属性在变化：
右键进度条的DOM元素，设置监听属性变更事件。
当属性发生变化时，即可进入调试状态，定位到设置属性的具体代码：
2.3 快捷查找JS类
在Chrome调试工具中，可以直接使用快捷键：Ctrl+P或Ctrl+O查找当前已经加载的文件或JS类。如下图，打开Chrome调试工具后，直接按Ctrl+P查找util.js类，打开后直接添加临时断点，即可进行调试。（注意：只能查找到浏览器加载过的文件）
2.4 设置条件断点
在代码中添加临时断点时，可对断点设置触发条件，使其只在满足条件时才进入断点，这样可以在大量重复逻辑中，排除干扰，快速定位到指定情况进行调试。
2.5 执行脚本调试
可以使用下面的方法在指定位置添加 debugger 断点。
1）打开浏览器"JS控制台"，执行下面的示例代码。即可在相应 js 类（比如QueryView与Dashboard，需根据实际情况修改）的相应方法（例如openQueryViewEx等方法，需根据实际情况修改）的执行前后都插入debugger断点。
| 代码块 | ||||||
|---|---|---|---|---|---|---|
| ||||||
( function(jsloader, breakPoints) {
var log = window.console ? window.console.log : function(msg){};
if (!jsloader) { log('jsloader not found!'); return; }
var clzName, Clazz, Proto, methodNames, len, i;
for (clzName in breakPoints) {
Clazz = jsloader.resolve(clzName);
if (Clazz && (Proto = Clazz.prototype)) {
methodNames = breakPoints[clzName];
for (i = 0, len = methodNames.length; i < len; i++) {
( function(methodName, Proto) {
var tmpName = '__breakpoint_' + methodName;
if (tmpName in Proto) {
Proto[methodName] = Proto[tmpName];
Proto[tmpName] = null;
delete Proto[tmpName];
log('Detach breakpoint: ' + clzName + '.prototype.' + methodName);
} else if (Proto[methodName]) {
Proto[tmpName] = Proto[methodName];
Proto[methodName] = function() {
debugger;
Proto[tmpName].apply(this, Array.prototype.slice.apply(arguments));
debugger;
};
log('Attach breakpoint: ' + clzName + '.prototype.' + methodName);
}
})(methodNames[i], Proto);
}
}
}
})(window.jsloader, {
'freequery.query.QueryView' : 'openQueryViewEx,openQueryViewHybrid,refreshData'.split(','),
'bof.decisionpanel.dashboard.Dashboard' : 'setRefreshChartSize'.split(',')
}); |
2）恢复浏览器环境：重新执行一次第3步中的代码或刷新浏览器即可。
2.6 其它调试技巧
Chrome调试工具还提供了很多其他特殊的调试方法，可以自行在网上查找相关文档学习。
3 使用Charles工具调试
具体步骤如下：
1、使用新版本的 Charles 工具。
2、点击 Tools→"No Caching..."并启用。
3、关闭并重新打开浏览器删除缓存，刷新页面。
4、在 Charles 中找到需要修改的请求，工具-》Map Local...或Map Remote...
5、在 Local Path 中填入本地文件路径，或在 Remote 中填写 localhost 8080 映射自己机器上的代码。
6、重新刷新浏览器，Charles 会自动使用本地文件替换成请求的文件内容方便调试。
7、新版本的 Charles 中还包含 Breakpoints... 功能，允许你随意修改发出的请求与返回。
另，若由于前端使用 resolveMany 导致一次性请求多个文件，这样会造成不方便修改调试，可以首先将 jsloader 设置为 Map Local 并修改
| 代码块 | ||||||
|---|---|---|---|---|---|---|
| ||||||
resolveMany : function(names) {
return;
var namesToGet = [];
......
} |
