View Rendered Source

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

View Rendered Source - Chrome Extension for Web Developers

View Rendered Source is a Chrome extension that provides a visual understanding of how a browser interprets and renders a page's original HTML into a functioning Document Object Model (DOM). It highlights modifications made by JavaScript and presents how the raw source has been evolved into the rendered source. 'View Rendered Source' is essential for web developers using JavaScript frameworks and SEOs for its capability to emulate diverse user-agents and ensure optimal technical SEO.

Download

Extension stats

By: https://viewrenderedsource.com

Users: 30,000+

Rating: 4.51

(37)

Version: 4.0 (Last updated: 2023-06-06)

Creation date: 2020-05-16

Risk impact: Moderate risk impact

Risk likelihood:

Very low risk likelihood

Manifest version: 3

Permissions:

contextMenus
storage

Host permissions:

http://*/*
https://*/*

Size: 75.45K

Email: jo*****@gmail.com

URLs: Website

Ranking

# 4,961 ▲ 64

Other rankings

#665 in Developer Tools ▲ 1

#3 in source keyword 10

#11 in source code keyword 23 ▲ 1

#30 in mobile view keyword 67 ▲ 6

#63 in javascript keyword 58 ▲ 1

Upgrade to see more rankings

Other platforms

View Web Source (v1.6)

2.33

(375) 78,118+

Not available on Firefox

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension summary

Analyze keywords

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.

User reviews

These summaries are automatically generated weekly using AI based on recent user reviews. Chrome Web Store does not verify user reviews, so some user reviews may be inaccurate, spammy, or outdated.

Pros

Essential tool for viewing rendered source code
Works effectively for various development tasks
Keyboard shortcut functionality is appreciated
Useful for SEO and QA purposes
Has a good execution overall

Cons

Does not work consistently on all websites
Issues when triggering via keyboard shortcuts
Lacks features like DOM comparison and dark mode
Does not display JavaScript-generated code

Most mentioned

Request for dark mode option
Tool used for development and SEO
Inconsistencies in functionality across different sites
Appreciation for the keyboard shortcut

User reviews

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

Caden Williamson, 2024-07-24

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

Crystal Carter, 2024-06-27

@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