ドキュメント

AEM タッチ UI またはクラシック UI でクライアントサイドの問題をデバッグする方法

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

この記事では、次の方法を使用して、AEM タッチ UI やクラシック UI でクライアントサイドの問題をデバッグする方法について説明します。

  • UI ボタンに関連付けられたイベントハンドラーのデバッグ
  • クライアントライブラリデバッグモードの有効化
  • 縮小 Javascript の無効化

説明 description

環境

Adobe Experience Manager

問題/症状

ブラウザーで JavaScript の問題を診断する方法を説明します。

JavaScriptのエラー例

Uncaught TypeError: $(...).not(...).draggable is not a functionat HTMLDocument. (lightbox.js:45)at HTMLDocument.dispatch (jquery.js:4665)at HTMLDocument.elemData.handle (jquery.js:4333)at Object.trigger (jquery.js:4574)at HTMLElement. (jquery.js:5284)at Function.each (jquery.js:384)at jQuery.fn.init.each (jquery.js:136)at jQuery.fn.init.trigger (jquery.js:5283)

解決策 resolution

A. JavaScript デバッグのヒント

  • UI ボタンに結び付けられたイベントハンドラーを見つけてデバッグする - エラーや問題がクリック可能なボタンに関連するタッチ操作対応 UI にある場合、ページ上のその要素に結び付けられたすべてのイベントハンドラーを確認すると役立つ場合があります。  Google Chrome ブラウザーで、ボタン、画像、リンクなどを右クリックし、「Inspect」を選択します。 左下のパネルで、HTML 要素が選択されています。右下のパネルで、「イベントリスナー」タブを選択して、要素に結び付けられたイベントリスナーを確認します。
  • 形式が圧縮された、または読みにくい JavaScript コード - Chrome Debugger の ​ プリティプリント ​ 機能を有効にして、JavaScript の読み取りとデバッグをより簡単にします。
  • JavaScript をローカルで変更して、修正をテストする - Chromeの ​ ローカルオーバーライド ​ 機能を使用して、ブラウザー上の JavaScript ファイルを編集し、AEM サーバーに置く前に変更をテストします。

B. クライアントライブラリデバッグモード

クライアントライブラリデバッグモードを有効にすると、クライアントライブラリを構成する個別のファイルを検索するのに役立ちます。

  1. Chrome ブラウザーでエラーが発生したページを開きます。

  2. アドレスバーの URL の末尾にある URL アンカーの前にクエリ文字列パラメーター「debugClientLibs=true」を追加します。

    例：http://localhost:4502/siteadmin?debugClientLibs=true#/content/we-retail

    このオプションにより、クライアントライブラリは、ファイルを統合する代わりに、すべてのファイルを個別に読み込みます。

    タッチ操作対応 UI では、クライアントライブラリのデバッグモードを有効にすると、ページが破損する可能性があります。ただし、クライアントライブラリのどのファイルにデバッグ対象の特定のコード行が含まれているかを表示するために使用できるので、これは便利な機能です。

  3. Chrome ブラウザーの右上のメニューで、 ツール/その他のツール/> デベロッパーツール > の順にクリックします

  4. 開発者ツール 」パネルの「 コンソール 」をクリックします。

  5. JavaScript エラーが表示されます。エラーの右側に、JavaScript コードのエラーが発生したファイルと行番号のリンクが表示されます。 ファイルのリンクをクリックします。

  6. 「Sources」タブでコードのエラーが発生した行に移動します。 コードにブレークポイントを設定します。それには、行番号を右クリックし、「Add breakpoint  ブレークポイントについて詳しくは、 1}Google Chromeのドキュメント 🔗 参照してください。

  7. ページを更新し、JavaScript のデバッグを開始します。

C. 圧縮を無効にする

デバッグの際に JavaScript が圧縮されている場合、ブラウザーで整形するか、圧縮を無効にすることが役立ちます。

  • http://aemhost/system/console/configMgr/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImplに移動します

  • 「 縮小 」をオフにします

  • 「Save」をクリックします

  • デバッグしているページを更新すると、JavaScript が読みやすくなり、ブレークポイントを設定しやすくなります。

デバッグのヒント

クライアントライブラリで圧縮を無効にできない場合は、少なくとも JavaScript をプリティプリントしてデバッグを改善できます。Google Chrome ブラウザーでこれを実行する方法については、​ この記事 ​ を参照してください。

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f