这个答案是基于Dirk Boer的答案。我添加到他的处理程序，使它也显示数据时，它正在更新:

ko.bindingHandlers.debug = 
{
    init: function(element, valueAccessor) 
    {
        console.log( 'Knockoutbinding (init):', element, ko.toJS(valueAccessor()));
    },
    update: function(element, valueAccessor)
    {
        console.log( 'Knockoutbinding (update):', element, ko.toJS(valueAccessor()));
    }
};

然后，你所要做的就是在HTML代码中添加一个像这样的绑定:

<div data-bind="debug: $data">

在初始化或更新console.log时，您将在console.log中看到数据。

我经常做的一件事是，当在某个范围内存在数据可用的问题时，将模板/节替换为如下内容:

<div data-bind="text: ko.toJSON($data)"></div>

或者，如果你想要一个可读性稍强的版本:

<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>

这将输出在该范围内绑定的数据，并让您确保适当地嵌套了内容。

更新:从KO 2.1开始，你可以将其简化为:

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

现在参数被传递给JSON.stringify。

我找到了另一个有用的方法。我正在调试一些绑定，并尝试使用ryan的例子。我得到了一个错误，JSON发现了一个循环。

<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
 <li>
   <pre data-bind="text: JSON.stringify(ko.toJS($parent), null, 2)"></pre>
   <a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
 </li>
</ul>

但是，使用这种方法a将数据绑定值替换为以下内容:

  <ul class="list list-fix" data-bind="foreach: detailsView().tabs">
    <li>
      <pre data-bind="text: 'click me', click: function() {debugger}"></pre>
      <a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
    </li>
  </ul>

现在如果我点击PRE元素，同时有chrome调试窗口打开，我得到一个很好的填充范围变量窗口。

找到了一个更好的方法:

<pre data-bind="text: ko.computed(function() { debugger; })"></pre>

如果您使用Chrome进行开发，有一个非常棒的扩展(我没有加入)称为Knockoutjs上下文调试器，它直接在开发人员工具的元素面板中向您显示绑定上下文。

看看我用的一个非常简单的东西:

function echo(whatever) { debugger; return whatever; }

Or

function echo(whatever) { console.log(whatever); return whatever; }

然后在html中，你有:

<div data-bind="text: value"></div>

把它替换成

<div data-bind="text: echo(value)"></div>

更高级的:

function echo(vars, member) { console.log(vars); debugger; return vars[0][member]; }

<div data-bind="text: echo([$data, $root, $parents, $parentContext], 'value')"></div>

享受:)

更新

另一个恼人的事情是当你试图绑定到一个未定义的值。在上面的例子中，假设数据对象只是{}not {value: 'some text'}。在这种情况下，你会遇到麻烦，但通过以下调整，你会没事的:

<div data-bind="text: $data['value']"></div> 

如果你是在Visual studio和IE中开发，我更喜欢这样data-bind="somebinding:(函数(){调试器;返回bindvalue;}) ()我喜欢它比echo函数，因为它会去脚本与所有的绑定，而不是eval文件，你可以只看$context $data(我在Chrome中也使用这个);