SAP UI5 应用开发教程之三十八 - 使用 Chrome 开

无论进行何种编程语言的开发，程序员们每天都在和程序运行错误打交道。SAP UI5 开发也不例外，当我们运行编写好的 UI5 应用执行出现错误时，使用包括 Chrome 开发者工具，有助于我们通过显示的错误信息来定位代码编写可能存在问题的准确地址。

本文通过一些实际的例子来讲解当 SAP UI5 程序执行出错时，如何使用 Chrome 开发者工具，查找到出错的上下文代码位置。

本步骤的源代码，地址如下：

https://github.com/wangzixi-diablo/ui5-tutorial/tree/main/38

进入文件夹 38，执行命令行 npm install 和 ui5 serve，访问 url：

http://localhost:8080/webapp/index.html

我们首先打开 Chrome 开发者工具，切换到 Console 面板，然后点击下图图例1 的按钮，将 Console 面板已经显示的消息清除掉。

第二步点击 Say Hello 按钮，然后就能看到下图图例3，Console 区域所示的错误消息了。

Say Hello 按钮点击后，并没有出现我们期望的弹出框，页面没有任何反应。而 Console 面板显示的这些错误消息，有助于我们迅速定位问题。

可别小看这个面板里显示的这些内容，它们信息量巨大!

• 图例1：引起 SAP UI5 程序执行出错的文件位置，这个文件是我们工程文件里自己编写的 App.controller.js. 注意，有些时候我们会发现抛出错误的是 SAP UI5 框架文件本身，这种情况下，99%的可能性仍然是我们应用代码里的 bug 造成的，只是错误消息通过 SAP UI5 框架文件里的代码抛出。本教程后面的步骤会准备一些具体例子来说明。

• 图例2：出错时程序执行的调用栈上下文信息。以上图为例：

我们点击 Say Hello 按钮后，SAP UI5 框架响应这个点击事件的入口代码是函数：
HTMLDivElement.q，实现位于文件 jquery-mobile-custom-dbg.js 的第 2019 行，第 6 列。

函数 HTMLDivElement.q 又会调用 jquery-mobile-custom-dbg.js 文件第 1899 行第三列的 g 函数。这种调用层级关系以此类推，最后就会调用到我们自己编写的 onShowHello 方法。

• 图例3：引起程序出错的具体原因：

this.getView(...).getModel(...).getproperty is not a function

意思是，我们在代码里调用了一个名为 getproperty 的函数，但它实际上并不是一个函数。

点击图例1 的超链接，会自动跳转到文件 App.controller.js 第九行：

出错的地方，Chrome 开发者工具以红色波浪线来高亮显示。

我们可以使用前一步骤刚刚学到的知识来排查错误：SAP UI5 应用开发教程之三十七 - 使用 Chrome 开发者工具 Console 面板进行元素审查

在 Chrome 开发者工具告诉我们的位置：App.controller.js 第九行设置一个断点：

然后单击 Say Hello 按钮，断点触发了：

此时切换到 Console 标签，输入我们前一步骤学习到的自动完成功能，键入 this.getView().getModel().getp, 从自动完成列表里发现，getModel() 方法返回的 model 实例，只有名为 getProperty 的方法，而我们的代码里，错误地把 P 弄成了小写 p:

纠正这个拼写错误后，程序运行就没有问题了。

注意，我们如果使用快捷键 Ctrl + Alt + Shift + P，在弹出的工具窗口里选择 Use Debug Sources，即以调试模式启动 SAP UI5 应用：

此时 Chrome 开发者工具显示错误消息的上下文调用栈信息里的函数名，不再是之前被 minify 之后的形如 g，q 之类的单个字母的函数名。

以 Say Hello Button 的点击为例，从调用上下文可以发现，用户点击操作，触发的事件名称，依次经历了 click 到 tap 到 press 的变换。这也涉及到 SAP UI5 的事件处理机制的实现原理。相关更深入的分析，参考我的文章：深入学习SAP UI5框架代码系列之三：HTML原生事件 VS UI5 Semantic事件。

更多Jerry的原创文章，尽在："汪子熙":