MagentoTalks - Tools used in Magento development, Stanislav Matyavin

О чем сегодня поговорим?
● Популярные инструменты, которые должен знать
каждый
● Типовые (и не очень) приемы дебаггинга,
упрощающие отладку:
- Frontend-приемы
- Backend-приемы
● Малоизвестные инструменты, ускоряющие
разработку

PHPStorm - Magento 2 Plugin
Статья о конфигурировании PHPStorm на нашем портале:
https:/
/itdelight.com/setting-up-a-magento2-project-in-phpstorm/
Краткое описание доступного функционала:
● Генерирование кода - CRUD, Плагины, модели и многое другое
● Подсветка синтаксиса
● Корректное указание наследований и подключенных функций
● Быстрая генерация URN маппинга
Плюсы:
● Большое количество функционала, действительно ускоряет работу
● Постоянно обновляется и поддерживается самой Adobe
Минусы:
● Недоступен для других IDE кроме PHPStorm, который требует подписку
● Работает только с Magento 2

PHPStorm - Magicento 1/2
Страница автора плагина:
https:/
/magicento.com/
Краткое описание доступного функционала:
● Генерирование кода - CRUD, Плагины, модели и многое другое
● Подсветка синтаксиса
● Корректное указание наследований и подключенных функций
Плюсы:
● Большое количество функционала, действительно ускоряет работу
● Может работать одновременно с Magento 2 Plugin
● Доступны версии как для Magento 1, так и для Magento 2
Минусы:
● Недоступен для других IDE кроме PHPStorm, который требует подписку
● Требуется подписка, а также для каждой из версий Magento требуется
отдельный плагин
● Слабо поддерживается автором

PHPStorm - Live Templates
Доступные проекты с Live Templates для Magento 2
● https:/
/github.com/staempﬂi/magento2-phpstorm-templates
● https:/
/github.com/markshust/phpstorm-magento-live-templates
Плюсы
● Генерирование кода по вашему собственному шаблону
● Максимальная управляемость шаблона
Минусы
● Функционал перекрывается PHPStorm Magento 2 Plugin

Онлайн генератор кода - Mage2Gen
https:/
/mage2gen.com/
Плюсы:
● Способен сгенерировать действительно большую часть модуля по
вашему запросу
● Поддерживается автором, добавляются новые фичи
● Есть консольная версия
Минусы:
● Из-за избытка возможностей по генерации кода, выглядит довольно
сложным
● Слабая документация

File watcher для очистки кеша - Magento 2 Cache Clean
https:/
/github.com/mage2tv/magento-cache-clean
Основной функционал:
При запуске в root директории проекта, начинает отслеживать изменения
файлов и сбрасывать кэш для тех типов, для которых оно подходит.
Например:
Изменение шаблона *.phtml вызовет очистку full_page и block_html, а
обновление файла system.xml сбросит кэш для конкретной adminhtml
секции.
В итоге можно работать с постоянно включенным кэшем - ﬁle-watcher будет
очищать его для вас по необходимости.
Плюсы:
● Активно поддерживается автором, работает с Redis
● Есть поддержка hotkeys для форсированной очистки
Минусы:
● Иногда вылетает =)

Grunt - css source map и онлайн обновление стилей
https:/
/devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-topics/css_debug.html
https:/
/ﬁrebearstudio.com/blog/magento-2-grunt.html - хорошая дока по настройке
Не знаете, какой именно less файл содержит стили для конкретного
элемента? Устали постоянно перезагружать страницу для обновления
стилей? Grunt решает эту проблему!
Поставляемый совместно с Magento 2, данный инструмент многими
упускается из виду. Однако без него полноценно разрабатывать Luma-
подобные темы чрезвычайно сложно - время на разработку увеличивается в
разы.
Плюсы:
● Не требует отдельной установки
● Простая настройка - после первого опыта установки
Минусы:
● Не отслеживает новые less файлы - требуется перезапуск
● Медленно работает на большом количестве тем

N98-magerun - швейцарский нож backend разработчика
N98-magerun - https:/
/github.com/netz98/n98-magerun2
Разумеется, невозможно не упомянуть такой замечательный инструмент как
N98-magrun.
Данный инструмент представляет собой исполняемый файл, который
необходимо запускать в консоли, находясь в root директории проекта.
Именно с его помощью можно быстро отдебажить зависшую очередь, крон
задачу, сдампить базу данных и многое, многое другое.
Максимальная рекомендация

Приемы по дебагу - Frontend
Как определить источник вызова JS файла?
Добавить в файл require.js в папке libwebrequirejsrequire.js следующие строки:
if (depMap.parentMap) {
console.log('depMap name: ' + depMap.name + ' originalName: ' + depMap.originalName, depMap);
}
if (!depMap.parentMap) {
console.log('Global Init depMap name: ' + depMap.name + ' originalName: ' + depMap.originalName,
depMap);
}
После строки:
handler = getOwn(handlers, depMap.id);
В функции:
enable: function () {

Как быстро обновить конфигурацию RequireJs без компиляции?
В режиме разработчика (bin/magento deploy:mode:set developer) для JS
файлов формируется сим-линк на файл в вашей теме или в папке модуля.
Именно поэтому вы можете изменять JS в теме и сразу видеть данные
изменения в браузере после перезагрузки страницы.
Разумеется, если вы не сгенерировали их заранее - в этом случае ссылки не
формируются.
Однако нужно понимать, что в некоторых случаях ссылку указать не на что -
такие файлы компилируются из нескольких и не обновляются при изменении.
Таким файлом и является requirejs-config.js.
Потому при изменении конфигурации в теме или модуле, просто удалите
requirejs-config.js из сгенерированных static файлов - к примеру:
pub/static/frontend/Magento/luma/en_US/requirejs-config.js
Это же касается любых JS файлов, которые вы могли сгенерировать с
помощью php bin/magento setup:static-content:deploy

Получить список всех UI компонентов на странице
Порой необходимо отдебажить конкретный UI-component, однако не ясно,
подключен он или нет, каково его имя в реестре и так далее.
Для решения этой проблемы можно использовать следующую конструкцию в
консоли разработчика:
registry = require('uiRegistry')
registry.ﬁlter(function(item) {
console.log(item.name);
})
Данная конструкция была представлена Аланом Штормом, на его личном
портале, рекомендую почитать:
https:/
/alanstorm.com/magento_2_simplest_ui_knockout_component/

Принудительный рендер конкретного UI компонента
KnockoutJS и RequireJS устроены таким образом, что продебажить
конкретный элемент очень сложно - слишком большое количество вызовов и
установка breakpoints бесполезна.
Однако есть вариант принудительного рендера конкретного элемента:
ko = require('ko');
$t = require('mage/translate'); - если требуется перевод
ko.renderTemplate(ko.dataFor($0).getTemplate(), ko.dataFor($0), {}, $0);
Предварительно выбрав в консоли разработчика конкретный элемент
и вызвав данную конструкцию, вы запустите повторный рендер компонента,
который уже можно дебажить привычным способом

Приемы по дебагу - Backend
Быстрый дебаг конкретного метода
Magento 2 устроена таким образом, что практически любое изменение требует компиляции кода.
Однако бывают такие случаи, когда необходимо протестировать работу конкретного обсервера,
импорта или чего-то подобного, а управляющей конструкции, например, консольной команды, для него
нет.
Создание управляющей конструкции занимает время и не всегда доступно.
Для решения этой проблемы можно создать файл php в корне и использовать ObjectManager:
<?php
require __DIR__ . '/app/bootstrap.php';
use MagentoFrameworkAppBootstrap;
$bootstrap = Bootstrap::create(BP, $_SERVER);
/** @var $objectManager MagentoFrameworkObjectManagerObjectManager */
$objectManager = $bootstrap->getObjectManager();
$productRepository = $objectManager->create('MagentoCatalogApiProductRepositoryInterface');
$productUrlPathGenerator = $objectManager->create('MagentoCatalogUrlRewriteModelProductUrlPathGenerator');
$product = $productRepository->getById(2154);
echo $productUrlPathGenerator->getUrlKey($product);

Приемы по дебагу - Backend
Извлечение запроса к БД
Иногда требуется извлечь запрос к БД, который формируется, например, при рендере страницы
продукта.
Есть два варианта решения данной задачи:
Использование в коллекции:
$quoteCollection->getSelectSql(true);
Данный метод обращается к классу MagentoFrameworkDBSelect, который в свою очередь наследует
класс Zend_Db_Select, в котором реализация метода __toString() возвращает нам SQL запрос к бд в виде
строки, со всеми переменными.
Вторым вариантом будет включение профайлера БД, который реализован внутри ядра Magento:
https:/
/devdocs.magento.com/guides/v2.4/config-guide/db-profiler/db-profiler.html
Однако данный метод будет отображать все запросы, которые были сформированы при загрузке
страницы и может быть не совсем удобен.

Малоизвестные инструменты-сервисы
Наверное, не совсем корректно называть данные инструменты
малоизвестными - они, скорее, малоиспользуемые обычным разработчиком.
● Blackﬁre.io - PHP профайлер, который оставляет только положительные
эмоции. Однако он является платным и требует довольно сложной
настройки.
● MailTrap - сервис для перехвата всех email сообщений отправляемых
вашим приложением.
● NewRelic - сервис для мониторинга. Мало чем подходит для локальной
разработки, но прекрасно справляется с отловом узких мест в лайве.
● Sentry - сервис для отслеживания ошибок кода и их логирование.

Малоизвестные инструменты - Magento 2 Debug module
Проект на Github: https:/
/github.com/Daseraf/magento2-debug
Поскольку все профайлеры Magento работают по подписной модели, либо
имеют странные архитектурные решения, то нами разрабатывается
собственный профайлер, основанный на идеях известного Symfony
WebProﬁlerBundle.
Плюсы:
● Удобный интерфейс, основанный на решении от Symfony
● Возможность профилирования любых запросов
● Простая установка
Минусы:
● Возможные проблемы с совместимостью между версиями Magento 2

MagentoTalks - Tools used in Magento development, Stanislav Matyavin

Recommended

Recommended

More Related Content

Featured

Featured (20)

MagentoTalks - Tools used in Magento development, Stanislav Matyavin