有没有一种方法可以使用Chrome调试器检查Knockout observables？

Question

我正在尝试使用Chrome调试器检查可观察对象。我正在使用knockout插件，但它没有显示我感兴趣的可观察对象信息。我一直在使用的解决方法是将可观察对象设置为全局window对象，并在控制台中进行检查。这对于多种原因来说都很耗时。

- Musical Shore

---

可能是 https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof?hl=en ？ 另请参阅 https://www.safaribooksonline.com/blog/2014/02/26/debugging-bindings-knockout-3-0/ - Roy J

对我来说非常有效的方法是：右键点击一个HTML元素并选择“检查元素”，进入开发工具控制台，然后输入ko.dataFor($0)或ko.contextFor($0)（这需要在窗口中使用ko）。控制台将记录您当前的绑定数据/上下文。 - user3297291

这些可观察对象并未绑定到HTML元素。 - Musical Shore

你能在调试器中看到你的视图模型吗？ - Roy J

我不确定你的意思。并非所有我的可观察对象都与视图模型相关联。 - Musical Shore

另外，请查看http://stackoverflow.com/documentation/knockout.js/5066/debugging-a-knockout-js-application/27325/printing-a-binding-context-from-markup#t=201702022123141358325 - Adam Wolski

Answer 1

如果您正在使用未经缩小的knockout库，则可以检查每个非计算可观察对象上公开的_latestValue变量。就计算可观察对象而言，您可以在计算可观察对象的公开state变量中找到一个已公开的_latestValue变量。因此，如果您引用debug（又称未缩小）版本的knockout，则可以通过这些变量检查可观察对象。

var observable = ko.observable();
var computed = ko.computed(...);
...
observable._latestValue;
computed._state.latestValue;

编辑：我已经解决了computed的情况，但是请注意，如果您使用最新的knockout（版本≥3.4.1），您也可以直接使用computed._latestValue，因为它像一个observable一样被公开。

- Zoltán Tamási

---

我在computed的情况下犯了一个错误，正确的是computed._state.latestValue而不是computed.state._latestValue。 - Zoltán Tamási

Answer 2

如果我理解问题正确的话（可能不是，因为我通常不使用调试器来检查变量，而是在代码中添加console.debug），您无法看到可观察对象中的值，因为它们是函数，您只能检查数据值。

您可以通过订阅具有复制值的函数的可观察对象来保持值可用。一个方便的地方是附加到可观察对象本身。只需创建一种新类型的可观察对象：

function debugObservable(value) {
    var self = ko.observable();

    self.subscribe(function (newValue) {
        self.internalValue = newValue;
    });
    self(value);
    return self;
}

当您想要检查它时，请找到可观察对象并查看其internalValue属性。

- Roy J

---

请注意，如果您使用的是未经压缩的 knockout 库，则可以检查每个 observable 上定义的 _latestValue 变量，但不适用于 computed。对于后者，您将在 state 变量内找到它。 - Zoltán Tamási