Debug and Audit Your Code

As you work on your extension—and especially before you share or publish it—it’s important to test and debug your App UI to ensure a smooth end-to-end experience for your users.

You have several options to ensure your App UI’s code is error-free:

• Browser tools: Because your VB Studio extensions are essentially client-side HTML apps written in JavaScript, you can use your browser’s development tools for debugging. When you preview your extension in Chrome (for example), you can use the Developer Tools option to diagnose problems quickly:
  • Network tab: Use this tab to view network traffic between the client’s browser and your REST data sources.
  • Console tab: Use this tab to view console output and get a complete picture of what’s going on in your extension. If your console only shows errors, you might need to set a different log level for your Oracle Cloud Application instance. See Change the Log Level.

• Audits pane: When you use Audits, VB Studio scans and runs checks on your extension’s code and displays errors and warnings, if any, in the Audits pane. You can view details of each issue and take action to resolve it. In addition to JET component errors, the Audits pane displays syntax errors, translation issues, and warnings for missing dependencies are also reported.

  If an artifact contains errors, it is also badged in the Navigator to indicate that action must be taken to resolve the issue. For example, page errors are indicated by a red dot on the App UIs icon in the Navigator toolbar as well as against the particular artifact in the App UIs pane. The badge persists until the error is fixed or until the session ends.

  1. Click Audits to view the Audits pane.
     
     If you see a message that no artifacts are open, you’ll need to open the artifacts you want audited, for example, one or more pages or a .js file. Here’s a quick walkthrough of the results displayed in the Audits pane when artifacts are open (with the active artifact always highlighted):

     

     Description of the illustration audit-results-appui.png

     Label	Description
     A	Options to filter audit results either by text or by severity: Enter text to filter the results based on your search string. For example, you might enter main in the filter text box to search for all issues in the main flow. Use Stopper, Error, Warning, Info, and ToDo to filter the results by severity. For example, when your application contains errors, you can clear the Warning, Info, and ToDo checkboxes to focus on errors, especially showstoppers flagged by the Stopper severity. Stopper errors are critical syntax issues (for example, when an action chain referenced in code doesn't exist) that are very likely to break your app at runtime.
     B	Scope of the audit. By default, only artifacts that are open are audited, for example, the directory-landing-page, main-start-page, and action.js. To audit the application as a whole, change Audited in from Opened Artifacts to All Artifacts. Any scope change you make is retained for the application, and will persist even if the Audits pane is closed and reopened.
     C	Menu with options to edit audit settings or revalidate the entire extension.
     D	Option to close the Audits pane.
     E	Path to the artifact that contains issues, for example, the main-start-page under extension1/sources/ui/self/applications/appname/flows/flowname/pages.
     F	Number and type of issues in the artifact, for example, 1 error 4 warnings.
     G	Message about the issue in the artifact, for example, String not externalized for translation.
     H	Line and column number of the issue, for example, (6, 73) indicates that the String not externalized for translation issue exists in line 6, column 73 of the main-start-page artifact in Code view.

  2. Decide how you want to resolve the issue. You can choose to resolve an issue directly from its right-click menu or by opening it in the source editor. For example, to resolve a translation issue, right-click the issue and select Add to translation bundle.

  To work with an issue in its source editor, simply click the issue, or select Open in Source Editor in the issue’s right-click menu. You can then use code actions suggested in the editor to resolve the issue. For example, for the String not externalized for translation issue, you’ll see the same quick fixes suggested in the right-click menu available in the source editor as well.

  Whether you use the menu option or the source editor is entirely up to you, but will mostly depend on the issue you’re working with. - Resolve the issue, if possible, by selecting the appropriate option. - If a resolution isn’t available for your issue, select Open in Source Editor to view the issue in the source editor. Hover over the highlighted issue to view problem details and see how you can fix it. <div class="infoboxnote" markdown="1"> Note: When you’re working with code editors (such as Code view in the Page Designer or the JavaScript editor), audit markers show in the file even after you make changes to resolve issues. They disappear only after the file is revalidated and audit results are regenerated, if the issue has been fixed. </div> - Optionally, select Do not report this type of defect again to ignore similar defects in future.
  
  Once you make a choice, your application is rescanned and the audits results updated. <div class="infobox-tip" markdown="1"> Tip: If you want to copy an issue to your clipboard for further processing, right-click the issue and select Copy to Clipboard. To copy all issues in a particular artifact, use the right-click menu at the artifact level. </div>

  1. The Audits feature in the Designer includes built-in rules from the Oracle JET Audit Framework (JAF) by referencing the rule pack and the JAF utility (ojaf) hosted on the Content Delivery Network (CDN) for Oracle JET at https://static.oracle.com/cdn/jet/.

  Every Oracle JET release includes the JAF utility and JAF metadata, plus the JAF metadata for previous releases of JET. You can configure the built-in JAF rules to include disabled rules. Custom JAF configurations that deal with the file system, custom rule plug-ins, and so on will not be evaluated because JAF does not execute on the VB Studio backend; it runs on the client.

  Every Oracle JET release includes the JAF utility and JAF metadata, plus the JAF metadata for previous releases of JET. You can configure built-in JAF rules in the Source editor of the Audits feature. Custom JAF configurations that deal with the file system, custom rule plugins, and so on will not be evaluated because JAF does not execute on the Visual Builder backend. JAF runs on the client.

  Here’s how to enable a built-in rule that is disabled by default: 1. In the Audits pane, click Menu ( ) and select Edit Settings. 2. Edit the audit.json file in the Source editor, for example, here’s the syntax to reference JAF from the CDN and enable a disabled built-in rule:

    <pre class="copy"><code>{     &quot;paths&quot;: {         &quot;exclude&quot;: [             &quot;build/**&quot;,             &quot;docs/**&quot;,             &quot;scripts/**&quot;,             &quot;tests/**&quot;,             &quot;**/private&quot;,             &quot;+(web|mobile)Apps/**/resources/components/**/lib/*&quot;         ]     },     &quot;rules&quot;: {},     &quot;auditors&quot;: {         &quot;jaf&quot;: {             &quot;cdnPath&quot;: &quot;https://static.oracle.com/cdn/jet/&quot;,             &quot;version&quot;: &quot;9.0.0&quot;,             &quot;jafOptions&quot;: {                 &quot;ruleMods&quot;: {                     &quot;JET&quot;: {                         &quot;oj-css-style-override&quot;: {                             &quot;enabled&quot;: true                         }                     }                 }             }         }     } }</code></pre>
  

  To revert the built-in rules to their default settings, click Reset Settings in the Menu.

  For more information about JAF, including the built-in rules that it includes, see Understand the JAF Audit Engine in Using and Extending the Oracle JET Audit Framework.