Chrome development tool

Three years ago I wrote a blog Six kinds of debugging tips to find the source code where the message is raised in 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 funct... to demonstrate the trouble shooting tip.

See this blog How to quickly locate the code error in application which causes UI stop to load for 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 works to 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 deregistration which contains my approach to study control life-cycle management by debugging framework code.

Another related blog: How to find the location where control id is created in the runtime.

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 temporarily 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 closed to 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 successfully contains my reply to the customer :smile:

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.

Regarding Edm.DateTime in Fiori application

More details of DatePicker

DateFormat in DatePicker control

Language related topic for DatePicker

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 Modified contains 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.

An example of how to find back button implementation on Smart Template generated application

Suppose you want to debug the back button implementation, where you should set breakpoint? The application displayed below is automatically generated by Smart Template, so it is then not possible for you to check controller source code in application folder since the whole UI code is now owned by template. I use the approach to quickly identify the location of source code which handles click event, I call it "tentative search": An example of how to find back button implementation on Smart Template generated application.

FullScreenPageRoutes in Component.js

In CRM Fiori application you can find the definition of fullScreenPageRoute in file Component.js. If you don't know why it is needed and how it works in the runtime, you can read this blog An example to learn how fullScreenPageRoutes works in full screen application via debugging.

An easy way to find location where Unique id of UI5 control is created

Would you like to figure out how those IDs are generated? See this blog for answer.

More detail about Bootstrap script tag

Do you really know the detail of this tag? Can I change this id of this tag to other value like id="helloword", does it still work? Find answer from this blog.

A small tip I learn from UI5 Diagnostics tool - a practice of AOP programming

Have you even used this tool provided by UI5 activated via Ctrl+Alt+Shift+S? Have you even heard of AOP programming? Read this blog for more detail.

Another reason of empty screen issue and how I analyze the issue

I have worked out one customer incident regarding empty screen issue of cross application navigation. Previously my assumption is the empty screen issue is always caused by the JavaScript execution error somewhere. However this incident provides another kind of reason: the UI5 framework fails to find a matched route for target navigation. Learn more detail from this blog.

Why "Adapt UI" button is available in some system but missing in some other system

Compare the two screenshots below which are caught via the same user but in different system. Feel confused about this behavior? You can debug yourself to find out the root cause. See detail from this blog.

Open your SAP GUI transaction in Fiori launchpad

Would you like to directly open the traditional SAP GUI transaction in Fiori launchpad now? Sounds impossible? See this blog about how I find out the secret and see this blog for step by step guide.

Why sometimes my OData request is cancelled automatically

Do you know the reason why sometimes your OData request is cancelled by UI5 framework automatically? If you would like to learn more about this cancellation logic, you can read my blog for detail.

Some of my other blogs regarding UI5 debugging

How to find UI element binding path which is not statically defined in XML view

How ABAP syntax highlight is implemented in “WebIDE” launched via browser

Would you like to know how ABAP syntax highlight is implemented in the browser? Try to debug to figure it out by yourself by following this blog.

How does UI5 AutoGrowing list work

When you scroll down the table in S/4HANA Fiori application built by Smart Template,

the list will automatically grow: more data will be fetched from backend. Would you like to figure out how it works? See this blog.

LAST BUT NOT THE LEAST - 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