Viewing HTML Source Code

Viewing HTML source code with a browser means viewing the source code as sent to the browser. PHP and other server-side processes are completed before sending the page to the browser.

After the browser gets the web page from the server, there may be additional changes to the source code. Generally, those additional changes would be done with JavaScript.

Therefore, viewing HTML source code could be different depending on when and how it is viewed.

There are several ways to view the source code of a web page.

• With the browser's "view source" menu item. This might or might not be satisfactory. Recently loaded content might not be included. This works only for the web page currently loaded in the browser. There is no source code for this. Simply use your browser's "view source" menu item.

• With a PHP code snippet (source code provided further below). It typically will provide the exact source code that the server would send to a browser. This works for any non-restricted URL.

• With JavaScript for the current web page (source code provided further below). This works only for the web page where the JavaScript is located.

PHP Code Snipped

Here is a PHP code snippet for viewing the source code at any non-restricted URL.

<?php echo('<pre>'.htmlspecialchars(file_get_contents('https://example.com/')).'</pre>'); ?>

In the above source code snippet, replace https://example.com/ with the URL you are targeting. Put the snippet on a test PHP web page. Load the page URL into your browser.

Javascript Code

The JavaScript below needs to be placed below the cancel </HTML> tag. After the web page is loaded, it will display the source code of the content between the HTML tags.

<!-- (Only the content between the HTML tags is displayed, not the HTML tag itself.) -->
<pre id="my-pre-tag"></pre>
<!-- JavaScript should be under the </html> tag, not anywhere within it. -->
<script type="text/javascript">
function DisplayTheSourceCode()
{
   var tag = document.getElementsByTagName("HTML")[0];
   var html = String(tag.innerHTML);
   html = html.replace(/\&amp;/g,"&amp;amp;");
   html = html.replace(/\</g,"&amp;lt;");
   html = html.replace(/\>/g,"&amp;gt;");
   document.getElementById("my-pre-tag").innerHTML = html;
}
setTimeout(DisplayTheSourceCode,5000); // Adjust 5000 to your preferred number of milliseconds to wait.
</script>

The above will display only the web page where the JavaScript is located. It may be useful when debugging a PHP-generated web page. The JavaScript will show the code the browser currently is working with.

The source code will be between pre tags. If you change the my-pre-tag id of the pre tag, you'll need to make a corresponding change in the JavaScript toward the bottom of the source code (4 lines up from the bottom).

The JavaScript runs after the web page loads. The above JavaScript delays 5000 milliseconds (5 seconds) before obtaining the source code. You may adjust that number in the above source code (near the bottom) to your preferred number of milliseconds.

There you are, three ways to view web page source code.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager