Opening the Example App and the Developer Tools

1. Download the example app with errors at Troubleshooting.

2. Extract the downloaded .zip file at the desired location on your local machine.
3. Open a shell in the extracted folder and execute npm install.

4. Execute npm start to start the web server and to open a new browser window hosting your newly created index.html.

   Note

   If you run the app within the Demo Kit frame, this step will not work as described. Open the app in a new tab first with .

5. Open the Developer Tools by pressing F12.

Inspecting DOM Elements and CSS Styles in the Elements Tab

1. Activate the Inspect Element mode by pressing Ctrl Shift C .

2. Click the Do Something button in the app.

   The DOM tree in the Elements tab highlights the button's DOM element. Depending on which part of the button (icon or text) you clicked, different HTML tags are highlighted.

3. Search for the following line:

   Hidden

   <button id="container-HeapOfShards---app--myButton" data-sap-ui="container-HeapOfShards---app--myButton" aria-describedby="__text1"
   	class="sapMBtn sapMBtnBase sapMBtnInverted">
   </button>

   The Styles section in the panel on the right shows the active and overruled (striked-through) CSS styles for the DOM element that is currently selected.

4. In the Styles section, switch to the Computed tab.

   You can see that the margin of the button is set to 0px.

5. In the context menu of the element, choose Edit as HTML and add sapUiLargeMargin to the class section of the button tag.

   You can immediately see the effect on the web page.

   The edited element should now look like this:

   Hidden

   <button id="container-HeapOfShards---app--myButton" data-sap-ui="container-HeapOfShards---app--myButton" aria-describedby="__text1"
   	class="sapMBtn sapMBtnBase sapMBtnInverted sapUiLargeMargin">
   </button>

6. In the Styles section, switch again to the Computed tab.

   You can see that the margin of the button is now set to 48px.

Analyzing Messages in the Console Tab

Debugging in the Sources Tab

1. Switch to the Source tab.

2. To view the source of the App.controller file, press Ctrl P , enter App.controller, and select App.controller.js?eval.

3. Set a breakpoint in line 20 by clicking on the line number of the following line:

   Hidden

   sMessage = this.getResourceBundle().getText("buttonOk", [oEvent.getSourceXYZ().getId()]);

4. Click the Do Something button in the app.

   The debugger stops at line 20.

5. In line 20, replace getSourceXYZ() with getSource() and press Ctrl S :

   Hidden

   sMessage = this.getResourceBundle().getText("buttonOk", [oEvent.getSourceXYZ().getId()]);

6. Resume the execution of the code by pressing F8.

   The message toast is now displayed on the web page with the following message: "HeapOfShards---app--myButton" pressed

Checking the Network Tab

The Network tab shows the sequence and duration of files being loaded. It can be used to optimize loading performance and debug request issues.

1. Switch to the Network tab.

2. Press F5 to reload the page.

   You see a list of the files that are currently loaded.

   You can see that the CheckBox.js file is loaded, but the view does not contain any CheckBox elements, so it is not used anywhere.

3. You can't edit the code directly in this tab. You have to fix the source files in your development environment and then reload the app.

   Remove the unnecessary reference to the CheckBox in the App.controller file:

   Hidden

   sap.ui.define([
   	'sap/ui/core/mvc/Controller',
   	'sap/m/MessageToast',
   	'sap/base/Log',
   	'sap/m/CheckBox'
   ], function(Controller, MessageToast, Log, CheckBox) {
   ...

Testing Responsiveness with Device Mode

Switch to Device mode by clicking the respective button or by pressing Ctrl Shift M .

Emulate different mobile devices by selecting different devices, or switch orientation from landscape to portrait.

Analyzing Performance Problems and Memory Leaks

There are additional tabs that can help you to analyze performance problems or memory leaks. For more information, refer to the documentation of the developer tools of your browser.

• Memory or Profiles

• Performance or Timeline

• Application or Resources