Recommended development tools

You can use whatever tooling that you prefer. The following is our own preferred toolbox for developing within Magento in general and with the Loki Checkout more specifically.

PhpStorm

Yes, you can develop in alternative IDEs like VsCode as well. However, the biggest feature-set for Magento is simply to be found in PhpStorm.

jetbrains.com/phpstorm/

PHPStorm plugin Magento PhpStorm

The official PHPStorm plugin for Magento 2 (according to the Jetbrains marketplace created by Magento Inc, but with Adobe logo) offers many features:

  • Schema validation of various PHP
  • Schema validation of di.xml files;
  • Overriding a PHTML template easily;
  • And much much more;

github.com/magento/magento2-phpstorm-plugin

Xdebug in PhpStorm

Make sure to have Xdebug enabled in your hosting environment. Perhaps keep the setting xdebug.mode set to none most of the time, but allow for toggling the mode to debug quickly (xdebug.mode = debug). When it comes to debugging Loki Components components, placing manual flags and trying to inspect the broken JSON responses in the Networking tab of your browser, is just not smart. With Xdebug in PhpStorm, you can quickly jump to the relevant section.

xdebug.org

Mage2TV Cache Cleaner

Run the watcher and magically see all of your Magento caches refresh.

github.com/mage2tv/magento-cache-clean

MageSpecialist DevTools

By using the MSP_DevTools module in Magento 2 plus the browser extension, you get your hands upon a developer toolbar that doesn't clutter the existing application so much (ok, ok, this might be debatable). And more specifically, it allows you to zoom into a specific HTML element, find out its block definition and open up the relevant PHTML template in PhpStorm.

The Loki Checkout includes its own way of rendering child-blocks and with that, if no mistakes are made, every single block has its own unique block name. This definitely helps when using MSP DevTools. You can select a DOM node in the Elements panel of your browser, zoom into the Magento tab of the MSP DevTools browser plugin and see all of the details of any block in the checkout. And this includes all dynamically created blocks as well!

github.com/magespecialist/m2-MSP_DevTools

Alpine.js devtools

The Alpine.js devtools allow you to see properties of Alpine.js components within your browser quickly. It has its caveats. For instance, when too much changes on the page, you will need to close the browser developer tools and re-open it.

chromewebstore.google.com/detail/alpinejs-devtools/fopaemeedckajflibkpifppcankfmbhk

Yireo_LokiComponentsDebugger

The Magento module Yireo_LokiComponentsDebugger adds a toolbar in the bottom of the page, which allows you to analyse the current Loki Components that are registered via AlpineJS and see also debugger information when an AJAX call is performed (including the translation of targets to blocks, the repository being called and other relevant information). Fun fact, the toolbar itself is actually also a Loki Component.

Last modified: January 11, 2025