虽然我们在前面的步骤中添加了一个基本的测试覆盖率,但是我们似乎不小心破坏了我们的应用程序,因为它不再显示价格到我们的发票上。我们需要调试这个问题,并在有人发现之前修复它。
幸运的是,SAPUI5提供了一些调试工具,我们可以在应用程序中使用它们来检查应用程序逻辑,而现代浏览器的开发工具也相当不错。我们现在来检查一下根本原因。
Preview
The diagnostics window
Coding
You can view and download all files at Walkthrough - Step 30.
webapp/view/InvoiceList.view.xml
<mvc:View controllerName="sap.ui.demo.walkthrough.controller.InvoiceList" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <List id="invoiceList" class="sapUiResponsiveMargin" width="auto" items="{ path : 'invoice>/Invoices', sorter : { path : 'ShipperName', group : true } }"> <headerToolbar> <Toolbar> <Title text="{i18n>invoiceListTitle}"/> <ToolbarSpacer/> <SearchField width="50%" search="onFilterInvoices"/> </Toolbar> </headerToolbar> <items> <ObjectListItem title="{invoice>Quantity} x {invoice>ProductName}" number="{ parts: [{path: 'invoice>ExTendedPrice'}, {path: 'view>/currency'}], type: 'sap.ui.model.type.Currency', formatOptions: { showMeasure: false } }" numberUnit="{view>/currency}" numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"> <attributes> <ObjectAttribute text="{ path: 'invoice>Status', formatter: '.formatter.statusText' }"/> </attributes> </ObjectListItem> </items> </List> </mvc:View>
我们在number属性的绑定中引入了一个打印错误,以模拟经常出现的错误;我们没有使用“invoice>ExtendedPrice”,而是使用'invoice>ExTendedPrice'。现在我们调用这个应用程序并注意到价格实际上是缺失的。按CTRL + ALT + SHIFT + S,打开SAPUI5支持诊断工具,检查app。
请注意:如果你使用的是谷歌Chrome浏览器,你可以安装UI5 Inspector插件。有了这个插件,您可以轻松调试基于SAPUI5或openui5的应用程序。有关更多信息,请参见UI5 Inspector。
除了关于应用程序的技术信息和类似于浏览器的developer tools控制台的跟踪之外,在这个对话框中还有一个非常方便的工具来检查这些错误。单击右侧的展开符号打开选项卡控制树。
左边显示SAPUI5控件的层次树,右边显示所选控件的属性。如果我们现在选择树的第一个ObjectListItem控件,并转到右边的Binding Infos选项卡,我们可以看到number属性的绑定路径被标记为无效。我们现在可以纠正视图中的错误,价格应该再次出现在发票列表中。
有时错误并不容易发现,您实际上需要使用浏览器的工具调试JavaScript代码。出于性能原因,SAPUI5文件是在一个缩小的版本中提供的,这意味着所有可能的变量名都会被缩短,注释也会被删除。
这使得调试更加困难,因为代码可读性差得多。您可以通过添加URL参数sap-ui-debug=true或按CTRL + ALT + SHIFT + P并在显示的对话框中选择Use debug sources来加载调试源。在重新加载页面之后,您可以在浏览器开发工具的Network选项卡中看到,现在加载了许多带有-dbg后缀的文件。这些是源代码文件,包括评论和应用程序的未压缩代码以及SAPUI5工件。
有关SAPUI5支持工具的更详细说明,请参阅故障排除教程Troubleshooting。
如果您遇到了问题,需要帮助完成一些开发任务,您还可以在sapui5相关论坛(例如SAP社区SAP Community或Stack Overflow Stack Overflow上发布问题。
Conventions
按照SAPUI5惯例,未压缩的源文件以*-dbg.js结尾
Parent topic: Walkthrough
Previous: Step 29: Integration Test with OPA
Next: Step 31: Routing and Navigation
Related Information