Three years ago I wrote a blog Six kinds of debugging tips to find the source code where the message is raisedin ABAP forum, trying to summarize my ABAP debugging experience by using a concrete example.

So far I have been working on Fiori development in SAP for 1.5 years. My belief as always is that a good developer should have the ability to resolve complex issue / bug by himself using debugging. Debugging can not also help to resolve issue but also enable developer to gain a better understanding on how UI5 framework runs. So I would like to try to summarize my JavaScript debugging skills and experience in this blog.

Chrome development tool

All the blogs mentioned here are written based on Chrome development tool. I can hardly imagine my life without it. It is so necessary to know and master how this tool can aid we Fiori developers to debug code swiftly and efficiently. I have listed all the tips how I leverage this tool in my daily work in this blog: Chrome Development Tool tips used in my daily work.

UI5 inspector

UI5 inspector in one of my favorite Chrome extension I use every day. See how to install it from this blog: An useful Chrome extension - UI5 Inspector.

Deal with "blank screen issue"

In Fiori world, you may frequently meet with "blank screen" issue after you click something in Fiori UI. For example, you click some UI field in application A to navigate to application B, however nothing is displayed, you can only see a blank screen. Most of the time it is because there is something wrong in JavaScript executing. When JavaScript error occurs, the page stops to render, so you see nothing.

Normally you could find corresponding JavaScript error displayed in console. The source code location of error reported in console mostly comes from the framework library, however according to my experience, 90% of the issues are not caused by framework, but by application side. The application code, either SAP standard or customer code, has generated some wrong output or perform incorrect operations which finally makes framework cease to work.

So the essential thing is to find out the exact line of SAP application code or your own enhancement which causes the trouble, so you can report incident to SAP application or fix your own code. There is an example in this blog My small experience about how to find the exact line position which causes "undefined is not a function" errorto demonstrate the trouble shooting tip.

See this blog How to quickly locate the code error in application which causes UI stop to loadfor another example.

UI5 field formatter

In Fiori UI the field formatter is widely used in XML view.

The frequently asked questions accordingly are:

why my field formatter is not called at all?
why I have specified formatter, and I can also see response is back from backend in Chrome development tool, why still finally I see empty UI field?

You can find answer to those questions as long as you understand how formatter works under the hood. You can read this blog Why my formatter does not work? A trouble shooting example to know how it worksto know more.

Even if you don't use any formatter, it is still useful if you understand the logic of data binding. See the explanation of data binding logic I learned via debugging from this blog How to trouble shoot field binding issue.

Negative cache

"Error: found in negative cache" - this error message found in console is always accompanied with the error dialog below.

If you know clearly about its meaning, you can then avoid it. See Something about negative cache error for detail.

Control registration and deregistration

Junior Fiori developers define control in XML view, bind control to a given model field. In the runtime the field displays value contained in model field correctly. That's all. They know nothing about why this data binding works as expected. They know nothing about the life-cycle management of control done by UI5 framework. As a result when tricky issues emerge, they don't know how to proceed. They may complain there is no documentation to discuss about this topic.

Now, you can research this stuff by yourself via debugging. See this blog How to monitor the control registration and deregistrationwhich contains my approach to study control life-cycle management by debugging framework code.

How to dynamically change UI behavior via debugging

As a SAP developer, during my incident support life, usually I have to debug directly in customer system since the reported issue could not be reproduced in our internal system. Sometimes I find suspicious code which causes the issue, I would like to verify such as "If I chance the source code XXXX to code YYYY, the issue may be resolved". Of course I could not directly change UI code in customer system, however thanks to Chrome development tool, I can change the code loaded in Chrome development tool temporaily to finish my verification.

For example, I have a two DatePicker field with formatOptions set as style: long.

I need to change it to "style: medium" for verification purpose in the customer system. See this blog How to dynamically change the formatOption of control in the runtime via debugging for detail.

Fiori flower animation

As a Fiori developer or user you probably see this animation every day.

Have you ever thought about how it is implemented? You can read this blog Fiori Busy Dialog - when is it opened and closedto know how I find answer by debugging.

Fiori Icon logic

When I write the following code for the first time, I am curious about how the string "sap-icon://add" can finally be converted to a "+" icon in UI. If you have the same curiosity as me, see this blog Fiori Icon logic.

Find out the origin of suspicious HTTP roundtrips

This is a real question asked by one Australia customer by incident. Customer challenges SAP that why there are always three HTTP read roundtrips every time a given appointment is successfully saved.

And this blog why there are always multiple read operations after BATCH operation is done successfullycontains my reply to the customer

Date Picker

These blogs below are related to the UI5 control Date Picker. They are written after I have resolved some customer incidents with this control involved.

Contact support button behavior

One day I was confused by the fact that I could see "Contact Support" in the error dialog in some system while in some other system the button is gone.

I cannot help figuring it out via debugging: Contact Support button display logic in Fiori.

Two types of popup Dialog in Fiori

The appearance of popup dialog normally is a sign to end user that something wrong occurs ( error popup dialog ) or some operation has been done ( info / success dialog ). A normal use case is to find out exactly in which line the popup dialog is raised. See this blog Two types of popup Dialog in Fiori.

Fiori globalization - amount display truncation logic

Have you even observed and asked yourself why 1880 USD in detail page is displayed as 2K USD in master list?

You are sure that it is framework which does this for you, but you don't know in which code the task is done. See this blog An example of Fiori Globalization implementation - the logic of amount value truncation to find answer.

An example of Fiori Globalization implementation - the number format mystery

Can you explain the reason of this display format difference?

If not, see this blog to find answer: An example of Fiori Globalization implementation - the number format mystery.

HTTP 200 OK and HTTP 304 Not Modified

This question is also asked by one of our customer. They have performance issue using Fiori solution and they are monitoring the resource loading performance in Chrome development tool and notice this behavior: for some resource, response is HTTP 200 while for others HTTP 304.

Although this blog Do you understand the logic of HTTP 200 OK and HTTP 304 Not Modifiedcontains mostly the debugging in ABAP backend, it still contains the tips to observe HTTP request and response in Chrome development tool, which is essential part to answer customer's doubt.

LAST BUT NOT THE LEAST - A Tutorial how I do self-study on a given Fiori control and UI5 framework code behind

Normally a Fiori application consists of various controls provided by UI5 library. If you just want to use a certain control and make it work in your application, it is enough for you to just go through the control API document, play it around in UI5 demokit. But if you meet with issues with the control, or you would like to know how the control is manipulated by UI5 framework to write a more robust and more efficient application, it is then inevitable that you need to dive into the UI5 framework source code.

Thus I write this tutorial, using the more simple button control for example, to illustrate how to thoroughly understand this control, together with the involved framework code in an step-by-step way.

Another benefit of studying UI5 framework code is, since the code are written by JavaScript veterans, by being familiar with those code everyday, you can learn how to program JavaScript in a more robust, elegant, generic, and efficient way, to upgrade your JavaScript skills.

The building blocks of this tutorial:

Part 1 UI5 module lazy load mechanism

Part 2 Control renderer

Part 3 Native html event VS UI5 semantic event

Part 4 control metadata

Part 5 control instance data

Part 6 control data binding

Part 7 Implementations for different binding mode: OneWay, TwoWay, OneTime

Part 8 Control ID

Part 9 Control internationalization support

Part 10 Button control in XML view

Part 11 Button control and its underlying DOM node