Debug an Oracle JET virtual DOM app

Introduction

This tutorial shows you how to debug an Oracle JavaScript Extension Toolkit (Oracle JET) virtual DOM app using browser developer tools.

Debugging in a browser is useful to quickly isolate problematic code and to test solutions. All browsers have developer tools that you can use to perform tasks such as viewing and revising the HTML, Cascading Style Sheets (CSS), and the other source code files in your Oracle JET virtual DOM app. In addition, you can install a Preact browser extension that provides additional debugging tools in your browser’s developer tools when you debug your virtual DOM app.

Objectives

In this tutorial, you will install the Preact browser extension and learn how to use web developer tools in your browser to locate incorrect code in your Oracle JET virtual DOM app, change a supplied sample project file, and review the changes live in the browser.

Prerequisites

Task 1: Install Preact DevTools

An Oracle JET virtual DOM app includes, by default, the import statement to initialize a connection to Preact DevTools, a browser extension that provides additional debugging tools in Chrome DevTools. Install the Chrome browser extension that Preact provides for download at https://preactjs.github.io/preact-devtools/.

Once you have installed the extension, you’ll see a Preact tab in Chrome DevTools that provides additional tools to debug your virtual DOM app, such as a component hierarchy viewer.

Preact Developer Tools Tab

Task 2: Run the Oracle JET Virtual DOM App

  1. Navigate to the JET-Virtual-DOM-app/src/components/content directory, create a backup copy of your index.tsx file, and then download the provided index.tsx sample file to the same directory.

  2. If the Oracle JET tooling server batch job is running in the terminal window, press Ctrl+C, and if prompted, enter y to exit the server batch job. The server batch job only recognizes revisions that you make to existing app files. After you create new files, you must run the app again.

  3. In the terminal window, from the JET-Virtual-DOM-app directory, run the app.

    npx ojet serve

    Your browser displays the sample with a compressed chart that is not a bar or pie chart. The Select Chart dropdown list doesn’t work.

    Select Chart dropdown list

  4. If your default browser isn’t Google Chrome, then open it and copy the open page’s address into the Google Chrome URL address field.

Task 3: Debug the Virtual DOM App

  1. In your Google Chrome browser, right-click on the chart that appears on the page and select Inspect from the context menu that appears.

    Chrome DevTools opens and displays the Elements and Styles panels that show the HTML and CSS that render your virtual DOM app.

  2. In the Elements panel, select the element that begins with <oj-chart id="barChart" and note how, in the Styles tab, below the Chart component position diagram, that the Chart component width attribute reads 135 pixels as its value.

    Chrome Developer Tools

    The oj-chart custom HTML element is contained by an HTML div element that sets the width to 135px and causes the Chart component to look compressed on the page. Thus, the Chart component inherits its width from a parent container and ignores the width style setting of 100%.

  3. In Chrome DevTools, press Ctrl+Shift+P and select Show Console from the menu that appears.

  4. Enter the following commands to determine the values for the Select Single component’s value property and the Chart component’s type property.

    document.getElementById("basicSelect").getProperty('value')
// The Console returns 'pie'
document.getElementById("barChart").getProperty('type')
// The Console returns 'funnel'

    The Chart component’s type property value should match the value specified by the Select Single component, but it does not.

  5. Enter the following command to set the Chart component´s type property value to pie in the browser.

    document.getElementById("barChart").setProperty('type', 'pie')

    The browser updates to display a Pie chart. This suggests that we need to examine the source code where the Chart component’s type property is set.

    Update Chart type using Console commands

Task 4: Fix the Virtual DOM App Code

  1. Navigate to the JET-Virtual-DOM-app/src/styles directory and open the app.css file in an editor.

  2. If not already present, add the style class chartStyle at the end of the appRootDir/src/css/app.css file.

    .chartStyle {
  max-width: 500px;
  width: 100%;
  height: 350px;
}

  3. Navigate to the JET-Virtual-DOM-app/src/components/content directory and open the index.tsx file in an editor.

  4. Search for the oj-chart element and remove the <div style="width:135px;"> tags that surround the oj-chart tag.

  5. Replace the style attribute with the class attribute that references style properties in your appRootDir/src/styles/app.css file.

    <oj-chart . . .	style="width:100%;height:350px;">

    Becomes

    <oj-chart . . . class="chartStyle">

    It is good practice to place styles that you want to apply to components in a separate CSS file rather than use the inline style attribute demonstrated in the previous example.

  6. In the oj-chart element, modify the type property to reference the val variable that the useState hook added instead of the hard-coded reference to the funnel chart type.

    <oj-chart
   id="barChart"
   type={val}
   // type="funnel"

    Tip: If desired, add funnel to the chartTypeData array that lists the types of chart in the index.tsx file.

    const chartTypeData = [
  { value: "bar", label: "Bar" },
  { value: "pie", label: "Pie" },
  { value: "funnel", label: "Funnel" },
];

  7. To verify the changes, save your file and view the updated output of the virtual DOM app in your browser.

  8. Replace the sample file with your original index.tsx file.

  9. Close the browser window or tab that displays your running virtual DOM app.

  10. In the terminal window, press Ctrl+C, and, if prompted, enter y to exit the Oracle JET tooling batch job.

  11. Leave the terminal window open for your next tutorial.

Next Step

To proceed to the next tutorial in this learning path, click here.

More Learning Resources

Explore other labs on docs.oracle.com/learn or access more free learning content on the Oracle Learning YouTube channel. Additionally, visit education.oracle.com/learning-explorer to become an Oracle Learning Explorer.

For product documentation, visit Oracle Help Center.