使用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.

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.


image.png

image.png

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


image.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.


image.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.


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


image.png


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


image.png


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


image.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.


image.png


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


image.png


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


image.png

相关文章
|
3月前
|
前端开发 JavaScript API
极简运行Vue打包文件:让你的网页快速启动,高效展现!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
6月前
|
JSON JavaScript 小程序
微信小程序从零开始开发步骤(七)引入外部js 文件
微信小程序从零开始开发步骤(七)引入外部js 文件
401 0
|
SQL JavaScript 安全
|
存储 SQL 前端开发
js: 前端浏览器存储方案整理及其扩展库
js: 前端浏览器存储方案整理及其扩展库
112 0
|
JavaScript
js基础笔记学习223文档得加载2
js基础笔记学习223文档得加载2
54 0
js基础笔记学习223文档得加载2
|
JavaScript
js基础笔记学习222文档得加载1
js基础笔记学习222文档得加载1
58 0
js基础笔记学习222文档得加载1
|
JavaScript
js基础笔记学习267练习1自动切换图片
js基础笔记学习267练习1自动切换图片
46 0
js基础笔记学习267练习1自动切换图片
|
JavaScript 前端开发 开发者
Js 功能-切换功能 |学习笔记
快速学习 Js 功能-切换功能
68 0
|
JSON JavaScript 前端开发
前端:收集15个非常实用的JS代码,值得收藏
今天给大家分享js实用的代码片段,值得收藏!
前端:收集15个非常实用的JS代码,值得收藏
|
前端开发 JavaScript 中间件
Vue 2.x折腾记 - (12) Nuxt.js写一个校验访问浏览器设备类型及环境的中间件
这个需求非常常见,分享出去的页面的有时候在手机访问,有时候别人是PC打开的; 若是不是共享同一个页面的情况,就需要拦截跳转了; 当然你要共享同一个页面也可以(放大化到PC也需要添加某些CSS,也需判断设备)
280 1