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.
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.
Pay attention to the folder with orange color below and the tooltip “from source map”.
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 https://github.com/SAP/openui5/issues/1611
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.