ドキュメント

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

Last update: Thu Mar 28 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

この記事では、次の測定を通じて、AEM Touch 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 コードの形式   — を有効にします。 プリティプリント 機能を使用して javascript の読み取りとデバッグを容易におこなえるようになりました。
  • JavaScript をローカルに変更して、潜在的な修正をテストする  - ローカルオーバーライド Chrome の機能を使用して、AEMサーバーで変更を加える前にブラウザーで javascript ファイルを編集して、変更をテストできます。

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. これで、  ソース」タブをクリックします。 行番号を右クリックし、「 」を選択して、コードにブレークポイントを設定します。  ブレークポイントを追加します。   詳しくは、 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