MVVM开源框架Knot.js 教程2 - 大幅改变前端框架开发体验的Debugger

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感谢你的支持。