This is my web page:
I'm trying to find out why my list isn't showing up correctly, but that's another post. To troubleshoot, I right-clicked on the page and chose View page source. As you can see below, that list of people (Adam Kinkaid, etc.) doesn't even show up. How is that possible?
Page source:
<!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>
You're using Chrome so to see the currently active document source (containing dynamically generated content):
<html>
element and select 'Copy as HTML'"View Source" is only going to give you the original page source from when the page loaded. Content was probably added to the page with JavaScript after that.
It looks like the page is loading modules dynamically with require.js:
You can look at the
main.js
script that gets loaded to see if it's what's adding elements.Use your browser's Developer Tools to explore the DOM to get the current "source".
With Chrome, just hit Ctrl+Shift+i to open up the Developer Tools, or right-click on an element and "Inspect" it.