Magento Chrome Extension by MageSpecialist

June 1, 2017 · 312 words · 2 minutes read magento magento2 modules

Magento Chrome Extension by MageSpecialist

There is certainly no shortage of available development tools for both Magento 1 and Magento 2. In addition to the dev tools provided natively by Magento, there are plenty of third party modules available, some free, such as @madalinoprea’s developers toolbar and some premium, such as @alanstorm’s Commerce Bug. One extension that stands out is MageSpecialist’s DevTool module, which has a companion Chrome Extension, allowing for debugging directly in the Chrome Developer Tools console

For a full list of features and a detailed installation steps, check out the project on Github.

Getting started

The first thing that you’ll need is the actual Chrome Extension. You can find that on Chrome Web Store. After installing the extension, you should have a new tab available from the developer console called Magento

Installing the module

Next, you’ll need to install the module that your new Chrome Extension will need to communicate with.

For Magento 1, you can grab the latest version of the module directly from GitHub. Unzip the package in your Magento root.

If you’re using Magento 2, you can install the module using composer composer require msp/devtools. Next, run php bin/magento setup:upgrade to enable the module.

You can enable and configure the module in Stores > Settings > Configuration > MageSpecialist > DevTools

Note: Be sure to disable Full Page Cache

Optional PhpStorm Integration

The Chrome Extension can be integrated directly into PhpStorm to open and edit template files directly. To use this feature, you’ll need to download the Remote Call Plugin from JetBrains and enable the feature in the Magento Admin

One small caveat

The MageSpecialist module uses it’s own IP restrictions to handle the visibility of Magento toolbar rather than the built in developer IP restrictions. Don’t forget to copy any IP’s from Stores > Settings > Configuration > Advance > Developer to Stores > Settings > Configuration > MageSpecialist > DevTools