今回の記事では Magenta Chrome Toolbar for MSP DevTools というMagentoの開発を助けてくれる便利なエクステンションを紹介します。

このエクステンションを利用すると、以下の情報をGoogle Chromeの検証パネルから即座に確認できるようになり、Magentoのテーマ開発を大いに助けてくれるようになるでしょう。

  • Theme
  • Controller / Router
  • Request parameters
  • Layout and Layout updates
  • Observers
  • Blocks, Containers, uiComponents
  • Profiler


このエクステンションは Magento 1・Magento 2 共に対応していますが、今回は Magento 2用のインストール方法を紹介しています。 Magento 1用にインストールしてみたいという方は元記事を参照してみてください。

以下のステップで解説していきます。

  1. 導入の手順
  2. 動作確認
  3. 主な機能紹介
  4. まとめ


1.導入の手順

Google Chromeでの設定とMagentoの設定の二つに分けて解説していきたいと思います。

Google Chrome側の設定

Chrome側の設定では、MageSpecialist DevTools for Magentoというchromeエクステンションをインストールするだけです。

Magento側の設定

Chromeエクステンションのインストールが終わりましたら、次はMagento側の設定を行なっていきます。設定は以下の手順となっています。

  1. コマンドラインから composer を用いて、 msp/devtoolsというエクステンションを入れます。

    composer require msp/devtools

  2. キャッシュを削除しましょう。

  3. DevToolsを使用している際は、Magento2のFull Page CacheはOFFに設定しておきましょう。

  4. composerダウンロードしたMSP_CommonとMSP_DevToolsを有効化します。

    php bin/magento module:enable MSP_Common MSP_DevTools

  5. データベースのデータとスキーマをアップグレードします。

    php bin/magento setup:upgrade

  6. Magentoのadmin画面からDevToolsの設定を行います。　

    Stores > Settings > Configuration > MageSpecialist > DevTools

  7. devtoolsを有効に設定し、Authorized IP listを適切に設定します。

  8. PHP Stormと連動させたい方は Remote Call Plugin をPHP Stormの方でダウンロードしておきましょう。



2.動作確認

それぞれの設定が完了しましたら、実際にサイトから動作確認を行ってみましょう。以下のような画面が表示されていれば完了です。



正しく動作しないという方は以下の設定をもう一度確認してみて下さい。

  • 正しい Magento2 のウェブサイトにアクセスしているか
  • MSP_DevToolsは正しくインストールされているか
  • MSP_DevToolsは有効化されているか
  • Authorized IP listの設定は正しくされているか

3.主な機能紹介


General Page Information

Magentoのバージョン、使用しているモジュール、パス情報などを確認することができます。

Design Information

Designタブを選択すると、layout handleやTheme Titleなどのtheme layoutに関する情報を確認することができます。

Observers Information

この項目では、イベントによって呼ばれた全てのObserverを確認・検索することができます。

Block and Container Information

この項目では、現在のページに含まれている全てのBlockとContainerを確認することができます。また、拡大鏡アイコンをクリックすることで、そのブロックに関する詳しい情報を確認することができます。PHPStormと連動させることで、直接そのファイルを編集することもできます。

UiComponents information

この項目では、UiComponentsに関するcomponent dataやテンプレートパスなどを検索することができます。

4.まとめ

Magento2のテーマ開発の補助として、テンプレートパスヒントを利用していたという方はぜひこちらのエクステンションを試していただきたいと思います。

テンプレートパスヒントではどうしてもデザインが崩れてしまったり、パスヒントが重なってしまい、見たい情報が見れないということがありましたが、このエクステンションを利用することで、元のデザインを崩すことなくブラウザの検証パネルからブロック名などが確認できるので、大変便利であると感じました。

また、テーマ開発だけでなく、現在使用しているBlockやContainer、Observerなどの情報を確認できるこの機能は、きっとエクステンション開発においても大いに活躍してくれることでしょう。

元の記事を以下に掲載しておきます。

https://github.com/magespecialist/mage-chrome-toolbar