Item logo image for View Rendered Source

View Rendered Source

viewrenderedsource.com
Featured
4.5(

37 ratings

)
ExtensionDeveloper Tools30,000 users
Item media 3 screenshot
Item media 4 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 3 screenshot
Item media 4 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 3 screenshot
Item media 4 screenshot

Overview

View source is dead. See how the browser renders a page, not just what the server sends.

A lightweight Chrome Extension that shows you how the browser has constructed (rendered) a page's original HTML into a functioning DOM, including modifications made by JavaScript. An essential tool for web developers using JavaScript frameworks like Angular, ReactJS and Vue.js, and for SEOs to understand how search engines see your pages, especially considering Google's dynamic serving workaround. Differences between raw and rendered versions are highlighted line-by-line showing how JavaScript has modified a page at render time. ---------------------------------------------------- There are 3 sections: * Raw: The source code sent from the server to the browser before the DOM is rendered. The same as you'll see with traditional 'View Source' in the browser (after minor formatting tweaks) * Rendered: The rendered page after the source has been interpreted into a DOM, including any modifications made by Javascript * Difference: The difference between the rendered source and the raw source. Differences occur when JavaScript has modified the DOM. ---------------------------------------------------- Adaptive website? If you serve different source code to mobile devices, emulate this easily with a mobile user-agent checkbox. Dynamic serving for Google? (More info: https://developers.google.com/search/docs/guides/dynamic-rendering) Using Google's dynamic rendering workaround designed for Javascript-heavy sites? Just request the raw source as Googlebot and ensure perfect technical SEO. Works with GatsbyJS and Prerender. ---------------------------------------------------- Problems? Questions? Suggestions? DM the developer: https://twitter.com/ItsHogg ----------------------------------------------------

4.5 out of 537 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

Caden WilliamsonJul 24, 2024

This seems like an amazing tool over "Ctrl + U" Could you add a dark mode option?

1 person found this review to be helpful
Review's profile picture

Crystal CarterJun 27, 2024

An essential bit of tech. I've been using it for years. Great stuff!

2 out of 2 found this helpful
Review's profile picture

Chris LeverJun 19, 2024

@john you already know I love this extension - used it for years now. Suggestion - can you add an additional code highlighter for shadow DOM? I'm really struggling to distinguish shadow DOM vs Rendered using your extension. We're connected on LinkedIn, message me if you need more info. Cheers, Chris

1 person found this review to be helpful

Details

  • Version
    4.0
  • Updated
    June 6, 2023
  • Size
    73.68KiB
  • Languages
    English
  • Developer
    Website
    Email
    jonhoggg@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

For help with questions, suggestions, or problems, please open this page on your desktop browser

Google apps