MVVM开源框架Knot.js 教程2 - 大幅改变前端框架开发体验的Debugger
2015-07-16 14:00
531 查看
Knotjs教程系列
1.CBS初步2.Knot.js Debugger(本文)
....持续增加中
Knot.js 教程2 - 改变前端框架开发体验的Debugger
Debugger只是一个方便开发的附属工具,按道理说是不值得单独为之写一篇文章的。不过Knot.js的Debugger绝对值得一篇文章。有过框架开发体验的朋友一定多少都有过和框架搏斗的经验。一个小小的设置错误,由于你对框架的不够熟悉,导致出错后完全摸不到头脑。或者被迫在一堆陌生的代码中跟踪尝试找出问题,或者只有上网到处拉人提问。
Knot.js的Debugger能很大程度地改善这个问题。
经常弄CSS的一定都离不开浏览器自带的DOM Inspector工具,它能实时查看网页上各个元素的状态和应用CSS的情况,对CSS的查错调试至关重要
Knot.js的Debugger,对于CBS开发者而言,具有和DOM Inspector一样的意义。
你能随时查看CBS应用到HTML元素上的情况,实时监控每一个访问点上最新的数据变化,还能查看整个页面内的数据变化日志。用好Debugger,knot.js基本上对你而言就是一个白盒系统,内部的工作逻辑一览无遗。
Knot.js Debugger不只对于调试程序管用,对于学习knot.js也极为有用。所以我在knot.js官方网站的tutorial中全部启用了Debugger,你能实时观察任何一个例子的数据和绑定情况。这对于了解knot.js的工作模式是非常有帮助的。
要在你自己的程序中启用Knot.js Debugger,只需引用knot.js Debugger文件即可:
<script src="[PATH_TO_DEBUGGER]/knot.debug.js"></script>
启用Debugger之后,你会在窗口右下角发现一个绿色的甲虫图标,点击图标就能打开Debugger窗口。 当页面内有knot.js发出的警告信息或者错误信息的时候,甲虫图标会变化并闪动。如果没有警告和错误信息,同时Debugger窗口也已经打开,则图标会消失。
Debugger界面如下:
显示的信息很简单,你一试就能明白。我们重点说一下几个功能控件的作用:
顶部的filter可以用来过滤你要监控的节点,输入内容点击放大镜后将只显示标签/绑定选项中包含有这些文字的节点。
点击放大镜旁边的定位按钮之后,你可以到自己的页面中用鼠标点击选取一个HTML元素,选取后将只显示这个元素
漏斗图标用于清除当前过滤选项
点击HTML元素后面的灯泡图标,则该HTML元素将被高亮提示。
点击HTML元素后面的气泡按钮,查看该元素的当前DataContext
点击绑定选项之后的气泡按钮,则查看该元素最新数据的JSON
如果你对knot.js感兴趣,请关注我以获取后续更新提醒。同时请点击推荐此文,knot.js需要足够的注意力来吸引开发者和建立自己的社区。
knot.js感谢你的支持。
相关文章推荐
- HTML5上传图片base64编码显示缩略图
- css样式float造成的浮动“塌陷”问题的解决办法
- 15款创建漂亮幻灯片的 jQuery 插件
- 使用低版本Jackson 2的类级@JsonInclude包含策略的bug
- jquery显示json数据
- HTML5 Session Local Storage
- [转]Javascript高性能动画与页面渲染
- 基于JQuery实现的文本框自动填充功能
- 如何在caffe中增加layer以及caffe中triplet loss layer的实现
- datatable的例子使用--增加删除修改查询
- JavaScript中的数组操作
- 小tip:CSS3下条纹&方格斜纹背景的实现
- js中递归函数的使用介绍
- jQuery-鼠标经过显示大图并跟随鼠标效果插件
- leetcode-237-Delete Node in a Linked List
- Flex与servlet交互2(数据的解析Json)
- HTML小技巧的一些小技巧
- 有向图强连通分量Tarjan算法+ Codeforces Round #267 (Div. 2) D.Fedor and Essay
- javascript不可能全会的30道题
- js 如何获取浏览器的高度?