chrome浏览器调试线上文件映射本地文件
chrome浏览器调试线上文件映射本地文件
通过ReRes让chrome拥有路径映射的autoResponse功能。
前端开发过程中,经常会有需要对远程环境调试的需求。比如,修改线上bug,开发环境不在本地等等。我们需要把远程css文件或者js映射到本地的文件上,通过修改本地文件进行调试和开发。通常我们可以通过以下方法来实现映射:
1.修改host文件——只能把域名映射到IP
2.使用Apache或者nginx搭建反向代理——需要装环境,配置相对繁琐
3.使用Fiddler中的AutoRespnose功能——不支持目录映射,mac、linux无法使用
以上方式,或者功能缺失,或者需要额外安装软件,或者配置繁琐、或者不支持多平台。我理想中的请求映射工具应该是这样的:简单,打开浏览器就能用、支持目录映射和文件映射、跨平台。 ReRes就是居于这个目标写出来的,您可以把请求映射到其他的url,也可以映射到你本机的文件或者目录。ReRes支持单个url映射,也支持目录映射。
现在就开始使用ReRes
首先从chrome商店安装ReRes: https://chrome.google.com/webstore/detail/reres/gieocpkbblidnocefjakldecahgeeica?hl=zh-CN&gl=CN
安装后,在地址栏输入chrome://extensions/
进入扩展页,找到ReRes,勾选“允许访问文件网址”,这样才能让ReRes支持本地映射,如下:
至此,ReRes就可以使用了。下面是一些基本功能的使用操作方法:
添加规则
点击“添加规则”按钮,输入以下信息,然后保存:
If URL match: 一个正则表达式,当请求的URL与之匹配时,规则生效。注意:不要填开头的/和结束的/gi,如/.*/gi请写成.
Response: 映射的响应地址,映射的响应地址,这个地址会替换掉url中与上面正则匹配的部分。线上地址以http://开头,本地地址以file:///开头,比如http://cssha.com或file:///D:/a.js
启动/禁用
勾选/取消对应规则前面的勾选框即可。
编辑规则
鼠标移到响应规则上,点击“编辑”。
删除规则
鼠标移到响应规则上,点击“删除”。
批量导入规则
点击“管理规则”按钮进入管理页,点击顶部“导入”按钮,即可导入规则列表文件。规则列表文件是一个json文件,其格式如下:
[
{
"req":"^https?:\\/\\/.*test.com",
"res":"http://qunar.com",
"checked":false
},
{
"req":".*hanan.com",
"res":"http://cssha.com",
"checked":true
}
]
其中相关字段含义如下:
req:请求所匹配的正则表达式(对应于If URL match输入框的内容)
res:映射的响应地址(对应Response输入框的内容)
checked:是否启用
本插件源码托管在https://github.com/hanan198501/ReRes,开发过程中采用了以下开源项目,感谢支持:
LESS
Bootstrap
AngularJS
chrome浏览器调试线上文件映射本地文件的更多相关文章
- 利用Chrome浏览器调试线上代码
前言 之前调试前端bug都是在开发环境中做完并多次测试没有问题之后发布测试环境,验收合格之后发布生产.但生产环境偏偏会有和开发和测试环境不一致的情况,例如测试环境需要加密,而开发环境先不加密,测试环境 ...
- chrome浏览器调试功能之后端篇
作为后端开发人员,可能有很多同学不怎么了解chrome调试功能,而即将成为大神的我们,怎么也得会,知其然更要知其所以然,今天我带领大家好好的梳理一下,chrome浏览器调试,个人把它分成了前端功能和后 ...
- Google Chrome浏览器调试入门————转载只为自己查看方便
Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/20 ...
- 如何使用Fiddler调试线上JS代码
大家平时肯定都用过火狐的Firebug或者谷歌的调试工具来调试JS,但遗憾的是我们不能像编辑html,css那样来直接新增或者删除JS代码. 虽然可以通过调试工具的控制台来动态执行JS代码,但有时候却 ...
- flex chrome浏览器调试flex程序
flex chrome浏览器调试出现空白的解决方法: 1,为chrome安装flash player,禁用chrome自带的flash player:参考:http://www.jb51.net/ar ...
- 修改http请求文件为本地文件的一种方法:hook InternetReadFile 和 HttpOpenRequest
今天没事的时候学了一下easyhook来hook本进程API,确实很简单就能hook.然后想到这个问题:替换webbrowser请求的文件为本地文件.有什么用就不说了,都懂.因为没有用API写过htt ...
- [javascript] 利用chrome的overrides实时调试线上js
chrome的开发者工具,在source选项卡下,可以看到js的源代码,有一个断点调试功能,就是在js的源代码行号那里点击一下,出现一个箭头,当再次刷新页面并且进行了相应操作时,就会停在断点的地方.我 ...
- 360chrome,google chrome浏览器使用jquery.ajax加载本地html文件
使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...
- 如何用 fiddler 调试线上代码
有时代码上线了,突然就碰到了坑爹的错误.或者有时看别人家线上的代码,对于一个文件想 fork 下来试试效果又不想把全部文件拉到本地,都可以使用 fiddler 的线上调试功能. 比方说我们打开携程的首 ...
随机推荐
- V形
<!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...
- Microsoft SQL Server学习(七)--函数视图
系统函数 视图 索引 1.系统函数 (1) ()数学函数 Abs() 绝对值 Floor() 向下取整 Ceiling() 向上取整 Sin() 返回指定角度(以弧度为单位)的三角正弦值 Pi() 圆 ...
- [Windows Server 2012] 初识Windows Server 2012
★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:初次见识Win ...
- FusionCharts之我用
fusioncharts:(此控件需flash支持) 介绍:http://baike.baidu.com/link?url=SOheR7sQlb93S5TqYmeI7FhtJ0V9ABNwH6OsAa ...
- vs 2017 清空 打开项目的历史记录
- MFC获取各窗口指针句柄
MFC在很多的对话框操作中,我们经常要用到在一个对话框中调用另一个对话框的函数或变量.可以用如下方法来解决. HWND hWnd=::FindWindow(NULL,_T("Sphere ...
- 解决[disabled]="true"与formControlName冲突
import { FormBuilder } from '@angular/forms'; form; constructor(private fb: FormBuilder) { this.form ...
- 微服务网关从零搭建——(一)创建测试api以及api自动注入consul
本系列编写目的纯属个人开发记录 以下代码均为demo级 如有需要 请自行优化 代码完整包由于公司电脑加密 无法上传整包的demo文件 consul 开发环境简易处理 consul 下载地址 : ht ...
- Spring Boot 与消息
一.消息概述 在大多数应用中,可以通过消息服务中间件来提升系统的异步通信.扩展解耦和流量削峰等能力. 当消息发送者发送消息后,将由消息代理接管,消息代理保证消息传递到指定目的地. 消息队列主要有两种形 ...
- ExtJs如何判断form表单是否被修改过详解
1.Extjs表单提交主要有三种方式: 1, EXT的form表单ajax提交(默认提交方式) 相对单独的ajax提交来说优点在于能省略写参数数组 ,form.getForm().submi ...