Magento 2 frontend tools for developers

As developer we know, how extra 15 mins could help us in cross-checking the work and improve if something is lacking. Not every developers has those extra 15 mins, but you can produce it by increasing your work speed and using tools already provided in the system.

The blog is important for all the Magento developers who want to speed up Magento 2 frontend development using chrome extensions. .

Why we should use Chrome extensions for Magento 2 Frontend Development?

Do you have an issue with the finding template/block without enabling a template hint?
Taking time while theme development/customization for finding a correct block/layout/phtml?
Having difficulties to identify which queries are executed on a particular page?
Do you want to increase the theme development speed?

Available Chrome extensions

I have checked the various available extensions to speed up Magento 2 frontend development. I have found the best 2 extensions which I have mentioned below. You can use any of them. Mage chrome toolbar by Magespecialist

JH Block Logger

Above both extensions have their own benefits but it depends on your requirement. Both tools are very easy to install & use.

Benefits

It allows you to quickly access the information you need to debug your Magento performances, to build your new theme or to modify an existing one.
Easily and fast access to observers, profilers and theme information.
Help to identifies phtml/layout/block for an element.
Help to identifies locale, theme & stack.
Get information about which queries are executed on the page and how much time taken by each query.
All this information are available with one click after one-time setup & configuration.

Comparison

Global Page Information

From the main panel you can see information from:

Theme
Controller / Router
Request parameters
Layout and Layout updates
Observers
Data Models inspector
Collections inspector
Blocks, Containers, uiComponents
Profiler

Item Information

By selecting an item in you page you can see:

Block information
Used template
Server elapsed time
Block nesting
Template file
Cache information
uiComponent information
Container information

Go to the project root directory in CLI and run following command
- composer require msp/devtools
Now execute below command to Update database
- php bin/magento setup:upgrade
Turnoff Full page caching while using this tool.
Open Magento backend and go to Stores > Settings > Configuration > MageSpecialist > DevTools
Enable the devtools and set IP restrictions (This extension working on restricted ip’s only)
To enable Profiler to do the following.
- Add below line to pub/index.php

Copy Code

$_SERVER['MAGE_PROFILER'] = [
     'drivers' => [
          [
      'output'=>'MSP\DevTools\Profiler\Driver\Standard\Output\DevTools'
      ]
   ]
];

Or you can add below line to .htaccess

Copy Code

SetEnv MAGE_PROFILER MSP\DevTools\Profiler\Driver\Standard\Output\DevTools

Now, Install chrome extension from below link

https://chrome.google.com/webstore/detail/magespecialist-devtools-f/odbnbnenehdodpnebgldhhmicbnlmapj

That’s it installation & configuration is done. I had followed some basic and simple steps to use tools. Now, let’s check some screens of this tool which I had taken it from my instance.

Special thanks to @wearejh & @magespecialist for providing such nice tools to Magento Developers.

I hope this blog will help you with frontend development. Let me know your thoughts in the comment section. And if you have any query with this blog I will be happy to solve that. Thanks and cheers … 🙂