Skip to Content
Author's profile photo Jerry Wang

A debugging issue caused by source code mapping

I was bothered by this question recently and didn’t find an answer to it for a long time till today.
The issue is, in Chrome debugger when I hover the mouse on top of a given variable which is defined within a JavaScript function, I could successfully see the content of it. Meanwhile the variable content could also automatically be displayed in Chrome, see highlight marked with red below – so far so good.
However, when I manually type the variable oOperation under “Watch” tab and to my surprise, the variable content fails to display there. See below highlighted with blue.
However the display works for “window” and “this”.
I tried in Chrome: although oOperation appears in auto completion list as I expected,
Once I choose it and type enter key, still it fails to display again:
And “this” and “window” could still be displayed well in console.
After some research finally I figured it out: although it seems I am working on the javascript file with debugging version EventProcessor-dbg.js, but actually it is not.
Pay attention to the folder with orange color below and the tooltip “from source map”.
Source code map mechanism is a good friend for we developers, as it enables to display the content of original JavaScript file ( debugging version ) based on the files of released version ( usually minified and uglified ) used in productive environment.
By default it is enabled via settings in Chrome development tool here:
Perform a global search in Chrome development tool using keyword “sourceMappingURL” and you can find some .map files:
The purpose of the map files is to allow the browser to display the original sources instead of the name-mangled and merged bundle files (like sap-ui-core.js, library-preload.js or Component-preload.js in UI5). To make this possible, sourcemap files basically contain a mapping from text fragments in the bundle to the corresponding fragments in the source file(s). – from codeworrior mentioned in OpenUI5 github issue
So After I load the real debugging version file with sap-ui-debug=true, the folder color turns normal ( blue color ):
Just compare the orange color for source code map below:
When I am manipulating the real debugging version, I could now use the original variable name in Watch area as well, however at the cost of the long waiting time to load the original file.
Just compare the performance when C4C HTML5 UI successfully renders the first Work center, Customer, configured by default using Source Code map and sap-ui-debug=true:
The following screenshot is the time consumed using source code map:
The following is for sap-ui-debug=true, where significant performance difference are observed.
So in most of cases, it is just enough for we developers to leverage source code map to finish our debugging task instead of really loading .dbg files.
If you have already reached here, you might be also interested with More detail about UI5 Source code map mechanism.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Suneel Kumar Jujare
      Suneel Kumar Jujare

      Good read, I have been facing the same for a while now,


      thanks for sharing 🙂


      How do we get around this issue?


      Author's profile photo Jerry Wang
      Jerry Wang
      Blog Post Author

      As I said actually this is not an issue but working as designed, since we can always inspect the variable value directly in Chrome if you switched on this Chrome development tool setting:

      or you can still see the variable content when you hover your mouse on top of the variable. If you do wish to view the variable content in watch tab by typing its complete name, you can switch to UI5 debugging version by appending this parameter into your C4C url: sap-ui-debug=true

      Best regards,