Magento2 Debug UI components JavaScript

概述
本文描述如何定义在特定页面上使用哪些UI组件、它们的JavaScript组件以及它们使用哪些数据。

要定义页面上使用的UI组件，你可以使用浏览器内置的开发工具，或者额外安装一个插件，例如Knockoutjs context debugger for谷歌Chrome。

Debugging using Knockout.js plugin

为谷歌浏览器安装淘汰调试插件，请执行以下步骤：

1. 打开您的 Google Chrome 浏览器。
2. 展开 Google Chrome 选项下拉菜单
3. 选择设置。
4. 在左窗格中，选择扩展。
5. 滚动到页面末尾，然后单击获取更多扩展链接。
6. 在搜索字段中写入 Knockoutjs context  debuger 并按 Enter 键。
7. 在结果中，找到名为 Knockoutjs context debugger 的扩展（通常是第一个结果），然后点击 Add to Chrome。

要使用插件定义 UI 组件：

1. 在 Chrome 中打开所需的页面。
2. 指向页面上所需的元素，右键单击并选择“检查”。 开发人员工具面板打开。
3. 在面板的右栏中，单击 Knockout 上下文选项卡。 该选项卡显示 UI 组件实例的名称和配置。

要使用插件定义 UI 组件：

在 Chrome 中打开所需的页面。

指向页面上所需的元素，右键单击并选择“检查”。 开发人员工具面板打开。

在面板的右栏中，单击 Knockout 上下文选项卡。 该选项卡显示 UI 组件实例的名称和配置。