jdfghifofmbjplibeldibgjkhojgdpdf
This extension displays grid and measurement overlays for a design grid system. A tool for designers to measure screen dimensions. This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. This extension is great for designers who need to ensure their website/app designs are pixel perfect. Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser. Try it out today. To begin using the software, here is what you need to do Install our software extension Navigate to the website where you wish to begin using the software Click on the extension icon at the top right corner to activate the software Begin measuring the dimensions of the image/button etc.
CSS Peeper
Inspect website styles in seconds. Supercharge your workflow, and save hours of work. CSS Peeper is the ultimate Chrome extension for designers and developers who want a seamless way to inspect and extract design properties from any website. Say goodbye to digging through complex code. CSS Peeper provides an intuitive, organized interface to access key design details. Professionals deserve tools that save time. Let CSS Peeper streamline your workflow and help you work smarter, not harder. Join 500,000+ professionals who are already making the most of their time. Supercharge your workflow with advanced design inspection features and save hours of work. No more digging in a code. 👉 Get CSS Peeper for Free! Install now and start inspecting websites in seconds. Visit https://csspeeper.com for more details. ✦ Inspect design properties effortlessly. Stop digging through the code. Save hours by quickly inspecting element properties with a simple point-and-click. ✦ Explore colors used on your favorite sites. Browse a variety of colors, find inspiration, and easily check contrast. Love a palette? Export it to your favorite design tool. ✦ Identify typography. Explore the typography across any site, uncover unique font pairings, and check the most relevant text properties. ✦ Explore assets. Browse and download all images, icons, and graphics used across a website. ✦ Instantly preview and copy the CSS of any element, turning great design into reusable code. ✦ Browse and explore the typography in use on any website. Preview the typography hierarchy to understand font choices, sizes, and styles, helping you design confidently and efficiently. ✦ Effortlessly identify typography instances and gain deeper insights into font style applications. Navigate to a dedicated screen to inspect each type of style with precision. ✦ Browse colors by semantic grouping including typography, background, border, and more. Identify colors in context to get more insights. ✦ Inspect individual color instances and explore their use cases, including value, category, class, and design token. ✦ Explore gradients color by color and preview every shade to recreate stunning visual effects with precision. ✦ Contrast scanner helps you stay aligned with the best accessibility practices. Instantly assess contrast issues, ensuring your websites are beautiful and accessible. ✦ Smart Inspector offers an advanced way to inspect design details at a glance. It provides deeper insights into design properties, including color contrast, shadows, and elevation effects. ✦ Switch to Sidebar Mode to gain full access to the website’s viewport. You can see the full list of available features at https://csspeeper.com/pricing By using the CSS Peeper extension, you agree to our Terms & Conditions (https://csspeeper.com/terms-and-conditions) and Privacy Policy (https://csspeeper.com/privacy-policy). CSS Peeper is proud to support Learn to Code, a nonprofit that supports our mission to help everyone become better coders. By using affiliate links, we invite you to help our mission when you are shopping at partner stores, at no cost to you. Support is always optional, and can be permanently disabled at any time.
Grid Ruler
Create grids and measure their distance easily. It allows web developers to create vertical and horizontal grids, Photoshop style. It has a ruler to measure distance between your grids too. - click & drag from main vertical/horizontal ruler to create grid guides. - click on intersection of vertical ruler and horizontal ruler to go into measurement mode. - while in measurement mode, hold `Shift` key to get a straight line.
Free Screen Resolution Checker
Discover your display's potential with our screen resolution checker! Instantly reveal your screen's clarity and detail. Free Screen Resolution Checker is a simple Chrome extension that shows your display resolution and other screen details instantly. It helps you quickly check your current screen size and browser viewport information without using external tools. If you need a quick screen resolution checker or want to know your browser screen resolution, the extension displays the information clearly inside a small popup window. Key Features ✓ Instant Screen Resolution Detection: View your current screen width and height in pixels as soon as you open the extension. It works as a quick screen resolution detector and screen resolution finder for checking display settings. ✓ Display and Monitor Details: The extension also functions as a display resolution checker and monitor resolution checker, showing useful details about your screen. ✓ Device Pixel Ratio (DPR): See the device pixel ratio of your screen to understand how content may scale on different displays. ✓ Color Depth Information: The extension shows your display color depth, which can help when working with visual content. ✓ Browser Viewport Size: View the current width and height of your browser viewport. ✓ Copy All Specs: With one click you can copy all screen information and resolution details. Why use it? Checking your screen resolution can be useful when testing websites, working with responsive layouts, or comparing different display setups. The extension also works as a quick screen size checker and screen size detector for identifying display dimensions directly from your browser. How to use this? 1. Install the extension from the Chrome Web Store. 2. Click the extension icon in your browser toolbar. 3. The popup will instantly display your screen resolution and other display information. 4. Use Copy All Specs if you want to copy the screen details. Free Screen Resolution Checker provides a quick way to run a screen resolution test or monitor resolution test directly in Chrome.
Window Resizer
Resize the browser window to emulate various screen resolutions. This extension re-sizes the browser's window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions. The resolutions list is completely customizable (add/delete/re-order). You can set the window's width/height, window's position, preset icon (phone, tablet, laptop, desktop) and even the option to apply the new dimensions to the entire window or just to the viewport. The extension also features customizable global key shortcuts, an option to export your settings and import them on another computer and more! Please report all bugs (or suggestions) using the support link on the extension's details page.
