Layout Debugger Chrome Extension

 - Identifying too-wide overflowing objects.
- Distinguishing block from inline elements.
- Helping to keep track of element alignment.

Adds a distinct colour outline to each visible DOM element, as well as providing a visual prompt for overflowing divs.

display: block; => blue;
display: inline; => purple;
overflowing the viewport => red!
etc..

How to install Layout Debugger chrome extension in chrome Browser

You can Follow the below Step By Step procedure to install the Layout Debugger Chrome Extension to your Chrome Web browser.

• Step 1: Go to the Chrome webstore https://chrome.google.com/webstore or download the extension Layout Debugger Chrome Extension Download from https://pluginsaddonsextensions.com
• Step 2: Now search for the Layout Debugger in Chrome Webstore Search and click on the search button.
• Step 3: click on the Layout Debugger Chrome Extension Link
• Step 4: in the next page click on the Add to Chrome button to Download and Install the Layout Debugger extension for your Chrome Web browser .