如何在AEM触屏UI或经典UI中调试客户端问题
本文介绍了如何通过以下措施在AEM触屏UI和/或经典UI中调试客户端问题：
- 调试绑定到UI按钮的事件处理程序
- 启用客户端库调试模式
- 禁用缩小的Javascript
描述 description
环境
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调试器中的pretty-print功能，使其更易于阅读和调试javascript。
- 在本地修改javascript以测试潜在的修复 — 使用Chrome中的本地覆盖功能，在浏览器上编辑javascript文件以在AEM服务器上进行更改之前对其进行测试。
B. 客户端库调试模式
启用客户端库调试模式对于搜索组成客户端库的单独文件很有用。
-
在Chrome浏览器中打开页面，转到有错误的页面。
-
在URL末尾的地址栏中，在任何URL锚点之前，添加此查询字符串参数“debugClientLibs=true”。
例如： http://localhost:4502/siteadmin？debugClientLibs=true#/content/we-retail
此选项使客户端库单独加载其所有文件，而不是合并它们。
在 Touch UI 中，启用客户端库的调试模式可能会破坏页面。但是，这仍然是一个有用的功能，因为它可用于查看客户端库中的哪个文件包含您正在调试的特定代码行。
-
在Chrome浏览器（右上角）中，转到 工具=
>其他工具=>开发人员工具 -
单击“开发人员工具”面板的“控制台”。
-
应列出 JavaScript 错误。 错误右侧是一个链接，其中包含JavaScript代码失败的文件和行号。 单击文件链接。
-
现在您应该在代码失败的行上的 源 选项卡上。 通过右键单击行号并选择 添加断点，在代码中设置断点。 有关断点的更多详细信息，请参阅Google Chrome文档。
-
刷新页面，您就可以开始调试 JavaScript。
C. 禁用缩小
在调试期间，如果 javascript 被缩小，则有助于在浏览器中对其进行格式化或禁用缩小。
-
转到http://aemhost/system/console/configMgr/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl
-
取消选中 最小化
-
单击 保存
-
刷新您正在调试的页面，javascript 将更易于阅读和设置断点。
调试提示
如果您无法在客户端库上禁用缩小，那么您至少可以使用 pretty-print 显示 javascript 以便更好地调试。 请参阅本文以了解如何在Google Chrome浏览器中完成以上操作。