如何在AEM触屏UI或经典UI中调试客户端问题

描述

本指南向您展示如何诊断浏览器中的JavaScript问题。

JavaScript错误示例

Uncaught TypeError: $(...).not(...).draggable is not a function
at 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)

分辨率

A. Javascript调试提示

  • 查找并调试与UI按钮绑定的事件处理程序  — 如果错误或问题在触屏UI中与可单击按钮相关,则可能有助于查看页面上与该元素关联的所有事件处理程序。  在 Google Chrome 浏览器中,右键单击按钮、图像、链接等,然后选择“Inspect”。 在左下方的面板中,选择HTML元素。  在右下方的面板中,选择“事件侦听器”选项卡,以查看与元素绑定的事件侦听器。
  • 格式缩小或难以读取的Javascript代码  — 启用 pretty-print 功能 Chrome 调试器,以便更轻松地读取和调试javascript。
  • 在本地修改javascript以测试潜在的修复  — 使用 本地覆盖 功能 Chrome 要在浏览器上编辑javascript文件以测试更改,然后再在AEM服务器上进行更改。

B.客户端库调试模式

启用客户端库调试模式对于搜索构成客户端库的单独文件非常有用。

  1. 在中打开页面 Chrome 浏览到出错的页面。

  2. 在URL末尾的地址栏中,在任何URL锚点之前,添加此查询字符串参数 debugClientLibs=true.

    例如:http://localhost:4502/siteadmin?<b>debugClientLibs=true</b>#/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

  • 取消选中 Minify

  • 单击 保存

  • 刷新您正在调试的页面,Javascript将更便于读取和设置断点。

调试提示

如果您无法在客户端库上禁用缩小功能,则至少可以漂亮地打印Javascript以更好地进行调试。 请参阅 本文 如何在 Google Chrome 浏览器。

在此页面上