wex5 调试java_WeX5 JS代码调试

core.min.js

lib/base/viewComponent.js

lib/base/modelComponent.js

lib/base/bindComponent.js

components/justep/data/data.js

components/justep/data/js/rules.js

components/justep/model/model.js

components/justep/model/model.config.js

components/justep/window/window.js

file标签里面就是要合并的js文件，可以看到data组件的js文件被合并到common.min.js文件中了。

2、删除合并后的min.js文件，将使用原始js文件

在加入购物车按钮的单击事件中调用了data组件的find方法，如果要调试data组件的find方法，就需要先删除common.min.js，这样common.min.js所合并的那些js文件就都可以调试了。

将/UI2/system/common.min.js文件改名或删除，

打开/UI2/system/components/justep/data/data.js文件，例如想要调试find方法，在data.js文件中找到find方法，加debugger;

刷新页面，点加入购物车按钮，会先执行到在这个按钮的单击事件里面加的debugger，此时按F8或者开发者工具中的蓝色右键头，就会执行到data.js的find方法里面加的debugger了。

3、修改系统js文件后，重新合并生成min.js文件

没有min.js文件系统可以正常运行，但是为了性能，建议使用min.js文件。

已经删除的min.js文件，或者修改了系统的js的文件，都需要重新生成min.js文件

执行\tools\dist\dist.bat文件，就会重新进行合并，生成min.js文件

1.3、 chrome浏览器开发者工具的使用

1、 单步调试

单步跳过——按下面的按钮或者F10

单步进入——按下面的按钮或者F11

2、 执行到断点

除了一步一步地往下走，也可以在Sources页里面设置断点，然后点蓝色的右键头或者F8，就可以执行到设置断点的行。例如：下图就在80行设置了断点。按F8就会执行到80行。

3、查看变量

在Sources页——执行过后，变量被赋值，这时就可以查看变量值了。滑动鼠标到变量上，会显示出变量值

在Scope Variables页——这里列出当前可访问的所有的变量

4、查看表达式

在Watch Expressions页

添加表达式——点右上角的加号进行添加

输入表达式——添加表达式后，即可输入表达式

修改表达式——双击表达式即可修改

删除表达式——点表达式右侧的减号删除表达式

5、在更大的界面中查看表达式

在更大的界面中，想查看什么就输入什么，那么就使用Console页。

例如：在Console页中输入this.comp(“cartData”)

可以查看这个组件的所有属性和方法

可以执行组件的方法，看看有没有错误

可以在这里做各种尝试，更灵活的调试

6、查看调用堆栈

在Call Stack页里面查看调用堆栈

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!