Java-Scripts.net

View Source Button

Transparency for developers. This script allows you to reveal the underlying HTML code of a page element, useful for tutorials or code sharing sites.

Target Element:

Hello! This is a sample paragraph inside a div.

Copy the Script

<script>
function viewSource() {
    // Get the HTML of the entire page
    // var html = document.documentElement.outerHTML;
    
    // OR get specific element
    var html = document.getElementById("myDiv").innerHTML;
    
    // Display it
    alert(html);
}
</script>

<button onclick="viewSource()">Show Source</button>

Frequently Asked Questions

Yes, but non-technical users might not know that shortcut. Providing a button makes it accessible and allows you to show source for just a *specific div* rather than the whole messy page.

No. JavaScript runs in the browser, so it can only see the HTML output *after* the server has processed the PHP. The backend logic remains hidden.

Yes. You can combine this with the `navigator.clipboard.writeText()` API to create a 'Copy Source' button.