如何調試內嵌knockoutjs代碼HTML

例如，我們有這樣的代碼：如何調試內嵌knockoutjs代碼HTML

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

有什麼辦法來調試到HTML代碼，這樣我可以看到裏面的產品是什麼（）是什麼？

來源

2017-08-29 wuzinong

怎麼樣ko.toJSON

從http://knockoutjs.com/documentation/json-data.html

注意ko.toJSON接受相同的參數JSON.stringify。對於示例，在調試Knockout應用程序時，對您的視圖模型數據進行「實時」表示是很有用的。要生成用於此目的的很好格式的顯示，可以通過空間參數到ko.toJSON並結合對您的視圖模型像

運行片斷如下

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>

來源

2017-08-29 01:54:34

我總是使用這樣的瀏覽器插件：

安裝擴展，瀏覽，直到您要調試應用程序，請在瀏覽器的開發工具的元素，並找到在擴展選項卡中詳細說明當前狀態的時間點。

來源

2017-08-29 08:34:38

我做到這一點是通過調用它使用的瀏覽器調試器這樣的功能的方式......

所以如果添加了之前你的代碼是這樣的...

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

...然後在打開chrome開發人員工具窗口的情況下運行該頁面。您的瀏覽器將在該行上創建一個斷點。然後您可以在控制檯中檢查$ data變量。這個變量將包含被敲除的數據，在這種情況下是模型。

你可以看這個的jsfiddle與開發工具窗口中打開（F12）在行動中看到這個

https://jsfiddle.net/fa3x9o2s/

來源

2017-08-29 13:01:39

如何調試內嵌knockoutjs代碼HTML

回答

相關問題