页面源怎么可能不显示页面上的内容？答案

【问题标题】：How is it possible for the page source not to show what is on the page?页面源怎么可能不显示页面上的内容？
【发布时间】：2013-09-12 09:53:33
【问题描述】：

这是我的网页：

我正试图找出为什么我的列表没有正确显示，但那是another post。要进行故障排除，我右键单击页面并选择查看页面源。正如您在下面看到的，该人员列表（Adam Kinkaid 等）甚至没有出现。这怎么可能？

页面来源：

<!DOCTYPE html>
<html>
<head>
    <title>Presto</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="/Content/ie10mobile.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile-1.3.2.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.structure-1.3.2.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.theme-1.3.2.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap-responsive.css" rel="stylesheet"/>
<link href="/Content/durandal.css" rel="stylesheet"/>
<link href="/Content/toastr.css" rel="stylesheet"/>
<link href="/Content/app.css" rel="stylesheet"/>

    <script type="text/javascript">
        if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
            var msViewportStyle = document.createElement("style");
            var mq = "@-ms-viewport{width:auto!important}";
            msViewportStyle.appendChild(document.createTextNode(mq));
            document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
        }
    </script>
</head>
<body>
    <div id="applicationHost">
        <div class="page-splash"></div>
<div class="page-splash-message">
    Presto
</div>
<div class="progress progress-striped active page-progress-bar">
    <div class="bar" style="width: 100%;"></div>
</div>

    </div>

    <script src="/scripts/jquery-1.9.1.js"></script>
<script src="/scripts/jquery.mobile-1.3.2.js"></script>
<script src="/scripts/knockout-2.2.1.debug.js"></script>
<script src="/scripts/sammy-0.7.4.js"></script>
<script src="/scripts/toastr.js"></script>
<script src="/scripts/Q.js"></script>
<script src="/scripts/breeze.debug.js"></script>
<script src="/scripts/bootstrap.js"></script>
<script src="/scripts/moment.js"></script>

            <script type="text/javascript" src="/App/durandal/amd/require.js" data-main="/App/main"></script>
</body>
</html>

【问题讨论】：

标签： html asp.net web hottowel

【解决方案1】：

“查看源代码”只会为您提供页面加载时的原始页面源代码。之后可能会使用 JavaScript 将内容添加到页面中。

看起来页面正在使用require.js动态加载模块：

<script type="text/javascript" src="/App/durandal/amd/require.js" data-main="/App/main></script>

您可以查看加载的main.js 脚本，看看它是否是添加元素的内容。

使用浏览器的开发者工具探索 DOM 以获取当前的“源”。

使用 Chrome，只需按 Ctrl+Shift+i 即可打开开发者工具，或右键单击一个元素并“检查”它。

【讨论】：

我正在使用 Chrome。我使用 F12 来查看页面的信息，但是我不知道如何探索 DOM 以获取当前源。我该怎么做？

【解决方案2】：

您正在使用 Chrome 以便查看当前活动的文档源（包含动态生成的内容）：

打开开发者工具（使用 F12）
选择“元素”视图（开发人员工具标题中最左侧的选项）
右键单击 <html> 元素并选择“复制为 HTML”
粘贴到您喜欢的文本/HTML 编辑器中

【讨论】：

是outerHTML还是innerHTML？

【解决方案3】：

正如大多数答案所指出的那样，可以使用 Chrome 开发者工具，我只想添加对我有用的东西；

right click <HTML> 页面元素然后向下到 Expand recursively .. 这似乎在脚本执行后刷新主页。

然后我会看到完整的html 源，包括Xpaths，它们也可以在页面上轻松地被跟踪......通过将鼠标悬停在子元素上html 源也会在页面上突出显示它并提供其他信息。

【讨论】：

【解决方案4】：

查看源代码只为您提供在后面的代码中呈现的内容。如果您想查看全部内容和元素，可以使用检查视图 (F12) 元素部分。

【讨论】：