使用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的原创文章,请关注公众号"汪子熙":
相关文章
- vscode创建html文件夹_vscode怎么新建js文件
- ajax跨域解决方案domain_js解决跨域问题
- 微前端03 : 乾坤的沙箱容器分析(Js沙箱机制建立后的具体应用)
- js函数的回调
- 【说站】js中load事件如何理解
- vue文件中引入js_vue中require引入js
- Vue.js – 引入外部 JS 文件
- vue动态引入js文件的方法_vue如何引入js文件
- js 数组去除重复数据-5 个提升你 JS 编码水平的实例
- js文件中使用el表达式问题详解编程语言
- linux下的js文件压缩处理(Linuxjs压缩)
- node.js上传文件详解编程语言
- 利用 JS 实现 Redis 的连接(js连接redis)
- 用SQL Server和JS实现数据库管理技术(sqlserver.js)
- ASP.NET2.0:页面中链入的CSS、js文件带中文时需注意
- 用js实现多域名不同文件的调用方法
- 用js实现网页上模仿桌面右键菜单
- javascript延时重复执行函数lLoopRun.js
- 可以读取EXCEL文件的js代码
- ajax异步获取数据实现代码(js创建ajax对象)
- js文件引入实现代码
- js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
- json2.js的初步学习与了解
- 远离JS灾难css灾难之js私有函数和css选择器作为容器
- js实现菜单左右滚动显示示例介绍
- 引入JS文件IE6报语法错误或缺少对象问题的解决方法
- js金额格式化来回转换示例
- 如何调试异步加载页面里包含的js文件
- node.js中的path.resolve方法使用说明
- 使用jquery动态加载js文件的方法
- node.js开机自启动脚本文件