调试 Oracle JET 虚拟 DOM 应用程序

简介

此教程演示如何使用浏览器开发人员工具调试 Oracle JavaScript Extension Toolkit (Oracle JET) 虚拟 DOM 应用程序。

在浏览器中调试对于快速隔离有问题的代码和测试解决方案非常有用。所有浏览器都有开发人员工具，您可以使用这些工具来执行任务，例如查看和修订 HTML、级联样式表 (CSS) 以及 Oracle JET 虚拟 DOM 应用程序中的其他源代码文件。此外，您可以在调试虚拟 DOM 应用时，在浏览器的开发者工具中安装 Preact 浏览器扩展，以提供其他调试工具。

目标

在本教程中，您将安装 Preact 浏览器扩展，并了解如何在浏览器中使用 Web 开发人员工具在 Oracle JET 虚拟 DOM 应用程序中查找不正确的代码，更改提供的示例项目文件，并查看浏览器中的实时更改。

Prerequisites

设置为创建安装了 Node.js 的 Oracle JET 虚拟 DOM 应用程序的开发环境
已安装 Google Chrome
Oracle JET Virtual DOM App 中的数据绑定组件完成此学习路径中的上一教程
index.tsx 示例下载到 JET-Virtual-DOM-app/src/components/content 目录

任务 1：安装前缀 DevTools

Oracle JET 虚拟 DOM 应用程序默认包括用于初始化与 Preact DevTools 的连接的 import 语句，该浏览器扩展在 Chrome DevTools 中提供其他调试工具。安装 Preact 提供供下载的 Chrome 浏览器扩展程序，网址为 https://preactjs.github.io/preact-devtools/ 。

安装扩展后，您将在 Chrome DevTools 中看到预览选项卡，该选项卡提供了用于调试虚拟 DOM 应用程序的其他工具，例如组件层次查看器。

Preact 开发者工具标签

任务 2：运行 Oracle JET 虚拟 DOM 应用程序

导航到 JET-Virtual-DOM-app/src/components/content 目录，创建 index.tsx 文件的备份副本，然后将提供的 index.tsx 示例文件下载到同一目录。
如果 Oracle JET 工具服务器批处理作业正在终端窗口中运行，请按 Ctrl+C；如果出现提示，请输入 y 以退出服务器批处理作业。服务器批处理作业仅识别您对现有应用程序文件所做的修订。创建新文件后，必须再次运行应用程序。
在终端窗口中，从 JET-Virtual-DOM-app 目录运行应用程序。
```
npx ojet serve
```
您的浏览器使用不是条形图或饼图的压缩图表显示示例。选择图表下拉列表不起作用。
如果您的默认浏览器不是 Google Chrome，则打开该浏览器，并将打开的页面地址复制到 Google Chrome URL 地址字段中。

任务 3：调试虚拟 DOM 应用程序

在 Google Chrome 浏览器中，右键单击页面上显示的图表，然后从显示的上下文菜单中选择检查。

Chrome DevTools 将打开并显示 "Elements and Styles"（元素和样式）面板，其中显示呈现虚拟 DOM 应用的 HTML 和 CSS。
在“元素”面板中，选择以 <oj-chart id="barChart" 开头的元素，并注意在“样式”选项卡中的“图表”组件位置图下方，“图表”组件 width 属性如何将 135 像素读作其值。

oj-chart 自定义 HTML 元素包含 HTML div 元素，该元素将宽度设置为 135px 并导致图表组件在页面上看起来已压缩。因此，图表组件从父容器继承其宽度，并忽略 100% 的 width 样式设置。
在 Chrome DevTools 中，按 Ctrl+Shift+P，然后从显示的菜单中选择显示控制台。
输入以下命令可确定 Select Single 组件的 value 属性和 Chart 组件的 type 属性的值。
```
document.getElementById("basicSelect").getProperty('value')
// The Console returns 'pie'
document.getElementById("barChart").getProperty('type')
// The Console returns 'funnel'
```
图表组件的 type 属性值应与“选择单个”组件指定的值匹配，但不匹配。
输入以下命令以在浏览器中将图表组件的 type 属性值设置为 pie。
```
document.getElementById("barChart").setProperty('type', 'pie')
```
浏览器将更新以显示饼图。这表明我们需要检查设置了 Chart 组件的 type 属性的源代码。

任务 4：修复虚拟 DOM 应用程序代码

导航到 JET-Virtual-DOM-app/src/styles 目录并在编辑器中打开 app.css 文件。
如果尚不存在，请在 appRootDir/src/css/app.css 文件的末尾添加样式类 chartStyle。
```
.chartStyle {
  max-width: 500px;
  width: 100%;
  height: 350px;
}
```
导航到 JET-Virtual-DOM-app/src/components/content 目录并在编辑器中打开 index.tsx 文件。
搜索 oj-chart 元素并删除 oj-chart 标记周围的 <div style="width:135px;"> 标记。
将 style 属性替换为引用 appRootDir/src/styles/app.css 文件中的样式属性的 class 属性。
```
<oj-chart . . .	style="width:100%;height:350px;">
```
成为
```
<oj-chart . . . class="chartStyle">
```
最好将要应用于组件的样式放置在单独的 CSS 文件中，而不是使用前面示例中所示的内嵌 style 属性。
在 oj-chart 元素中，修改 type 属性以引用 useState 挂钩添加的 val 变量，而不是对 funnel 图表类型的硬编码引用。
```
<oj-chart
   id="barChart"
   type={val}
   // type="funnel"
```
提示：如果需要，请将 funnel 添加到 chartTypeData 数组，该数组列出 index.tsx 文件中的图表类型。
```
const chartTypeData = [
  { value: "bar", label: "Bar" },
  { value: "pie", label: "Pie" },
  { value: "funnel", label: "Funnel" },
];
```
要验证更改，请保存文件并在浏览器中查看虚拟 DOM 应用程序的更新输出。
将示例文件替换为原始 index.tsx 文件。
关闭显示正在运行的虚拟 DOM 应用程序的浏览器窗口或选项卡。
在终端窗口中，按 Ctrl+C，如果出现提示，则输入 y 以退出 Oracle JET 工具批处理作业。
将终端窗口保持打开状态，以便下次学习。

后续步骤

继续本模块中的下一个教程。

本教程是 Your First Oracle JET Virtual DOM App 模块的一部分。

您可以返回到虚拟 DOM 学习路径的主页，以访问有关构建虚拟 DOM 应用程序的所有模块。