IT干货网

UI5-文档-4.30-Debugging Tools

sanshao 2022年03月09日 SAP 159 0

虽然我们在前面的步骤中添加了一个基本的测试覆盖率,但是我们似乎不小心破坏了我们的应用程序,因为它不再显示价格到我们的发票上。我们需要调试这个问题,并在有人发现之前修复它。

幸运的是,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

Debugging

Diagnostics

Technical Information Dialog


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

UI5-文档-4.29-Integration Test with OPA