Developer Toolbar for Magento2 🚀

Table of Content

• Overview
• Requirement
• About
  • Panels
  • Screenshots
• Installation
  • Manual
  • Composer
  • Modman
  • Setup
  • URI File to IDE
• Sponsors
• Documentation
• Credits

Overview

✨ With the vanilla javascript refactoring comes the compatibility with Hyvä and Breeze themes.

🎁 Till compatible with Full page cache and fit coding standard :sparkles:
Functionalities like VarDumper are unforced and SQL profiler backtrace is only on demand. See more Changelog .

Requirement

Supported versions: Magento 2.4.x till 2.4.8 but should work with lower version.
See composer.json for other requirements.

About

Hope this debug toolbar can speed up Magento2 development module. Any feedback and idea to improve this toolbar will be appreciated :beers: so get in touch via the issue tracker on GitHub. Feel free to fork and pull request.
The structure of this toolbar is extremely simple you just need to add a new block in the layout to get your tab running.

Panels

• Info : Main informations about controller, route, action and store. Search on core config data. Dedicated tab output for local and global phpinfo.
• Design : List handles called and display layout structure of nested blocks and containers
• Profile : View current observers, all events dispatched, collections and models loaded, plugins instanciated, preferences, cache hits
• Queries : Statistics about executed queries and detailed query listing with syntax highlighting of main SQL keywords
• Logs : Display log files with ability to reset these files
• Dump : Catch all dump() in code, identify inline js script non compliant with CSP
• Actions : Easily toggle template hints and inline translation and flush cache
• Translation : Quickly see module, pack,theme and DB translations
• Help : Show module version and link to github

Screenshots

• Info tab
  [image: image]

• Queries Tab
  [image: image]

• Profile Tab
  [image: image]

• Theme chooser
  [image: image]

Installation

Manual

• Download zip file of the last version of this extension under release tab
• Extract files in the Magento root directory in the folder app/code/ADM/QuickDevBar
• Enable the extension

php bin/magento --clear-static-content module:enable ADM_QuickDevBar

• Upgrade Magento setup

php bin/magento setup:upgrade

Composer

In the Magento root directory

• Install the module

composer require vpietri/adm-quickdevbar --dev
php bin/magento module:enable ADM_QuickDevBar 
php bin/magento setup:upgrade

Modman

In the Magento root directory

• Install the module

modman clone [email protected]:vpietri/magento2-developer-quickdevbar.git
php bin/magento module:enable ADM_QuickDevBar 
php bin/magento setup:upgrade

Setup

The toolbar is displayed by default if your web server is on your local development environment.

You can force activation via command line

php bin/magento dev:quickdevbar:enable

and activate full sql backtrace

php bin/magento dev:quickdevbar:enable --sql-profiler

Or via the standard configuration in the Advanced/Developer/Quick dev bar section.

If you do not see the toolbar you should either force activation by filling your IP in the field "Allowed IPs" and fill a matching pattern of you user-agent in the field "Allowed user-agent pattern" if it's needed.
[image: image]

URI File to IDE

(Beta) In PhpStorm you can use IDE Remote Control to open file

https://plugins.jetbrains.com/plugin/19991-ide-remote-control

[image: image]

Sponsors

Add your logo on Github Sponsors

Documentation

• Changelog
• You can extend this toolbar with your own tabs, a sample module is available. (refactoring coming soon)

Credits

• Jens Törnell