How to dynamically inspect and manipulate the content of your loaded page inside chrome browser

The next generation browsers, like Google Chrome, can offer an powerful feature (Chrome DevTools) that allows you to inspect, debug and manipulate any web page element that you browse.

Demonstration and results description

• Open any web page in your browser
• Open the Chrome DevTools console tab: Ctrl+Shift+J 
• In the console type the following code and press Enter

document.body.innerHTML="this is now your new page"
"this is now your new page"

• Your loaded page within the browser window should be replaced now with our custom string
• By running different JavaScript code you can change the behavior and content of your page

Now to start exploring this all what you need to know is basic JavaScript knowledge and some understanding of the HTML standard (a good reference can be found here HTML - Living Standard).

References

http://www.whatwg.org/specs/web-apps/current-work/multipage/
https://developers.google.com/chrome-developer-tools/
http://www.w3schools.com/js/js_htmldom_navigation.asp