對 Oracle JET 虛擬 DOM App 進行除錯

簡介

本教學課程示範如何使用瀏覽器開發人員工具對 Oracle JavaScript Extension Toolkit (Oracle JET) 虛擬 DOM 應用程式進行除錯。

在瀏覽器中除錯相當有助快速隔離有問題的程式碼並測試解決方案。所有瀏覽器都有開發人員工具，可用來執行工作，例如檢視和修訂 Oracle JET 虛擬 DOM 應用程式中的 HTML、階層式樣式表 (CSS) 以及其他原始程式碼檔案。此外，您可以在進行虛擬 DOM 應用程式除錯時，安裝 Preact 瀏覽器擴充功能，在瀏覽器的開發人員工具中提供額外的除錯工具。

目標

在本教學課程中，您將安裝 Preact 瀏覽器擴充功能，並瞭解如何在瀏覽器中使用 Web 開發人員工具來尋找 Oracle JET 虛擬 DOM 應用程式中的不正確程式碼、變更提供的範例專案檔案，以及複查瀏覽器中的變更。

必備條件

用來建立已安裝 Node.js 之 Oracle JET 虛擬 DOM App 的開發環境
已安裝 Google Chrome
完成此學習路徑的上一個教學課程，Oracle JET Virtual DOM 應用程式中的資料連結元件
下載至 JET-Virtual-DOM-app/src/components/content 目錄的 index.tsx 範例

工作 1：安裝 Preact DevTools

Oracle JET 虛擬 DOM 應用程式預設會包含匯入敘述句，以初始化 Preact DevTools 連線，這是一種可在 Chrome DevTools 中提供其他除錯工具的瀏覽器擴充功能。請在 https://preactjs.github.io/preact-devtools/ 安裝 Preact 提供下載的 Chrome 瀏覽器擴充功能。

安裝擴充功能之後，您會在 Chrome DevTools 中看到精確頁籤，其中提供對虛擬 DOM 應用程式進行除錯的其他工具，例如元件階層檢視器。

Preact Developer Tools 頁籤

工作 2：執行 Oracle JET Virtual DOM App

瀏覽至 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 會開啟並顯示「元素與樣式」面板，其中顯示呈現虛擬 DOM 應用程式的 HTML 與 CSS。
在「元素」面板中，選取以 <oj-chart id="barChart" 開頭的元素，並注意「樣式」頁籤中「圖表」元件位置圖表下方的「圖表」元件 width 屬性如何讀取 135 像素作為其值。

oj-chart 自訂 HTML 元素包含 HTML div 元素，可將寬度設為 135px，讓「圖表」元件在頁面上進行壓縮。因此，「圖表」元件會繼承父項容器的寬度，並忽略 100% 的 width 樣式設定。
在 Chrome DevTools 中，按 Ctrl+Shift+P，然後從顯示的功能表中選取顯示主控台。
輸入下列命令來決定「選取單一」元件的 value 特性值和「圖表」元件的 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')
```
瀏覽器會更新以顯示圓餅圖。這表示我們需要檢查已設定「圖表」元件之 type 特性的原始程式碼。

工作 4：修正虛擬 DOM App 程式碼

瀏覽至 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 應用程式的所有模組。

其他學習資源

在 docs.oracle.com/learn 上探索其他實驗室，或在 Oracle Learning YouTube 頻道上存取更多免費學習內容。此外，請造訪 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。

如需產品文件，請造訪 Oracle Help Center 。

標題與著作權資訊

Debug an Oracle JET virtual DOM app

F74317-02

Oracle 和 (或) 其關係企業。