Knotjs教程系列
....持续增加中
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感谢你的支持。