Sometimes for trouble shooting or research purpose, you would like to make small changes on framework js file, and test how your application would react to those changes.

For example I would like to add a new line for debugging purpose before line 70.

/wp-content/uploads/2016/01/clipboard1_869680.png

It is not possible to make any modifications on the formatted js file done by Chrome “Pretty print” button.

/wp-content/uploads/2016/01/clipboard2_869744.png

We can only change original unformatted file or switch the source code to debugger version and change Text-dbg.js instead. Unfortunately changes done by both approaches could not be persisted. Once we refresh Chrome, they are gone.

/wp-content/uploads/2016/01/clipboard3_869745.png

Inspired by Alessandro Spadoni‘s great blog Switch #openui5 version on-the-fly without changing the code – Web Debugging Proxy, now I can use Fiddle to achieve the requirement once and for all:

1. Download the original Text.js to local laptop. Add the code you would like to insert and save the change.

/wp-content/uploads/2016/01/clipboard4_869746.png

2. Open Fiddle, run UI5 application and use Fiddle to capture the network traffic. Find the corresponding session to request Text.js, and drag it to tab “AutoResponder” and drop there. Select the two checkbox “Enable rules” and “Unmatched requests passthrough”.

/wp-content/uploads/2016/01/clipboard5_869747.png

Once you finished drop, the Text.js url will be automatically populated to Rule Editor.

/wp-content/uploads/2016/01/clipboard6_869748.png

Select “Find a file” from drop down list and specify the local modified file you have done in previous step.

/wp-content/uploads/2016/01/clipboard7_869749.png

Once done, you have now created one rule as below: every time the Text.js with given url is accessed, Fiddle will serve it with your local modified version as response.

/wp-content/uploads/2016/01/clipboard8_869750.png

Now we can re-launch application and have a test. We can observe that this time, the modified Text.js is returned:

/wp-content/uploads/2016/01/clipboard9_869751.png

And in Chrome development tool, we can also see modified source code of Text.js.

/wp-content/uploads/2016/01/clipboard10_869752.png

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply