Debugging 如何调试html中的内联knockoutjs代码

例如，我们有如下代码：

   <!-- ko ifnot: product().bannerImageVideoLink -->
                <img data-bind="attr: {src: product().largeImageURLs()[0] }">
 <!-- /ko -->

有没有办法调试html中的代码，这样我就可以看到product（）的内部内容了？

ko.toJSON怎么样

从

请注意，ko.toJSON接受与JSON.stringify相同的参数。对于 例如，视图的“实时”表示可能很有用 调试淘汰应用程序时的模型数据。生成一个 格式化显示为此，可以传递空格参数 转换为ko.toJSON并根据视图模型进行绑定，如

运行下面的代码段

var乘积={
‘foo’：‘bar’，
'largeImageUrls'：['image1'，'image2'，'image3'，'image4']，
“bannerImageVideoLink”：真
}
函数viewModel（）{
var self=这个；
this.product=ko.observable（ko.mapping.fromJS（product））；
};
var vm=new viewModel（）；
$（文档）.ready（函数（）{
ko.应用绑定（vm）；
});

调试器。。。。
我总是使用浏览器附加组件来实现以下功能：





安装扩展，浏览到要调试应用程序的位置，在浏览器的开发工具中选择元素，并在扩展选项卡中详细查找当前状态。
我这样做的方法是调用使用浏览器调试器的函数，如下所示

<!-- ko if: function(){debugger;}() --><!-- /ko -->
<!-- ko ifnot: product().bannerImageVideoLink -->
  <img data-bind="attr: {src: product().largeImageURLs()[0] }">
<!-- /ko -->


所以如果你在你的代码之前加上这个

<!-- ko if: function(){debugger;}() --><!-- /ko -->
<!-- ko ifnot: product().bannerImageVideoLink -->
  <img data-bind="attr: {src: product().largeImageURLs()[0] }">
<!-- /ko -->



…然后在chrome开发者工具窗口打开的情况下运行页面。您的浏览器将在该行上遇到断点。然后可以在控制台中检查$data变量。此变量将包含由knockout绑定的数据，在本例中，knockout就是模型

您可以在dev tools窗口打开（F12）的情况下查看这个JSFIDLE，从而看到这一点