If you work as a Software developer then you may have ran into a situation where you wanted to analyze HTML design of a particular web page.
The extension has a-lot of features that help you to analyze design of an HTML document.
Some of the features of this extension are documented down below:
In this blog post, we will discuss how we can use HTML Design Analysis for analyzing design of a particular web page.
Following are the amazing features provided in the "HTML Design Analysis" extension:
This feature is used for hiding all images including the images displayed in the shadow DOM and iFrame elements.
Using this feature you can hide regular images displayed on the page itself including shadow DOM and iframe elements.
This feature enables an end user will be able to hide background images by making them invisible.
This helps hide background images by not making them invisible but instead hiding them.
As the name intends, the feature helps to outline all table cells displayed on the page itself.
With this feature an-end user will be able to outline table elements displayed on the page itself.
With this feature external links displayed on the page will be outlined by the extension.
Using this feature you might be able to spot external links displayed on the page.
With this feature, all the non-secure elements on the page will be highlighted.
Non-secure elements can be elements that link to a resource that has a non-secure URL or asset.
This feature looks for images and replaces them with their
making it easy to mimic the behavior identical to images resulting in a 404
HTML pages might have various
iframe elements, with this feature it becomes
easy to spot where these
iframe elements might be located.
Tables have captions for use-ablity reasons, with this feature provided in HTML Design Analysis, an end-user will be able to outline all the table captions provided in the page itself.
With this feature, all the floating elements displayed on the will be outlined. Helping you to spot elements that CSS had designed to be floating on the current screen.
By using this feature, relative positioned elements on the page will be outlined by the extension helping you to identify all the relative positioned elements on the device’s screen.
Using this feature, an end-user will be able to outline all images shown on the page will be outlined.
The extension has an option to outline background images shown on the page. As HTML pages make use of various background images, it might become difficult to be which one of this images are background images and not background images.
With this feature, an end-user will be able to point out what images might have an alt-attribute by outlining them.
An HTML document is composed of heading tags such as H1, H2, H3 etc. With this feature all the heading tags on the page can be outlined.
With this feature, an end-user will be able to display what dimension the image is by accessing image properties.
Displaying image dimensions is useful when you are trying to find out what dimension the image added on the page really is.
There are certain elements in HTML that are deprecated, by using this feature provided on the page will be outlined.
With this feature, an end user will be able to outline all the block level elements that are currently being displayed on the page itself.
By using this feature, extension will use special features to force a reload on the extension itself.
By reloading all images you will be able to figure out load time of images on specific page.
This option uses query string trick to force reload of externally used CSS. By using a different URL for the CSS the CSS files on the page are reloaded.
This option helps an end-user outline all images displayed on the page, making it easy to distinguish between images that are displayed and that are not displayed.
This feature helps end-user to outline absolute positioned elements displayed on the page.
This option helps you display path used by the image itself.
This feature helps you identify images that might have adjusted dimensions.
With this feature, alt attributes for specific images will be displayed by the extension.
With this feature, you can get rid of image dimensions and all the images will be marked as full sized instead of natural size.
With this feature, all images displayed on the page that do not have a dimension specified will be outlined by the extension.
This feature helps users to outline images with empty alt attribute.
With this feature, it helps to outline all images with oversized dimension.
With this feature it becomes easy to make all images invisible. By making images invisible you will be able to analyze how the background images of the page can be analyzed by the extension itself.
With this feature, all the fixed positioned elements displayed on the page will be outlined by the extension.
This tool has various image utilities that help you to simplify editing images on the current page. With this features you will be able to apply various actions on images.
Following are the miscellaneous features provided in the extension itself.
Take a look at the description of these features to learn how to use them.
This feature works by removing specific links from your history and makes all links un-visited.
By using this feature, we can easily view the source code of a particular page. This feature is identical to using other features provided in the web browser that help you see the source code of the page.
This feature works by accessing adding all links into visited in your browser history, making all the links on the pages being marked as visited by the extension.
As you use this checkbox, the page will be linearized by making as many elements as possible to be displayed inline instead of being displayed as block level elements.
By un-checking this checkbox, the things done in the previous task will be reversed.
Please use the button given below to download "HTML Design Analysis"
After downloading the extension, end user will be able to use all features provided in the extension itself.
Thank you for reading this guide! We hope that you have fonud this guide useful!