4

I am trying to inspect observables using the Chrome debugger. I am using the knockout plugin, but it isn't showing information on the observables I'm interested in. The workaround I've been using is to set the observable to the global window object and inspect it in the console. This is time consuming for several reasons.

Musical Shore
  • 1,361
  • 3
  • 20
  • 41
  • 1
    Possibly https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof?hl=en ? See also https://www.safaribooksonline.com/blog/2014/02/26/debugging-bindings-knockout-3-0/ – Roy J Mar 25 '16 at 16:34
  • 2
    What works really well for me: right click an HTML element and select _inspect element_, go to your dev tools console and type `ko.dataFor($0)` or `ko.contextFor($0)` (ko must be in window for this to work). The console will log your current binding data/context. – user3297291 Mar 25 '16 at 16:39
  • these observables are not bound to HTML elements – Musical Shore Mar 25 '16 at 16:40
  • Can you see your viewmodel in the debugger? – Roy J Mar 25 '16 at 19:44
  • I'm not sure what you mean. Not all of my observables are associated with a viewmodel. – Musical Shore Mar 25 '16 at 19:50
  • Also, take a look at http://stackoverflow.com/documentation/knockout.js/5066/debugging-a-knockout-js-application/27325/printing-a-binding-context-from-markup#t=201702022123141358325 – Adam Wolski Feb 02 '17 at 21:23

2 Answers2

2

If you're using the non-minified knockout library, you can inspect the _latestValue variable which is exposed on each non-computed observable. In the case of computeds, IIRC you can find an exposed _latestValue variable in the exposed state variable on the computed.

So to summarize, you can inspect the observables via these variables if you're referencing the debug (aka. non-minified) build of knockout.

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

EDIT: I've fixed the case for computed, but note, that if you're using the latest knockout (version >= 3.4.1), you can directly use computed._latestValue too, as it got exposed just as for an observable.

Zoltán Tamási
  • 12,249
  • 8
  • 65
  • 93
1

If I understand the problem (and I may not, I don't generally use the debugger to inspect variables, I pepper my code with console.debug instead), you can't see the values in your observables because they're functions, and you can only inspect data values.

You could keep your values available by subscribing to the observables with a function that copies them. A convenient place would be attached to the observable itself. Just create a new kind of observable:

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

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

When you want to inspect it, find the observable and look at its internalValue property.

Roy J
  • 42,522
  • 10
  • 78
  • 102
  • Note that if you're using the non-minified `knockout` library, you can inspect the `_latestValue` variable which is defined on each `observable`, but not on `computed`s. On the latter you will find it inside `state` variable IIRC. – Zoltán Tamási Feb 02 '17 at 18:02