We know that UI5 framework provides a convenient Diagnostics tool for application developer to set breakpoint on a given method of control class. The Diagnostics tool could be launched via Ctrl+Alt+Shift+S.
We can select the control and its methods where we would like to set breakpoint. Once we click “Add breakpoint” button, next time if the corresponding method is called, the breakpoint would be triggered, without application developers' manual set in Chrome development tool any more.
Image may be NSFW.
Clik here to view.
It looks like a magic? Today my colleague asked me how this feature is implemented, so I have a look at UI5 framework source code.
We can again simply use Chrome development tool for research.
For example I would like to set breakpoint on method _bindAggregation:
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
The hook implementation is simply returning a new function via closure within which the original method is called ( line 521 ) with the new feature injected via keyword debugger.
Image may be NSFW.
Clik here to view.
After the logic is understood, we can practice in our application code.
Suppose I would like to have my button press event handler supported by this mechanism, I can simply write the following pseudo code:
var myButton = new sap.ui.commons.Button("btn",{ text: "press me~" });
var handler = function(oEvent){ oController.onPress(oEvent);
};
handler = bDebugModeActivated? util.tool.methodHook(handler): handler;
myButton.attachPress(handler);In the runtime, once I press the button, debugger will be triggered with the following callstack:
Image may be NSFW.
Clik here to view.
Just step into line 36:
Image may be NSFW.
Clik here to view.
and then our event handler could be debugged:
