测试和调试代码组件
开发更复杂的组件时，可能需要以交互方式测试和调试其逻辑。 您具有的一个有用实用程序是 Power Apps 组件测试工具，它允许您测试不同的数据和上下文输入以确保组件正常运行。 此外，由于您的组件是使用 TypeScript、CSS 和 HTML 等标准 Web 技术生成的，因此您拥有许多通过该生态系统提供的实用程序，例如在大多数现代浏览器中可用的客户端调试功能。
在 Power Apps 组件测试工具中测试和调试您的代码组件
Power Apps 组件测试工具是由 Microsoft 生成的一个实用程序，可帮助您在本地化环境中快速呈现 Power Apps 组件。 如果您已完成本模块中有关编写代码组件的练习，则您已了解了本实用程序的实际应用。 您可以使用 npm 启动命令，在 Power Apps 组件项目中启动本地测试工具。
启动测试工具后，您的组件将显示在浏览器窗口中，就像您在上一个练习中生成的组件一样。
上下文输入
在测试工具中，您可以为组件提供各种输入，以指定其呈现方式（这有助于确保组件在不同的显示上下文下正确呈现）。
在上下文输入下拉菜单中，您可以选择外形规格，例如 Web、平板电脑和手机。 您还可以提供显式宽度和高度字段，以了解组件在各种维度中的呈现方式。
数据输入
数据输入下拉菜单可帮助您确保在提供不同数据参数时组件按预期运行，并且还允许您根据在给定字段中指定的类型确定组件的呈现方式。
如果您的组件是数据集组件，可以使用模拟数据加载 CSV 文件。 您可以从生成您的组件的示例目标环境中导出 CSV，也可以生成一个新文件。
在上一个示例中，如果要生成新的 CSV 文件，它应与以下示例类似：
name, telephone1, address1_city
Joe, 123-555-0100, Seattle
Mary, 123-555-0101, Atlanta
Steve, 123-555-0102, Redmond
在成功加载 CSV 之后，该组件将显示其记录，并且与您的属性控件一样，您可以分配由组件的相应类型组（在组件的 ControlManifest.Input.xml 文件中定义）指定的各种类型。
通过使用浏览器调试来调试代码组件
大多数现代浏览器具有各种内置调试功能。 Microsoft Edge、Google Chrome、Mozilla Firefox 和 Apple Safari 都具有内置开发人员工具，可提供交互式调试体验。 有关每个浏览器的详细信息，请参阅以下链接。
| 浏览器 | 开发人员工具文档 |
|---|---|
| Microsoft Edge | https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium |
| Google Chrome | https://developers.google.com/web/tools/chrome-devtools |
| Mozilla Firefox | https://developer.mozilla.org/docs/Tools/Debugger |
| Apple Safari | https://support.apple.com/guide/safari-developer/welcome/mac |
在本练习中，您将使用 Microsoft Edge。 打开 Microsoft Edge 浏览器，按下键盘上的 F12，启动 Microsoft Edge 的 DevTools。
使用“元素”面板检查您的 HTML
在 DevTools 中，欢迎之后的第一个可用选项卡是元素。 选择元素，“元素”面板将为您提供一种用于查看在页面中呈现的 HTML 的方法。 您可以通过使用“检查”功能转到呈现控件的位置，可通过以下三种方法之一访问该功能：
选择“元素”面板左上角的选择页面中的元素以进行检查图标，然后选择组件测试工具中的元素。 通过此操作，可在右侧查看器中选择该元素（参见下图中的第 3 项）。
突出显示并右键单击组件中的元素，然后选择检查。
从“元素”面板中选择任何元素。
检查控制台日志并在“控制台”面板中运行脚本
在客户端脚本中提供调试上下文的一个常用机制是使用 console.log() 方法。 如果要在组件的逻辑中提供日志记录，您可以使用本方法。 这些日志在运行时显示在 DevTools 控制台面板中，这提供了一种有价值的方法来跟踪在组件中运行的逻辑。 下图显示了测试工具中的几个日志的示例。
您还能够从控制台内运行自己的脚本。 本方法对于从实时环境的上下文中测试各种方法调用和逻辑很有价值。
在“源”面板中设置调试程序断点
DevTools 中最有价值的实用程序之一是能够在您的代码中设置调试程序断点，以便您可以检查变量和方法实现的流。 对于您作为 Power Apps 组件的一部分开发的 index.ts 文件，本示例将在该文件中设置一个断点。 在以下示例中，将在每次运行 refreshData 方法的断点处停止。
如果您选择控件的按钮，将命中本断点，从而使您能够手动逐步完成事件处理程序的逻辑。 此外，您可以检查值，例如已更改的值，如下图所示。
