使用Fiddle修改在线加载的前端框架js文件，用于各种调试目的

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.

 

 

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

 

 

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.

 

 

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.

 

 

(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”.

 

 

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

 

 

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

 

 

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.

 

 

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

 

 

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

 

 

要获取更多Jerry的原创文章，请关注公众号"汪子熙":