zoukankan      html  css  js  c++  java
  • 使用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的原创文章,请关注公众号"汪子熙":

  • 相关阅读:
    优雅得使用composer来安装各种PHP小工具
    Docker学习总结之Docker与Vagrant之间的特点比较
    深入理解php 匿名函数和 Closure
    laravel 拾遗 中间件
    centos 手动编译 fcitx 各种问题大全
    Install haroopad on centos7
    centos7 編譯 chmsee
    centos 7 禁用笔记本触摸板设置
    理解 Linux 配置文件
    输入法环境变量XMODIFIERS/GTK_IM_MODULE
  • 原文地址:https://www.cnblogs.com/sap-jerry/p/13639740.html
Copyright © 2011-2022 走看看