HTML & CSS Design Analysis

Published on 15 February 2020
Last Updated on 15 February 2020
HTML & CSS Design Analysis
Image by KodeMuse Software

Download Links

Please use download links given below to download latest version of our software. Also bookmark this page to manually download upcoming versions.

Also note that web browsers make use of various APIs that keep changing without notice. This can introduce uneasy bugs. To have such issues resolved, you must manually install latest version of our software using the links given below.

Recommended web browsers:

  • Brave
  • Opera
  • Google Chrome, Canary and Chromium
  • Other Chromium based web browsers.

Purchase a license

After purchasing a license you will receive following benefits
  • A licensed user can use all features without any daily execution limit.
  • Extension will no longer prompt you to enter a license.
  • License will grant you permission to make commercial use of our software.

Payments are manually processed. After making a purchase please contact our support staff with proof of payment to receive a license.

Purchase via PayPal

Purchase via UPI

Purchase Amount:
INR 450
UPI ID:
9075291847@upi

Purchase via InstaMojo

Installation

Once you have downloaded zip file of our software, please follow simple instructions given below to install it on your device:

Installing on Opera, Brave, Google Chrome, Canary and other Chromium based web browsers

  1. Locate the ZIP file on your computer and unzip it.
  2. Go to "chrome://extensions/" page by typing it in address bar.
  3. Enable "Developer mode".
  4. Click on "Load unpacked extension" button
  5. Select the unzipped folder where "manifest.json" file is located to install extension.
After following above steps, extension will be installed on your chromium based web browser.

Frequently Asked Questions

What are the limitations of free version

  • Free version can only be used for non-commercial purposes.
  • Free version allows you to use a feature up-to 3 times per day per user.
  • Free version will prompt you to enter a license key if daily execution limit is reached.

If a feature does not work as intended in free version, then will it work in licensed version

If a feature does not work as intended in free version, it will not work differently in licensed version. Features provided in free version and licensed version work the same way. the only difference is licensed version will remove usage limitation and it will no prompt you to enter a license key. If you identify a bug then please contact us.

What are the benefits of purchasing a license key

After purchasing a license, software will remove daily usage limitation and it will no longer prompt you to enter a license.

Disclaimer

This software is neither created nor endorsed by any social media company.

This software neither collects nor transmits any personally identifiable information. This software does not track your browsing behaviour. Information necessary for functioning of this software is stored on the devices of the end user, our servers do not have access to this information. For more information please read our privacy policy and terms of service.

By using our software you agree to our "Terms Of Service" and "Privacy Policy".

Documentation

HTML Design Analysis

Supported document types

Document type Supported
main document Yes
iframe elements Yes
shadow dom Yes

Nested shadow elements and nested iframe elements are not fully supported by this tool.

This tool also does not support shadow root opened with the closed mode.

Checking broken tags inside iframe elements is supported but rule of parent document is applied while checking errors to child frame instead of applying rule for the hostname of the child frame.

Complete list of features and their use is given below:

Hide images

Using this tool a user can hide images displayed on a page.

By hiding images, developers can see what is behind images to fix image background or other issues that can’t be fixed otherwise.

Hide all images

Hides all images present on the page. Hides images inside shadow dom and iframe elements as well.

By hiding all images, a developer can mimic the design of a particular page that may have no images.

Hide background images

Hides all background images set using background-image CSS property.

By hiding all background images a developer can know what images are added on the page via the img tag and what images are added on the page by making use of CSS.

Make background images invisible

Makes all background images set using background-image CSS property invisible by replacing existing background image with an invisible image.

If background images are made invisible, then various image background related issues can be fixed by the developer.

Image utilities

This tool provides various utilities for analyzing images used on a particular web page.

Image utilities are helpful for debugging image related issues.

Display image alt attribute

Displays image alt attributes by replacing existing image with it’s alt attribute value.

By replacing all images by their alt attribute it gets easy to mimic the behavior of a particular page when no network connection is available to image CDN or images fail to load for some reason.

Display image dimension

Displays image dimensions by adding a new element on the page. By displaying image dimension, a developer can actually know what dimension a particular image.

Display image path

Displays image path by adding a new element on the page. By displaying image path we can actually know from what path the image is loaded in real time.

Image paths for all images will be displayed using this feature.

Make all images full size or natural size

Makes images full size or natural size by changing their width and height to their natural size.

Checking the checkbox will make the image full size, Un-checking the checkbox will make the image natural size.

Make all images invisible

Makes all images invisible by replacing existing images with an invisible image.

This feature is useful to know how the user interface might appear if existing images are replaced by invisible images.

Replace image with alt attribute

Replaces all the existing images with their alt attribute values. By using this feature, it gets easy to know how the image might appear if the images are replaced by their equivalent alt attributes.

Helping the developer mimic the behavior of other reading tools.

Outline elements

This tool can be used to outline various elements displayed on a page.

By outlining all elements, all HTML elemntes and their outlined can be know by the developer.

Helping the developer to do the necessary things to fix image width and height.

Outline block level elements

Thil tool will outline block level elements that are currently visible on the page.

By outlining block level elements, an end-user can know what elements are block level.

Outline deprecated elements

This tool will outline deprecated elements that are currently visible on the page.

There are various elements in HTML language that are deprecated by the standards team. Using such elements might cause all kinds of issues for the developer.

Such elemntes must either be replaced or not used by the developer.

This tool will outline external links that are currently visible on the page.

By outlining all external links, a developer can actually know what links on the page are external.

Such links must be treated carefully because they are hosted on an external domain.

Outline floating elements

This tool will outline floating elements that are currently visible on the page.

By using this feature a developer can know what elemntes on the page are floating elemntes.

Outline frames

This tool will outline frame elements that are currently visible on the page.

By outlining all frames displayed on a page, an end-user can know where some of these frames might be located.

Helping the developer to fix frame related issues.

Outline non-secure elements

This tool will outline non-secure elments that are currently visible on the page.

By using this tool, all non-secure elements on a specific page can be highlighted by the developer.

Helping the developer to get rid of non-secure elements.

Outline tables

This tool will outline table elements that are currently visible on the page.

By using this feature, a developer can outline all table elements on a page. Some developers still have the habit of using tables for layout.

Outline table captions

This tool will outline that are currently visible on the page.

By outlining all table captions developer can know where table captions are located.

Tables must have appropriate captions for them to be human readable.

Outline table cells

This tool will outline table cells that are currently visible on the page.

Outline headings

This tool will outline heading elements such as h1, h2, h3 etc. that are currently visible on the page.

Outline absolute positioned elements

This tool will outline absolute positioned elements that are currently visible on the page.

Outline fixed positioned elements

This tool will outline fixed positioned elements that are currently visible on the page.

Outline relative positioned elements

This tool will outline relative positioned elements that are currently visible on the page.

Outline images

This tool can be used to outline various images displayed on a page.

By using this feature, developers can insgi get

Information about various features provided in this tool

Given below is the information about various outlining tools and how to use them.

We hope that this information will actually help you to use the software product to its fullest extent.

Outline all images

This tool will outline all images displayed on a page.

By using this feature, all images displayed on a page will be outlined. Helping web developers to see such images are located or not located.

Outline background images

This tool will outline all background images displayed on a page.

By using this feature all background images displayed on a page will be outlined and developer will be able to know what images are background images.

Outline images with adjusted dimensions

This tool will outline all images with adjusted dimensions displayed on a page.

By using this feature, any image that has oversized dimension will be outlined by the extension, allowing developer to highlight such images.

Outline images with empty alt attributes

This tool will outline all images with empty alt attributes displayed on a page.

By using this feature, any image that has no alt attribute or an empty alt attribute will be outlined and helping the developer to fix such issues by fixing the issue

By using this feature, any image that has no alt attribute or an empty alt attribute will be outlined and helping the developer to fix such issues by adding an alt attribute.

Outline images with oversized dimensions

This tool will outline all images with oversized dimensions displayed on a page.

By using this feature, any image that has oversized dimension will be highlighted, and the developer will be able to take steps required to fix appropriate issues.

Outline images without alt attributes

This tool will outline all images without alt attributes displayed on a page.

By using this feature, images that have no alt attributes will be outlined by the extension.

Outline images without dimensions

This tool will outline all images without dimension displayed on a page.

By outlining images that have no dimension, a software developer can gain additional information regarding developing the page.

Reload external CSS

This tool can be used to automatically reload all external CSS files that are added on the current page by using a <link/> tag.

This feature works by reloading external CSS files by adding a random query string at the end of the external CSS files allowing end user to reload external CSS files.

Reload images

This feature can be used to reload all images added on a page.

This feature works by adding a random query string ad the end of the image URL causing the image to be reloaded.

Miscellaneous tools

Linearize page

  • Checking this checkbox will linearize page layout.
  • Un-checking this checkbox will revert the changes and make the page appear as it originally was.

Display hidden elements

Using this tool will display all hidden elements available on the page.

There are various elements that can be hidden on a specific page.

By using this feature all the hidden elements on a specific page can be displayed by the extension.

Using this tool will mark all links available on the page as visited by adding them to a user’s browsing history.

A link can be marked as visited by adding it to the history of the web browser. This feature works by adding link into history of the web browser marking the link as visited.

Using this tool will mark all links provided on the page as not-visited by removing them from a user’s browsing history.

A link can be marked as un-visited by removing it from history of the web browser.

This feature works by removing specific link from history of the web browser and that marks the link as un-visited.

View source

Using this a user can view source code of current document. This feature helps developers debug various issues by taking a glance at the actual source code of the page.

Supported Web Browsers

Web Browser Supported
Google Chrome Yes
Chromium Yes
Chrome Canary Yes
Firefox No
Opera Yes

"Design Analysis" is free for non-commercial use however a license must be purchased for commercial use. This software will ask you to purchase a license if commercial use is detected.

Privacy notice: This software neither collects nor transmits any personally identifiable information. This software does not track your browsing behaviour. Information necessary for functioning of this software is stored on the devices of the end user, our servers do not have access to this information. For more information please read our privacy policy and terms of service.

Video Demo

How to uninstall "HTML & CSS Design Analysis"

Once you have installed our browser extension, please follow steps given below to remove it from your device:

Un-Installing on Opera, Brave, Google Chrome, Canary and other Chromium based web browsers

  1. Open your web browser where you have installed our browser extension.
  2. Go to "chrome://extensions/" page by typing it in address bar.
  3. Click on the "Remove" button to remove the extension from your device.
  4. Restart web browser.
After following above steps, extension will be un-installed from your chromium based web browser.

Tags:

We hope that you find this product useful and satisfies your use case. Thank you for reading this documentation!