如何在html中调试内联基因剔除js代码

Question

例如，我们有如下代码：

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

有什么方法可以调试html中的代码，以便可以看到product（）里面是什么？

Answer 1

我总是像这样使用浏览器插件：

• Chrome开发人员工具的淘汰赛上下文调试器扩展
• Firefox的FireKnockout附加组件

安装扩展程序，浏览至要调试应用程序的位置，在浏览器的开发工具中选择元素，然后在扩展程序选项卡中详细查找当前状态。

Answer 2

怎么样ko.toJSON

来自http://knockoutjs.com/documentation/json-data.html

请注意，ko.toJSON与JSON.stringify接受相同的参数。 例如，调试Knockout应用程序时，对视图模型数据进行“实时”表示可能很有用。 要为此目的生成格式良好的显示，可以将spaces参数传递到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> 

Answer 3

我这样做的方式是通过调用一个使用像这样的浏览器调试器的函数...

<!-- ko if: function(){debugger;}() --><!-- /ko -->

因此，如果您在这样的代码之前添加它...

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

...然后在chrome开发人员工具窗口打开的情况下运行该页面。 您的浏览器将在该行达到断点。 然后，您可以在控制台中检查$ data变量。 此变量将包含被剔除绑定的数据，在此情况下为模型。

您可以通过在打开开发工具窗口（F12）的情况下查看此jsfiddle来查看实际情况

https://jsfiddle.net/fa3x9o2s/