how to debug inline knockoutjs code in html - debugging

Question

For example we have codes like :
<!-- ko ifnot: product().bannerImageVideoLink -->
<img data-bind="attr: {src: product().largeImageURLs()[0] }">
<!-- /ko -->
Is there any way to debug into the code in html so that I can see what inside product() is ?

Answer 1

I always use a browser add-on for this like:
Knockout context debugger extension for Chrome dev tools
FireKnockout add-on for Firefox
Install the extension, browse up to the point where you want to debug your app, select the element in the browser's dev-tools and find the current state in detail in the extension tab.

Answer 2

how about ko.toJSON
from http://knockoutjs.com/documentation/json-data.html
Note that ko.toJSON accepts the same arguments as JSON.stringify. For
example, it can be useful to have a “live” representation of your view
model data when debugging a Knockout application. To generate a nicely
formatted display for this purpose, you can pass the spaces argument
into ko.toJSON and bind against your view model like
run snippet below
var product = {
'foo': 'bar',
'largeImageUrls': ['image1', 'image2', 'image3', 'image4'],
'bannerImageVideoLink': true
}
function viewModel() {
var self = this;
this.product = ko.observable(ko.mapping.fromJS(product));
};
var vm = new viewModel();
$(document).ready(function() {
ko.applyBindings(vm);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<!-- ko ifnot: product().bannerImageVideoLink -->
<img data-bind="attr: {src: product().largeImageURLs()[0] }">
<!-- /ko -->
debugger....
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

Answer 3

The way I do this is by calling a function which uses the browsers debugger like this...
<!-- ko if: function(){debugger;}() --><!-- /ko -->
so if you add that just before your code like this...
<!-- ko if: function(){debugger;}() --><!-- /ko -->
<!-- ko ifnot: product().bannerImageVideoLink -->
<img data-bind="attr: {src: product().largeImageURLs()[0] }">
<!-- /ko -->
...then run the page with the chrome developer tools window open. Your browser will hit a breakpoint on that line. You can then inspect the $data variable in your console. This variable will contain the data being bound by knockout which in this case is the model.
You can see this in action by looking at this jsfiddle with your dev tools window open (F12)
https://jsfiddle.net/fa3x9o2s/