这是我的网页:
<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS8xNjZ4My5wbmcifQ==” alt =“在此处输入图像描述”>
我试图找出为什么我的列表显示不正确,但这是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>
“查看源代码”只会为您提供页面加载时的原始页面源。之后,内容可能已使用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浏览器是为了查看当前处于活动状态的文档源(包含动态生成的内容):
<html>
元素,然后选择“复制为HTML”正如大多数答案所指出的,可以使用Chrome开发者工具,我只想添加对我有效的内容;
right click
<HTML>
页面元素,然后转到Expand recursively
.。这似乎在脚本执行后刷新了主页。
然后我看到包括html
在内的完整Xpath
源,也可以很容易地在页面上关注它们。通过将鼠标悬停在子元素上,html
源也将在页面上突出显示其他信息。
查看源代码只为您提供在后面的代码中呈现的内容。如果您想查看全部内容和元素,可以使用检查视图(F12)元素部分。