It is a common practice among Web developers to use Chrome’s Developer tools to test, debug and troubleshoot on any website; however, none of them provide enough resources to deal with Magento, especially for backend developers, relying on more unorthodox methods, like printing messages on the UI or the Developer’s tools’ console.
Luckily, MageSpecialist DevTools is a free module, that can be found on Github at https://github.com/magespecialist/m2-MSP_DevTools , that reduces considerably those headaches by providing powerful analysis and data totally aimed to work with Magento.
Advantages of using MageSpecialist DevTools:
- Magento’s layout debug functionality is very confusing and does not display enough information for troubleshooting; being also very intrusive.
- It will help you to determine if there is any load observer being executed; easing the decision to replace them by writing a plugin instead.
- You might detect what blocks or layouts are taking a long time to load.
- The tool will also allow you to detect any heavy and unused code being unnecessary rendered.
Installation
Install the MageSpecialist Chrome Toolbar
First, install the MageSpecialist Chrome Toolbar in order to install a new Magento tab in Chrome’s Developer tool.
https://chrome.google.com/webstore/detail/magespecialist-devtools-f/odbnbnenehdodpnebgldhhmicbnlmapj
After installing the above extension you will see a new Magento tab after right-clicking and selecting “Inspect” on the page.
After installing the MageSpecialist Chrome Toolbar you are ready for the next step.
Install the PhpStorm Remote Call plugin
The PhPStorm Remote Call will allow you to directly open a file in PhpStorm just by clicking on the link or the icon associated with it. Go to File → Settings →Plugins, and make sure the “Marketplace” is being selected.
Then inside the text input type “Remote Call” and proceed with the installation. The plugin will be ready to use after restarting the IDE.
Install the MSP DevTools module by composer
Inside your Magento root please execute the following command in order to install the MSP DevTools module
# composer require msp/devtools
Enable the profiler
Setting the profiler on MSP DevTools is composed of three steps:
a. Edit the bootstrap file
The pub/bootsrap.php file contains a basic configuration that is loaded on boot time by the Magento App, so we need to set the Magento profiler on boot time as by making the following changes:
Original
$profilerConfig = isset($_SERVER[‘MAGE_PROFILER’]) && strlen($_SERVER[‘MAGE_PROFILER’])
? $_SERVER[‘MAGE_PROFILER’]
: trim(file_get_contents(BP . ‘/var/profiler.flag’));
if ($profilerConfig) {
$profilerConfig = json_decode($profilerConfig, true) ?: $profilerConfig;
}
After modification:
$profilerConfig = $_SERVER[‘MAGE_PROFILER’] = [ ‘drivers’ => [[‘output’ => ‘MSP\DevTools\Profiler\Driver\Standard\Output\DevTools’]] ];
//Comment the following lines
/*$profilerConfig = isset($_SERVER[‘MAGE_PROFILER’]) && strlen($_SERVER[‘MAGE_PROFILER’])
? $_SERVER[‘MAGE_PROFILER’]
: trim(file_get_contents(BP . ‘/var/profiler.flag’));
if ($profilerConfig) {
$profilerConfig = json_decode($profilerConfig, true) ?: $profilerConfig;
}*/
b. Enable the SQL query feature.
Edit the app/etc/env.php file and add the following line to the default db connection:
…
),
‘db’ =>
array (
‘table_prefix’ => ”,
‘connection’ =>
array (
‘default’ =>
array (
‘host’ => ‘localhost’,
…
‘profiler’ => ‘1’,
),
),
),
‘resource’ =>
array (
…
- Enable the Magento profiler
The Magento profiler can be enabled by simply executing the following command:
# dev:profiler:enable html
- Enabling the MSP DevTools
- Flush your cache.
- Turn OFF Full Page Cache while you are using DevTools.
- Upgrade database data & schema: php bin/magento setup:upgrade
- Open Magento backend and go to Stores > Settings > Configuration > MageSpecialist > DevTools
- Enable devtools and set IP restrictions.
Features
The most powerful features include the following:
- General tab
The General tab information will display information as the Magento version, and the configured locale.
- Observers tab
The Observers tab will display the observers being used in the current URL and the total time spent in executing. Any high number would mean there is a performance issue in the observer and would require troubleshooting or redesign.
Clicking on any of them will display the file path of the file in your local project, and will allow you to open it directly into PhpStorm.
- Blocks tab
The Blocks tab will display the layout blocks being rendered in the current URL and the total time spent in rendering them. Any high number would mean there is a performance issue in the block and would require troubleshooting or redesign.
Clicking on any of them will display the file path of the file in your local project, and will allow you to open it directly into PhpStorm.
It is important to note that the MSP DevTool module will add a data-mspdevtools attribute to most HTML tags, that can be used in the search box for listing the specific element.
- UI tab
The Ui tab will display the Ui components being used in the current URL and the total time spent in executing. Also, clicking on any of them will display more specific info about any of them.
- Magento’s profiler can be configured to be displayed inside Chrome’s Developer tools instead of being displayed at the bottom of the page.
Conclusion
The MSP DevTools module will save you a lot of time developing and troubleshooting on both the front end and back end; also will help you how to detect any performance issue that requires to be addressed, which is a “must to have” module on your development environment.
