minkdoblmigjbkhiljpmbjanpeckgbnp
Knowing what viewport you're currently in is difficult so this extension tells you. The system has Bulma's breakpoints set as a default but you can change them to whatever you want.
Inspect Flow
The complete developer tool for Tailwind CSS! Increase your productivity and build Tailwind CSS websites faster with Inspect Flow! - Inspecting Tailwind CSS websites has never been easier! Quickly hover over elements to see the styles applied. - Quickly view components in CodePen and copy the HTML in a single click. - Edit elements in real-time and get instant feedback before finalizing changes in your code base. - Can't remember the name of a utility class? Every class name is at your fingertips when adding new utility classes with our auto-complete integration.
FrameFusion
A browser extension to view multiple breakpoints at once. Optimize Your Responsive Design Like Never Before with FrameFusion Dive into the next level of responsive web design visualization with FrameFusion. Experience your websites across multiple breakpoints simultaneously, ensuring every pixel is perfect. Don't just view - interact and see the ripple effect of each scroll and click across all screens. Effortlessly identify discrepancies, streamline design tweaks, and validate layout integrity in real-time. Plus, with dynamic scaling, every breakpoint view snugly fits your screen, ensuring you never miss a detail. • Simultaneous Multi-Breakpoint View: Display your website across multiple screen resolutions at once. • Dynamic Scaling: Adapts each view to fit your screen perfectly, ensuring clarity and detail. • Interactive Synchronization: Unified scroll and click synchronization across all frames. • Customizable Breakpoints: Easily toggle between the breakpoints you wish to inspect. • Intuitive Error Detection: Swiftly spot and rectify responsive layout inconsistencies.
RenderGPT
A Chrome extension to render HTML/JavaScript/CSS from ChatGPT into iframes. A Chrome extension to render HTML/JavaScript/CSS from ChatGPT into iframes. The extension adds a "render" button to any HTML or PlantUML code blocks in a ChatGPT conversation. Clicking the button renders the HTML in an iframe, and allows selecting other code blocks (JavaScript, CSS) from the conversation for inclusion, mixing and matching sources.
Hover inspector like in Zeplin , Figma
Inspector is the tool which mimic display dimension between selected and hover element. It would be good for designers, QA version 3.0.2 - fix bug: prevent click(thanks Marcelo Alejandro) - add background rule permission for save setting version 3.0.1 - fix bug: extension dropped (thanks @invisioN7) version 3.0.0 - refactor core(prepare for the new features) - add sidebar (setting, more details of selected element) - add freezing selected element after 2 click - press 'space' for unfreeze selected element - add link to discord - add uninstall form - fixed calculation position of popup version 2.0.0 - used ReactJS (expected simplifying of maintain and support) - add data: padding, margin, font, color, background, line-height, class, id - fixed calculation position of popup version 1.1.0 - add highline padding(green color) and margin(orange color). - fix bugs version 1.0.5.1 - minify file for more faster loading version 1.0.5 - add top bar with styles(padding, margin, font-size, height, width) for hover and selected element - fixed bugs (when user scroll label and lines position not display correctly) - add change style for label which display height and width hovered element - change active and regular icon: - add 2 hotkeys: -- command + enter / ctrl + enter - for hide/show topbar -- esc for close extension
