改めて振り返るDrupalの モジュール_テーマのデバッグ方法

DrupalConNara 2025 で発表した。「改めて振り返るDrupalの モジュール_テーマのデバッグ方法」についてのスライドです。

Transcript

1. 改めて振り返る Drupalの モジュール /テーマのデバッグ方 法 Kobayashi Motoki (@otofu)

2. 自己紹介 Kobayashi Motoki
 • スタジオ・ウミ株式会社
 • バックエンド担当
 • Drupal歴: 2016〜 (Drupal7-)
 • https://www.drupal.org/u/otofu

3. contact@studio-umi.jp https://www.studio-umi.jp Revision No. 00250602 © 2025 STUDIO UMI PROPRIETARY & CONFIDENTIAL.
4. スタジオ・ウミ株式会社 小林 泰平 〒104-0033 東京都中央区新川1丁目3-21 BIZ SMART 茅場町 6F Tel.03-6868-8247 Webサイト開発 Webアプリケーション開発 Drupal導入支援 10名 会社概要 商号 代表取締役 所在地 電話番号 事業内容 従業員数
5. Drupalサイト開発のエキスパートチーム スタジオ‧ウミは、Drupal 4.7 の時代から約18年にわたり、 “ Drupal専⾨の開発会社 ” として活動してきました。 オープンソースでありながら、単体でも⼗分に利⽤できる 「充実の基本機能」、 CMS の範疇を超えた「⾼い拡張性」、強い規約に基づいた「⾼いメンテナンス性」で、 中〜⼤規模サイトのスタンダードCMSとして不動の地位を誇るCMS「Drupal」。 そんな Drupal の持つ⾼いポテンシャルを、 これまでの経験で培った技術とノウハウを活かして最⼤限に引き出すことで、 ご予算の中で最⼤の価値を⽣み出す最適な Drupal ソリューションをご提供いたします。 スタジオ‧ウミとは
6. オープンソースCMS「Drupal」を⽤いた新規 WebサイトやWebアプリケーションの開発、 既存Drupal サイトの改修、カスタムモジュー ル開発、オリジナルテーマ開発など、Drupal に関することなら何でもお気軽にご相談くだ さい。 保守サポート Drupal 導⼊後のバージョンアップやセキュリ ティアップデートなどの保守サポートについ てもご安⼼ください。 ご要望のお客様には⽉額または年額制のサ ポートプランもご⽤意しています。 Drupal 導⼊⽀援 CMS「Drupal」の専⾨開発会社として、 Drupalプロジェクトをサポート。 技術的な課題解決や、技術者‧運⽤ご担当者 の⽅へのDrupalトレーニングを実施していま す。 Webサイト開発 ご提供サービス
7. Drupalに関することは お気軽にご相談ください お問い合わせはこちら contact@studio-umi.jp www.studio-umi.jp
8. 今日の発表 • デバッグを行うにあたっての基本設定
 • コントリビュートモジュール活用
 • Devel
 • Web Profiler
 • PhpStorm + DDEV + Xdebugによるデバッグ方法
 • (おまけ) DDEV + Datadog によるトレース取得

9. デバッグを行うにあたっての基本設定
10. デバッグを行うにあたっての基本設定 services.yml 設定 • Twigに関するデバッグ機能を有効化 • Twigキャッシュを無効化 • 利⽤テンプレートの可視化 # ベースの services.yml をコピー cd web/sites/default cp -p default.services.yml services.yml # services.yml parameters: twig.config: debug: true cache: false
11. デバッグを行うにあたっての基本設定 settings.local.php 設定 • 各種キャッシュの無効化 • JS, CSSのアグリゲーション抑⽌ • エラー表⽰設定 # ベースのsettings.local.phpをコピー cd web/sites/default cp -p ../example.settings.local.php settings.local.php # エラー表示設定. $config['system.logging']['error_level'] = 'verbose'; # JS,CSSアグリゲーション抑止. $config['system.performance']['css']['preprocess'] = FALSE; $config['system.performance']['js']['preprocess'] = FALSE; # 各種キャッシュ無効化. $settings['cache']['bins']['render'] = 'cache.backend.null'; $settings['cache']['bins']['page'] = 'cache.backend.null'; $settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';
12. デバッグを行うにあたっての基本設定 気をつけるべきポイント • 本設定はローカル環境でのみ有効化 • パフォーマンスに⼤きく影響 • キャッシュによる思わぬバグを⾒逃す可能性 • セキュリティリスクに繋がる可能性 • これらの設定は管理画⾯( /admin/config/development/settings )からも設定可能
13. コントリビュートモジュール活⽤ -Devel-
14. コントリビュートモジュール活用 -Devel- Devel モジュール • https://www.drupal.org/project/devel • Drupalを利⽤するうえで開発者は1度は利⽤するモジュール • 147,000 サイトとかなりのサイトで利⽤されている • 変数や任意の値を画⾯やデバッグ⽤のテキストファイルへ出⼒可能 • 処理が通っているか確認したりサッと変数の中⾝を確認する場合に利⽤ (私の場合)
15. コントリビュートモジュール活用 -Devel- dpm() or \Drupal::service('devel.dumper')->message() • 引数で渡した変数(任意の⽂字列)を画⾯上に表⽰ #[Hook('form_alter')] public function formAlter(array &$form, FormStateInterface $form_state, $form_id): void { dpm($form_id); }
16. コントリビュートモジュール活用 -Devel- ddm() or \Drupal::service('devel.dumper')->debug() • 引数で渡した変数(任意の⽂字列)をテキストファイルへ出⼒ • デフォルトの場合 /tmp/drupal_debug.txt へ出⼒ #[Hook('form_alter')] public function formAlter(array &$form, FormStateInterface $form_state, $form_id): void { ddm($form_id); } cat /tmp/drupal_debug.txt "development_settings_form"
17. コントリビュートモジュール活用 -Devel- TIPS • VarDumper(symfony/var-dumper)の dump を使うとdevelは不要 https://symfony.com/doc/current/components/var_dumper.html • Kintモジュールと組み合わせるとdpm()がより便利になる • Develの設定( /admin/config/development/devel ) composer require 'drupal/kint-kint:^2.1' drush en -y kint
18. コントリビュートモジュール活用 -Devel- Before After
19. コントリビュートモジュール活⽤ -WebProfiler-
20. コントリビュートモジュール活用 -WebProfiler- WebProfiler モジュール • https://www.drupal.org/project/webprofiler • ページ下部にツールバーが表⽰され各種統計情報を表⽰ • ルーティングを確認する為に利⽤ (私の場合)
21. PhpStorm + DDEV + Xdebugによる デバッグ⽅法
22. PhpStorm + DDEV + Xdebug PhpStorm とは • https://www.jetbrains.com/phpstorm/ • JetBrains製品のIDE • Drupal拡張やDDEV拡張を導⼊することで快適なDrupal開発環境を構築 DDEV とは • https://ddev.com/ • DockerをベースとしたOSSのPHP開発環境構築ツール • Dockerの知識が不要で環境構築が可能 (Drupal以外にLaravel等でも利⽤可能) Xdebug とは • PHPの拡張機能として動作するデバッガー及び開発⽀援ツール • PhpStorm等のエディタと連携しステップ実⾏等が可能になる
23. PhpStorm + DDEV + Xdebug PhpStormとDDEVの連携⽅法 • DDEV統合プラグイン( https://plugins.jetbrains.com/plugin/18813-ddev-integration ) • ⼿動設定 参考 • https://docs.ddev.com/en/stable/users/install/phpstorm/
24. PhpStorm + DDEV + Xdebug DDEV環境のでXdebug有効/無効切り替え • コマンド1つで切り替えが可能 • 基本的にはOFFにしておき必要に応じて有効化を推奨 # Xdebug 有効化 ddev xdebug on # Xdebug 無効化 ddev xdebug off
25. PhpStorm + DDEV + Xdebug 〜 ハンズオン 〜
26. (おまけ) DDEV + Datadog による トレース取得
27. DDEV + Datadog Datadog とは • https://www.datadoghq.com/ • クラウド型の監視‧分析プラットフォーム • APM(アプリケーションパフォーマンス監視)の⼀環としてトレース機能が ある
28. DDEV + Datadog Datadog とは • https://www.datadoghq.com/ • クラウド型の監視‧分析プラットフォーム • APM(アプリケーションパフォーマンス監視)の⼀環としてトレース機能が ある
29. DDEV + Datadog • WEBコンテナへDatadog拡張の導⼊ # .ddev/web-build/Dockerfile.datadog RUN curl -LO https://github.com/DataDog/dd-trace-php/releases/latest/download/datadog-setup.php \ && php${DDEV_PHP_VERSION} datadog-setup.php --php-bin=all --enable-appsec --enable-profiling \ && rm datadog-setup.php
30. DDEV + Datadog • Datadog Agentコンテナ追加 # .ddev/docker-compose.datadog.yaml services: datadog: container_name: ddev-${DDEV_SITENAME}-datadog image: gcr.io/datadoghq/agent:latest environment: DD_API_KEY: ${DD_API_KEY} DD_SITE: ${DD_SITE} DD_APM_ENABLED: "true" labels: com.ddev.site-name: ${DDEV_SITENAME} com.ddev.approot: ${DDEV_APPROOT} volumes: - .:/mnt/ddev_config - ddev-global-cache:/mnt/ddev-global-cache - /var/run/docker.sock:/var/run/docker.sock - /proc/:/host/proc/:ro - /sys/fs/cgroup:/host/sys/fs/cgroup:ro
31. DDEV + Datadog • Datadog
32. まとめ
33. まとめ • ローカル環境ではキャッシュを無効化して開発を⾏いやすくしよう • デバッグを⾏う為のコントリビュートモジュールを活⽤しよう • 開発ツール(エディタ + DDEV + Xdebug)を活⽤しよう • APM(アプリケーションパフォーマンス監視)を活⽤しよう
34. ご清聴ありがとうございました