CodeKK DevLens

Inspect, measure and copy any element: styles, spacing, distances, contrast, fonts, colours and assets. CSS and Tailwind export.

CodeKK DevLens makes it easier to inspect websites while you're browsing. Ever visited a website and wondered how an element is styled, what font it's using, or how much spacing is around it? That's why I built DevLens. With DevLens, you can hover over elements, click to inspect them, and explore their styles and layout without digging through a bunch of developer tools. What you can do with DevLens: - Inspect elements: Select any element on a webpage and view its selector and dimensions. - Check styles: Explore colors, fonts, text properties, borders, and other CSS details. - Understand spacing: View the box model, including margin, padding, border, and content size. - Measure distances: Check the distance between elements on a page. Explore CSS and Tailwind: View and copy supported styling code for your workflow. - Edit and experiment: Try supported style changes directly on the page. - Switch themes: Use dark or light mode depending on your preference. - Move the panel around: Keep the inspector floating or dock it to either side of the screen. Whether you're building a website, fixing a layout issue, learning CSS, or simply curious about how a page is put together, DevLens gives you a handy way to explore the details. I'm building DevLens to make everyday web development a little easier, and I'd love for you to give it a try. Made by CodeKK. Visit https://codekk.dev to explore more.