第30步:调试工具

最新推荐文章于 2023-03-04 14:21:25 发布

真的是我太天真

最新推荐文章于 2023-03-04 14:21:25 发布

阅读量161

点赞数

分类专栏： SAPUI5

原文链接：https://sapui5.hana.ondemand.com/#/topic/1ff250c2038849f5991209f7e6c36f1f

版权

SAPUI5 专栏收录该内容

40 篇文章 5 订阅

订阅专栏

本文档介绍了如何使用SAPUI5的内置诊断工具和浏览器开发者工具来调试和修复应用中的问题。一个具体的例子是由于输入错误导致价格在发票中不显示。通过检查控件绑定和使用SAPUI5支持工具，我们可以定位并修复这个问题。此外，还提到了UI5Inspector插件作为Chrome浏览器的辅助调试工具。最后，文章强调了加载调试源以提高代码可读性的重要性，并提供了获取帮助和进一步学习资源的途径。

摘要由CSDN通过智能技术生成

说明

尽管我们在之前的步骤中添加了基本的测试覆盖，但似乎我们意外地破坏了应用，因为它不再在发票中显示价格。我们需要在别人发现之前调试并修复这个问题。

幸运的是，SAPUI5提供了一些调试工具，我们可以在应用程序中使用这些工具来检查应用程序逻辑，浏览器的开发人员工具也相当不错。现在我们将检查根本原因。

预览

在这里插入图片描述

诊断窗口

代码

您可以在演练-步骤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 + Shift + Alt / Option + S，我们打开SAPUI5支持诊断工具并检查应用程序。

注意
如果你使用谷歌Chrome浏览器，你可以安装UI5 Inspector插件。有了这个插件，你可以轻松调试基于SAPUI5或OpenUI5的应用程序。更多信息，请参见UI5 Inspector。

除了应用程序的技术信息和类似于浏览器的开发工具控制台的跟踪外，还有一个非常方便的工具用于检查对话框中的此类错误。单击右边的展开符号，打开选项卡Control Tree。

左侧显示SAPUI5控件的层次树，右侧显示所选控件的属性。如果我们现在选择树的第一个ObjectListItem控件，并转到右侧的Binding Infos选项卡，我们实际上可以看到number属性的绑定路径被标记为无效。我们现在可以修正视图中的错误，价格应该会再次出现在发票清单中。

有时错误不容易发现，实际上需要使用浏览器的工具调试JavaScript代码。出于性能方面的考虑，SAPUI5文件以简化版本提供，这意味着所有可能的变量名都被缩短，注释也被删除。

这使得调试更加困难，因为代码的可读性大大降低。可以通过添加URL参数sapu -ui-debug=true来加载调试源，也可以通过按 Ctrl + Shift + Alt / Option + P 并在弹出的对话框中选择“Use Debug Sources”来加载。在重新加载页面之后，您可以在浏览器的开发人员工具的Network选项卡中看到，现在已经加载了许多带有-dbg后缀的文件。这些是源代码文件，包括注释和应用程序的未压缩代码和SAPUI5工件。

在这里插入图片描述