Mage Chrome Toolbar
A Chrome extension for debugging Magento 1 and 2 performance, themes, and components via browser inspector integration.
What is Mage Chrome Toolbar?
Magento Chrome Toolbar is a Chrome extension that integrates with MSP_DevTools to provide detailed debugging information for Magento 1 and 2 stores directly within the browser's developer tools. It helps developers inspect themes, controllers, layouts, blocks, and performance metrics without leaving their debugging environment. The tool solves the problem of fragmented debugging by centralizing Magento-specific insights in Chrome DevTools.
Magento developers and theme builders who need to debug performance issues, inspect page structures, or modify themes efficiently. It's particularly useful for agencies and in-house teams working on Magento 1 or 2 e-commerce projects.
Developers choose this extension because it seamlessly integrates Magento debugging into Chrome DevTools, offering a unified workflow that saves time compared to switching between multiple tools. Its deep integration with Magento's architecture and optional PhpStorm connectivity provides a specialized advantage over generic debugging extensions.
Overview
Magento Chrome Toolbar for MSP_DevTools
Use Cases
Best For
- Debugging Magento theme rendering and block structures
- Inspecting layout updates and observer executions in real-time
- Profiling Magento 2 application performance to identify slow operations
- Integrating Magento debugging with PhpStorm for direct template editing
- Understanding data model and collection interactions on frontend pages
- Troubleshooting uiComponent and container behaviors in Magento 2
Not Ideal For
- Projects built on non-Magento e-commerce platforms like Shopify or WooCommerce
- Development teams using browsers other than Chrome or Chromium-based alternatives
- Environments where installing server-side extensions is restricted or undesirable
- Developers who do not use PhpStorm and have no need for its integrated template editing
Pros & Cons
Pros
Provides comprehensive debugging data such as themes, controllers, layouts, and observers directly within Chrome DevTools, as detailed in the features and screenshots.
Enables Magento 2 profiler to identify bottlenecks with a specific command like `bin/magento dev:profiler:enable`, enhancing performance optimization workflows.
Integrates with PhpStorm via the Remote Call Plugin, allowing developers to open template files directly from the browser for quick edits, as mentioned in the setup instructions.
Centralizes Magento-specific insights in Chrome Inspector, reducing context switching and streamlining the debugging process, aligning with the project's philosophy.
Cons
Requires multiple steps including Composer installation, cache flushing, admin configuration, and for Magento 2, disabling Full Page Cache and editing env.php for SQL profiling.
Only works with Chrome-based browsers and depends on PhpStorm for template editing integration, excluding users of Firefox, Safari, or other IDEs.
Instructions are split between Magento 1 and 2 with separate GitHub repositories, which can lead to confusion and increased setup time for developers.
Frequently Asked Questions
Related Projects
PHP Insights🔰 Instant PHP quality checks from your console
DDEVDocker-based local PHP+Node.js web development environments
docker-magentoMark Shust's Docker Configuration for Magento
n98-magerun2The swiss army knife for Magento developers, sysadmins and devops. The tool provides a huge set of well tested command line commands which save hours of work time. All commands are extendable by a module API.
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.