How is it possible for the page source not to show what is on the page?

Asked 8/9, 2013 at 22:27 Answered 4/4, 2020 at 5:55

This is my web page:

enter image description here

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>

Longs answered 8/9, 2013 at 22:27 Comment(0)

"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:

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

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.

Grover answered 8/9, 2013 at 22:29 Comment(1)

I'm using Chrome. I use F12 to see information about the page, but I don't know how to explore the DOM to get the current source. How would I do that? – Longs 8/9, 2013 at 22:32

You're using Chrome so to see the currently active document source (containing dynamically generated content):

Open the developer tools (using F12)
Select the 'Elements' view (left-most option in the developer tools header)
Right-click the <html> element and select 'Copy as HTML'
Paste into your favorite text/HTML editor

Belanger answered 8/9, 2013 at 22:45 Comment(1)

is that outerHTML or innerHTML? – Middleton 10/4, 2020 at 1:13

"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:

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

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.

Grover answered 8/9, 2013 at 22:29 Comment(1)

I'm using Chrome. I use F12 to see information about the page, but I don't know how to explore the DOM to get the current source. How would I do that? – Longs 8/9, 2013 at 22:32

View Source only gives you the contents that rendered in code behind. if you want to see the whole content and elements it's possible using inspect view (F12) the elements section.

Ten answered 4/4, 2020 at 5:55 Comment(0)

As most answers pointed, using Chrome Developer tools can be used, I only want to add what works well for me;

right click the <HTML> page element then go down to Expand recursively .. This seems to refresh the main page after scripts execute.

then I see the full html source including Xpaths, also they can easily be followed on the page .. by hovering over sub elements html source would also highlight it on the page with additional information.

Benedikta answered 3/4, 2020 at 23:27 Comment(0)

Recommended topics

Hot tags