BEM devtools
Chrome DevTools extension for inspecting BEM entities, blocks, elements, modifiers, and JavaScript parameters in i-bem framework projects.
Overview
BEM DevTools is a Chrome extension that provides specialized inspection capabilities for projects using the BEM (Block Element Modifier) methodology with the i-bem framework. It allows developers to examine BEM entities directly within the browser's developer tools, improving debugging and development workflows for BEM-based applications.
Key Features
- BEM Entity Inspection — View blocks, elements, modifiers, and JavaScript parameters in a structured panel.
- i-bem Framework Support — Specifically designed for projects built with the i-bem implementation of BEM.
- Chrome DevTools Integration — Adds a dedicated panel to Chrome's developer tools for seamless access.
- Development Utilities — Includes tools for toggling modifiers and debugging extension internals.
Philosophy
The extension aims to bring first-class tooling support to BEM development, making it easier to understand and debug complex BEM-based frontend architectures directly within the browser.
Related Projects
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
