View Rendered Source

View Rendered Source插件简介

View Rendered Source插件描述

A lightweight Chrome Extension that shows you how the browser has constructed (rendered) a pages iginal HTML into a functioning DOM, including modifications made by JavaScript.

An essential tool f web developers using JavaScript framewks like Angular, ReactJS  Vue.js,  f SEOs to underst how search engines see your pages, especially considering Googles dynamic serving wkaround.

Differences  raw  rendered versions are highlighted linebyline 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 befe the DOM is rendered. The same as youll see with traditional View Source in the browser (after min fmatting tweaks)

* Rendered: The rendered page after the source has been interpreted into a DOM, including any modifications made by Javascript

* Difference: The difference  the rendered source  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 useragent checkbox.

Dynamic serving f Google?
(Me info: https://developers.google.com/search/docs/guides/dynamicrendering)
Using Googles dynamic rendering wkaround designed f Javascriptheavy sites? Just request the raw source as Googlebot  ensure perfect technical SEO. Wks with GatsbyJS  Prerender.



Problems? Questions? Suggestions?

DM the developer: https://twitter.com/ItsHogg


                                

View Rendered Source插件离线安装方法

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.下载 View Rendered SourceChrome插件v3.0版本到本地。

5.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

注意：最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息，参照这篇文章即可解决