Knockout.js - 如何查看生成的 html答案

【问题标题】：Knockout.js - how to view the resulting htmlKnockout.js - 如何查看生成的 html
【发布时间】：2015-09-19 05:16:13
【问题描述】：

我的项目使用knockout模板来渲染html，所以我的html文件只包含了一堆knockout语法和javascript函数。在浏览器中打开 html 后，它会显示人们通常会在网页上看到的常规内容。我的问题是，如何查看该显示页面的 HTML 源代码？

准确来说：比如这里有完整的html源码，可以测试一下：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"     type="text/javascript"></script>
</head>
<body>

<p>First name: <strong data-bind="text: firstName()"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

<script type="text/javascript">


function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");

    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();   //call the observable as a function with ()  
    }, this);

}
ko.applyBindings(new AppViewModel());

</script>
</body>
</html>

在结果中，我在浏览器上看到以下内容：

===========

名字：伯特

姓氏：伯廷顿

全名：伯特·伯廷顿

===========

出于调试目的，我需要查看此 html 的 resulting 源 html。但是，如果我右键单击页面并显示源代码，我只会看到我编写的 html 代码，而不是浏览器呈现的代码。注意上面的例子是简化的；我的实际代码非常大且复杂，我需要将结果作为 html 标记查看以进行调试。所以，我需要看到（用于代码检查）是这样的：

<p>First name: <strong>Bert</strong></p>
<p>Last name: <strong>Bertington</strong></p>
<p>Full name: <strong>Bert Bertington</strong></p>

【问题讨论】：

Chrome 打印出渲染的 html，它可能也会保留数据绑定，但它会显示渲染的 html
在哪里以及如何查看呈现的 html 代码？

标签： javascript html knockout.js

【解决方案1】：

使用您的浏览器开发工具。在 Chrome 中，这将是 F12。他们应该有一个工具可以让您检查实际呈现的 HTML。在 Chrome 中，它位于一个名为 Elements 的选项卡中。从那里您可以根据需要查看 HTML 展开和折叠节点。还有一个工具（放大镜）可以让您直接在屏幕上选择和元素，它会在控制台中显示相应的 HTML 位。

否则，一个简单的document.body.innerHTML 将转储整个呈现的 HTML。您也可以从调试控制台执行此操作。

一个简单的例子，在这个fiddle，使用Chrome（其他浏览器也有类似功能）：

按 F12
选择元素选项卡
点击放大镜图标
在结果窗口中单击其中一个元素
注意控制台中渲染的 HTML：

<!-- Original -->
<div data-bind="foreach:items">
    <div data-bind="text:$data"></div>
</div>

<!-- Rendered -->
<div data-bind="foreach:items">
  <div data-bind="text:$data">one</div>
  <div data-bind="text:$data">two</div>
  <div data-bind="text:$data">tree</div>
</div>

现在，如果您想要渲染文本的“干净”、非实时版本（不会被数据绑定），那么您应该能够将 html 复制到新元素并删除 @987654325 @ 属性。例如，使用 jQuery（虽然毫无疑问可以用 vanilla JS 完成）：

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");

    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();   //call the observable as a function with ()  
    }, this);

}
ko.applyBindings(new AppViewModel());

var s = $("#source").html();
var t = $("#target");
t.html(s);
t.find("[data-bind]").removeAttr("data-bind");
$("#html").text(t.html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Original data-bound</h4>
<div id="source">
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>
</div>
<hr/>
<h4>Non-live rendered copy</h4>
<div id="target">
</div>
<hr/>
<h4>Raw rendered HTML</h4>
<div id="html">
</div>

请注意，这并不完全是万无一失的，因为它不会找到不在数据绑定属性中的敲除位。例如，如果我使用。

【讨论】：

在 chrome 中，元素选项卡仅显示我的原始 html 和 javascript，而不是呈现的 html。快速提问：我可以在 chrome 调试中使用简单的 javascript 语句吗？说，我想看看 document.body.innerHTML.
我刚刚尝试了 document.body.innerHTML;它也只是转储了原始的 html。
@Simo：元素选项卡显示呈现在页面上的 HTML。如果它不是您所期望的，那是因为您没有渲染它。你可能在某个地方有错误。至于document.body.innerHTML，不如在控制台里试试看会发生什么？
嘿，马特。完全按照你说的做了，仍然看到原始代码，没有渲染。我将整个 html 文件放在上面的问题中；你介意测试一下吗？
对不起这个愚蠢的问题：我在哪里可以找到间谍玻璃？它位于哪里？还是我需要安装的外部工具？