技术方案:在外部网址调试本地js(基于fiddler)
1 解决的问题
1) 场景1:生产环境报错
对前台开发来说,业务逻辑都在js中,所以报错90%以上都是js问题。
如果生产环境出现报错,但是测试环境正常。这时修改了代码没有环境验证效果,直接升级到生产环境风险又太高——(1)万一升级后依然不好使导致客户不耐烦呢?(2)万一牵连出别的问题呢?
此时需要一种方法,可以在生产环境的网址上调试本地的js文件。
2) 场景2:本地工程不给力
某个任务修改了js文件,进行单元测试时发现本地工程太慢,或者本地工程更新了代码后项目无法启动。此时需要一种方法,可以在测试环境的网址上直接调试本地的js文件。
1.3 技术原理
1) 本地电脑的浏览器访问页面时,会从服务器端下载文件到本地浏览器中执行
2) 我们可以利用fiddler软件,截获从服务器上下载的文件,把之替换成本地的指定文件,这样在浏览器中生效的就是本地的文件了。
截取前:response是服务器发来的文件,代码版本是服务器上的。
截取后:fiddler把服务器上的文件替换为本地我指定的文件,提供给浏览器使用。
2 操作步骤
1) 打开fiddler软件
2) 打开软件的监听。(菜单方式,或f12快捷键)打开监听后,软件左下角会有展示
3) 打开网页,左侧会展示监听到的各种文件,js文件一般为绿色。
——如下截图操作的是common.js文件。
- 把左边的common.js文件,拖拽到右边的“AutoResopnder”tab页内。
- 勾选标记的2个东西。
- 拖拽过去后,下面就会多出一行条目,就是框住的那一条。
- 在页面右下角有2行路径,上面的就是咱们拖拽的文件的服务器路径,不动即可。下面的那行路径应选择为本地替换文件的路径。
- 选择的方法是:点击向下箭头,选择最下面的“find a file …”会打开本地的浏览窗口,选择本地的文件。
- 点击一下save按钮。
- 这样,common.js文件浏览器就不会使用服务器上的版本了,而是使用本地的代码文件。
- 提醒:本地再次修改后,需要清理浏览器缓存并刷新页面,以使新文件生效。
3 注意事项
3.1 端口设置
可以设置和修改端口,如图。应该是任何不和别的软件冲突的可用端口都可以。
3.2 清理ie缓存
修改文件后,需要清理ie缓存后刷新页面,此时浏览器中生效的是改后版本。
3.3 工具是代理,有时影响上网
此工具相当于一个代理软件,若开着监控,有时会使得浏览器打不开外网。
3.4 不要忘记打开监听
不要忘记打开监听。(菜单方式,或f12快捷键)
3.5 清屏操作
用工具栏的如下按钮
3.6 关于安装
官网:http://www.telerik.com/fiddler
- 使用fiddler需要电脑中已安装“.net framework”,.net相当于微软参考java的jdk做的东西,封装了一些类库和基础功能,windows操作系统会自带某个版本的.net。
- fiddler有2个版本的安装包,分别对应.net 2和.net 4,功能上无区别,我使用的是对应.net 2的版本。
4 其他说明
4.1 可截取其他类型文件:html,图片,css等
css样式的修改,图片的替换等,也可以方便地用此技术方案进行测试。
4.2 要关注代码分离
Css样式和js业务逻辑,尽量不要和页面耦合在一起,写成独立文件,不仅方便代码版本维护,而且便于未来的修改和调试。
其实java文件也同理,一个java文件代码太多的话,未来拆包的风险和工作量就会很多。
5 “互联网产品”的安全性
“互联网应用”的业务校验不能依赖前端。
1) 大家可能都笼统地听过一个概念:前端的校验是不可信的,核心的校验一定要放到服务器端来做。但可能对这种说法体会都不深。
2) 本次的讲解就是一个鲜活的例子:黑客可以通过截取网站js文件,把里面的前端校验都去掉,如果网站的服务器端没有做严格的二次校验,那么就很可能受到黑客的攻击。
3) 特别提示:校验放到服务器端,指的是包括发起校验的动作也得在服务器端。可能有的同事写过这样的代码,js文件中调一个java的bo或action函数进行校验,这种校验在形式上是在服务器端进行的,可是发起校验的动作却是在前台,黑客完全可以篡改代码让这个校验动作都不发起。
技术方案:在外部网址调试本地js(基于fiddler)的更多相关文章
- vscode断点调试本地客户端文件
一.安装chrome,安装vscode,打开vscode编辑器,安装插件Debugger for Chrome 二.新建文件 1.目录结构 . ├── index.html ├── index.js ...
- 利用fiddler和mock调试本地微信网页
利用fiddler和mock调试本地微信网页 微信公众号网页是比较特殊的页面,普通页面直接打开即可访问,但对于需要请求微信相关接口的部分需要安全域名认证.这导致了使用mock数据进行开发的页面没办法走 ...
- 全面解密QQ红包技术方案:架构、技术实现、移动端优化、创新玩法等
本文来自腾讯QQ技术团队工程师许灵锋.周海发的技术分享. 一.引言 自 2015 年春节以来,QQ 春节红包经历了企业红包(2015 年).刷一刷红包(2016 年)和 AR 红包(2017 年)几个 ...
- C#开发BIMFACE系列49 Web网页中加载模型与图纸的技术方案
BIMFACE二次开发系列目录 [已更新最新开发文章,点击查看详细] 在BIMFACE二次系列博客中详细介绍了服务器端API的调用方式,如下列表 C#开发BIMFACE系列1 BIMFAC ...
- 「微前端实践」使用Vue+qiankun微前端方案重构老项目的本地验证
10月份换了新的工作,参与完一个月的需求迭代后,接到了项目重构的任务.简单来说,需要在短时间内提出方案设想,同时进行本地验证,最终需要拿出一套技术替换方案来.于是,埋头苦干了一个月,总算干了点成绩出来 ...
- 如何写好B端产品的技术方案?
B端产品为企业提供协同办公的工具,帮助企业解决某类经营管理问题,核心价值在于为企业增加收入.降本提效.管控风险,企业级SaaS产品也是B端产品中的一类. B端产品有以下特点: 客户是一个群体:B端产 ...
- 用node-inspector调试Node.js(转自NOANYLOVE'S BLOG)
原文地址:http://www.noanylove.com/2011/12/node-the-inspector-debugging-node-js/ 用node-inspector调试Node.js ...
- 关于封装Dll为Web Service技术方案的讨论
关于web架构技术方案的讨论整理 Sonictl 2014年1月25日10:05:52 本着"三人行必有我师"的学习态度,我在近期跟x老师做了大量沟通,结合我们单位对于" ...
- VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...
随机推荐
- ubuntu下php编译
1.安装依赖 sudo apt-get install libjpeg-devsudo apt-get install libxml2-devsudo apt-get -y install libjp ...
- 条形码--JsBarcode
介绍一下在GitHub生成条形码的js插件→JsBarcode 支持的条形码: 条码支持的有: CODE128 CODE128 (自动模式切换) CODE128 A/B/C (强制模式)EAN ...
- Quartz_理解3
什么是Quartz Quartz是一个开源的作业调度框架,由java编写,在.NET平台为Quartz.Net,通过Quart可以快速完成任务调度的工作. Quartz能干什么/应用场景 如网页游戏中 ...
- AR_Demon(使用vuforia平台提供的钥匙跟后台,实现相机拍图片读取模型以及视频的功能)
1.https://developer.vuforia.com注册账号. 2.分别添加License Manager(连接钥匙),Target Manager(图片后台下载). 3.下载vuforia ...
- wordPress查看站点时,显示文件目录
1.在wordpress的代码目录中增加.htaccess文件. 2.在.htaccess文件中加入如下内容: DirectoryIndex index.php index.html# BEGIN W ...
- 使用splice实现高效的代理服务器
很多网络应用场景下, 当原设备与目标设备无法直接建立连接时,这时就需要一台代理服务器进行中转.代理服务器只需要将来自源设备的报文 原封不动的转发给目标设备,而并不需要知道报文的具体内容.在这种情况下, ...
- Linux内核时间管理(二)——jiffies与jiffies_64释疑
Linux内核中定义了jiffies变量来记录从系统启动到当前时刻系统时钟所产生的tick数.jiffies变量是一个无符号整型数值,即unsigned long类型.它的声明如下(在 include ...
- ZOJ 1492 Maximum Clique 搜索最大团
ZOJ1492 题意:给一个无向图 求最大团的大小.节点数小于50 数据有限,考虑记忆化搜索,方程很好给出. 令 Si={vi,vi+1.....vn} mc[i]表示Si最大团的大小,倒着推算. 必 ...
- 程序点滴001_Python模拟点阵数字
尝试过很多编程语言,写过不少程序(当然,基本上都是些自娱自乐或给自己用的工具类的小玩意儿),逐渐认识到编写程序是一个不断完善.不断优化的过程——编程首先要有一个想法(目标),围绕这个目标形成最基本的功 ...
- c#基础语句——分支语句的应用
一.if...else... if是如果的意思,else是另外的意思,if后面跟(),括号内为判断条件,如果符合条件则进入if语句执行命令.如果不符合则不进入if语句.else后不用加条件,但是必须与 ...