JavaScript Source Code映射引起的一个SAP C4C代码调试问题
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 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.
要获取更多Jerry的原创文章，请关注公众号"汪子熙":