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.

In this blog, I will give you information about how 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

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

Features of Mage chrome toolbar

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

Mage chrome toolbar’s installation & configuration

  • 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
$_SERVER['MAGE_PROFILER'] = [
     'drivers' => [
          [
      'output'=>'MSP\DevTools\Profiler\Driver\Standard\Output\DevTools'
      ]
   ]
];
  • Or you can add below line to .htaccess
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 … :)

  • Share :