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界面如下:

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

显示的信息很简单,你一试就能明白。我们重点说一下几个功能控件的作用:

  • 顶部的filter可以用来过滤你要监控的节点,输入内容点击放大镜后将只显示标签/绑定选项中包含有这些文字的节点。
  • 点击放大镜旁边的定位按钮之后,你可以到自己的页面中用鼠标点击选取一个HTML元素,选取后将只显示这个元素
  • 漏斗图标用于清除当前过滤选项
  • 点击HTML元素后面的灯泡图标,则该HTML元素将被高亮提示。
  • 点击HTML元素后面的气泡按钮,查看该元素的当前DataContext
  • 点击绑定选项之后的气泡按钮,则查看该元素最新数据的JSON

如果你对knot.js感兴趣,请关注我以获取后续更新提醒。同时请点击推荐此文,knot.js需要足够的注意力来吸引开发者和建立自己的社区。

knot.js感谢你的支持。

上一篇:js标题文字向上滚动


下一篇:Viewport Resizer下载 谷歌前端自适应开发工具