UI5-文档-4.30-Debugging Tools

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

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