Debug an Oracle JET web app

Introduction

This tutorial shows you how to debug an Oracle JET web 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 JavaScript source. For example, when you run your Oracle JET web app in the Google Chrome web browser, you can use Google Chrome Developer Tools (Chrome DevTools) to examine the page source and CSS styles for each component.

Objectives

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

Prerequisites

Task 1: Run the Web App

  1. Navigate to the JET_Web_Application/src/ts/views directory, create a backup copy of your dashboard.html file, and then download the provided dashboard.html 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 web app again.

  3. In the terminal window, from the JET_Web_Application directory, run the app.

    npx ojet serve

    Your browser displays the sample with a compressed 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 2: Debug the Web App

  1. In your Google Chrome browser, press Ctrl+Shift+I to display the Developer Tools window. Chrome DevTools displays the source code.

  2. In the Elements panel, expand the nested tags until you locate the oj-chart custom HTML element. Notice that the type attribute for the oj-chart custom HTML element is hard-coded as bar instead of using the value of the oj-select-single custom HTML element. In the Styles panel of Chrome DevTools, below the Chart component position diagram, notice also that the Chart component width attribute is set to 135 pixels.

    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 style width setting of 100%.

Task 3: Fix the Web App Code

  1. Navigate to the JET_Web_Application/src/ts/views directory and open the dashboard.html file in an editor.

  2. Search for the oj-chart custom HTML element. Change the chart type to [[val]] and remove the <div> tags that surround the tag.

    . . .
</oj-select-single>
<oj-chart id="barChart" type="[[val]]" data="[[chartDataProvider]]" animation-on-display="auto"
          animation-on-data-change="auto" hover-behavior="dim" style='width:100%;height:350px;'>
  <template slot="itemTemplate" data-oj-as="item">
. . .

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

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

  4. Replace the style attribute with the class attribute that references style properties in your app.css file.

    <oj-chart id="barChart" type="[[val]]" . . . style='width:100%;height:350px;'>

    Becomes

    <oj-chart id="barChart" type="[[val]]" . . . 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.

  5. To verify the changes, save your file and view the live updated output of the web app in your browser.
  6. Replace the sample file with your original dashboard.html file.
  7. Close the browser window or tab that displays your running web app.
  8. In the terminal window, press Ctrl+C, and if prompted, enter y to exit the Oracle JET tooling batch job.
  9. Leave the terminal window open for your next tutorial.

Next Step

Proceed to the next tutorial in this module.

This tutorial is part of the module Your First Oracle JET Web Application.

You can return to the learning path’s main page to access all the modules on building web apps.

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.