techseohub.com

Compares raw, rendered and difference views of web pages. Marks elements directly on the page according to their render types.

Latest Version

Version

1.3

Update

November 28, 2024

Size

152KiB

Developer

techseohub.com

Renderer Extension

Renderer is a Chrome extension that makes analyzing the rendering processes of websites faster and easier.

▶ Core Functionalities of Renderer

- With the Renderer, you can easily see your raw HTML data response from the server and how the browser renders your raw HTML data from the server.

- When you run Renderer, a panel with three columns — Raw Data, Rendered, and Difference — appears (as shown in the first image above). In this panel, you can view the differences between Raw Data and Rendered data under the Difference column and directly on the page where you activated the extension.

- On the main screen where you view the differences, you can easily track your codes with the code line numbers in each column and quickly view and share the differences.

- You can close one or more columns you want from the top menu on the main screen where you view code differences, you can review only on a single column, and you can view code differences in a much more spacious way.

- In the Difference section, all codes added to the page with javascript are marked in green. The codes that exist in the raw data but are deleted after the javascripts are processed are shown in red color and strikethrough.

- Dark and light mode to choose from according to your preference

▶ How See Differences On Page Functionality Works?

- If you click the \"See Differences On Page\" button after running Renderer, you will be redirected to the page where you activated the extension. On this page, you can view render statistics, identify which elements are rendered client-side and which are rendered server-side, and filter elements based on how they are rendered.

- For example, by clicking \"Only CSR,\" you can see only the elements created or modified after JavaScript processes and updates the DOM. This allows you to easily determine whether critical elements in an SEO project are processed client-side or server-side.

- With the statistics panel, you can see your page's static content ratio as a percentage, enabling you to compare your page against competitor pages.

▶ Version 1.2 Update

- Dark Mode & Light Mode Feature Added (Users can now switch any mode)
- Copy Functionality Added to URL Icon

▶ Version 1.3 Update
- Minor bugs fixed, loading speeds improved and styles changed.

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Renderer", "version": "1.3", "description": "Compares raw, rendered and difference views of web pages. Marks elements directly on the page according to their render types.", "permissions": [ "activeTab", "scripting" ], "host_permissions": [ "" ], "background": { "service_worker": "background.js" }, "action": {}, "icons": { "16": "./assets/images/icon-16x16.png", "48": "./assets/images/icon-48x48.png", "128": "./assets/images/icon-128x128.png" }}

Download CRX(152KiB)