前端调试利器---nproxy
前言:习惯了在windows环境中使用Fiddler的童鞋们,是不是感觉它的网络重定向功能很酷,Fiddler能按照你设置的规制捕获网络请求,再指向本地文件,如拦截你的js文件到本地,就能很快的调试线上环境(如后台环境,测试环境,预上线环境等)。但是Fiddler的使用对于初学者来说还是稍有困难的,界面功能很多,导致新手无从下手。(我当初就是这样的),并且Fiddler虽然有Mac版本,但是问题很多,我试了好几次都不行。
正文:今天给大家介绍一款新的神器,nproxy.它能通吃windows,linux.mac平台。而且使用及其简单。一个配置文件就搞定了。
安装:使用npm安装即可
npm install -g nproxy
用法:在replace_rule.js中设置你要重定向的文件路径即可,然后如下执行
nproxy -l replace_rule.js
replace_rule.js示例:
module.exports = [ // 1. replace single file with local one
{
pattern: 'homepage.js', // Match url you wanna replace
responder: "/home/goddyzhao/workspace/homepage.js"
}, // 2. replace single file with web file
{
pattern: 'homepage.js', // Match url you wanna replace
responder: "http://www.anotherwebsite.com/assets/js/homepage2.js"
}, // 3. replace combo file with src with absolute file path
{
pattern: 'group/homepageTileFramework.*.js',
responder: [
'/home/goddyzhao/workspace/webapp/ui/homepage/js/a.js',
'/home/goddyzhao/workspace/webapp/ui/homepage/js/b.js',
'/home/goddyzhao/workspace/webapp/ui/homepage/js/c.js'
]
}, // 4. replace combo file with src with relative file path and specified dir
{
pattern: 'group/homepageTileFramework.*.js',
responder: {
dir: '/home/goddyzhao/workspace/webapp/ui/homepage/js',
src: [
'a.js',
'b.js',
'c.js'
]
}
}, // 5. Map server image directory to local image directory
{
pattern: 'ui/homepage/img', // must be a string
responder: '/home/goddyzhao/image/' //must be a absolute directory path
}, // 6. Write responder with regular expression variables like $1, $2
{
pattern: /https?:\/\/[\w\.]*(?::\d+)?\/ui\/(.*)_dev\.(\w+)/,
responder: 'http://localhost/proxy/$1.$2'
}, // 7. Map server image directory to local image directory with regular expression
// This simple rule can replace multiple directories to corresponding locale ones
// For Example,
// http://host:port/ui/a/img/... => /home/a/image/...
// http://host:port/ui/b/img/... => /home/b/image/...
// http://host:port/ui/c/img/... => /home/c/image/...
// ...
{
pattern: /ui\/(.*)\/img\//,
responder: '/home/$1/image/'
}
];
nproxy参数说明:
Options: -h, --help output usage information
-V, --version output the version number
-l, --list [list] Specify the replace rule file
-p, --port [port] Specify the port nproxy will listen on(8989 by default)
-t, --timeout [timeout] Specify the request timeout (5 seconds by default)
改变默认监听端口:因为要捕获网络请求,nproxy必然会监听请求地址和请求端口,它默认的监听端口为8989,你可以通过-p参数来设置,如
nproxy -l replace_rule.js -p 8181
即可改变监听的端口。
浏览器代理设置:代理地址为127.0.0.1 端口即为你要监听的端口,如8181.至于怎么设置浏览器的代理,请百度就知道了。
通过以上步骤,你就搭建起了前端调试环境。可以方便的直接调用后端的接口,而不用在本地造一大堆假数据了。是不是很方便了?
现在就来试试吧!
前端调试利器---nproxy的更多相关文章
- 前端调试利器——BrowserSync
此处记录一下踩过的坑 之前看的这个地址:http://www.browsersync.cn/ 也就是 BrowserSync的官网上面关于代理服务器的例子不管怎么试都不行 请看下例子 browser- ...
- 10分钟学会前端调试利器——FireBug
概述 FireBug是一个用于网站前端开发的工具,它是FireFox浏览器的一个扩展插件.它可以用于调试JavaScript.查看DOM.分析CSS.监控网络流量以及进行Ajax交互等.它提供了几乎前 ...
- 前端调试利器 - Charles
Docs 开发之 Charles 配置指南 1.下载与安装 charles-proxy-4.1.4 .dmg56.12 MB已存到云盘下载 2.激活 使用公司正版license 激活 安装证书 点击证 ...
- 前端开发利器—FIDDLER 转
http://www.cnblogs.com/yuzhongwusan/archive/2012/07/20/2601306.html 前端开发利器—FIDDLER 1.Fiddler相对其他调试工具 ...
- Reveal1.5破解,iOS_UI调试利器Reveal最新版本破解方法
Reveal1.0.7破解 1.官网下载最新版Reveal,拖动应用程序中,运行一次2.下载16进制编辑器"0xED" for mac(http://dl.vmall.com/c0 ...
- Windows GUI代码与Windows消息问题调试利器
Windows GUI代码与Windows消息问题调试利器 记得很久前有这么一种说法: 人类区别于动物的标准就是工具的使用.同样在软件开发这个行业里面,对于工具的使用也是高手和入门级选手的主要区别,高 ...
- 手机H5 web调试利器——WEINRE (WEb INspector REmote)
手机H5 web调试利器--WEINRE (WEb INspector REmote) 调试移动端页面,优先选择使用chrome浏览器调试,如果是hybrid形式的页面,可以使用chrome提供的ch ...
- Javascript 调试利器 Firebug使用详解
Javascript 调试利器 Firebug使用详解 有时候,为了更清楚方便的查看输出信息,我们可能需要将一些调试信息进行分组输出,那么可以使用console.group来对信息进行分组,在组信息输 ...
- 前端构建利器Grunt—Bower
runt + Bower—前端构建利器 目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web ...
随机推荐
- 使用TR1的智能指针
作为C++程序员,在没有智能指针,手动管理内存的蛮荒岁月里,可以说是暗无天日,痛苦异常.直到上帝说,还是要有光,于是智能指针进了标准.C++码农的日子总算好起来了. 虽然一直鄙视着没有显式指针的语言, ...
- iOS RUN LOOP 是个什么东西?
RUN Loop是什么? 1.runloop是事件接收和分发机制的一个实现. 2.什么时候使用runloop 当需要和该线程进行交互的时候.主线程默认有runloop.当自己启动一个线程,如果只是 ...
- 高德地图Demo运行报错 com.android.ide.common.process.ProcessException: Failed to execute aapt
最近由于有需求去做导航方面的Android开发,很是无奈,以前也的确是没有搞过,领导开大会当着所有人的面说这是给我分配的第一个工作,无论如何要做好,突然间感觉压力好大,自己已经多年没有敲过代码,而且A ...
- 使用jdbc对数据库增删改查(Mysql为例)
一.statement对象介绍 Statement对象的executeUpdate方法,用于向数据库发送增.删.改的sql语句,executeUpdate执行完后,将会返回一个整数. Statemen ...
- BZOJ3786 星系探索 【Splay维护dfs序】*
BZOJ3786 星系探索 Description 物理学家小C的研究正遇到某个瓶颈. 他正在研究的是一个星系,这个星系中有n个星球,其中有一个主星球(方便起见我们默认其为1号星球),其余的所有星球均 ...
- BZOJ1833 ZJOI2010 count 数字计数 【数位DP】
BZOJ1833 ZJOI2010 count 数字计数 Description 给定两个正整数a和b,求在[a,b]中的所有整数中,每个数码(digit)各出现了多少次. Input 输入文件中仅包 ...
- 关于上架AppStore最后一步的“出口合规信息”、“内容版权”、“广告标识符”的选择(转)
这里只当作记录:http://blog.csdn.net/ashimar_a/article/details/51745675
- [Reship] Mean Shift 算法介绍
==================================================================================== This article ca ...
- python模块--json \ pickle \ shelve \ XML模块
一.json模块 之前学习过的eval内置方法可以将一个字符串转成一个python对象,不过eval方法时有局限性的,对于普通的数据类型,json.loads和eval都能用,但遇到特殊类型的时候,e ...
- Mathtype启动失败与Microsoft公式编辑器Equation的问题处理案例
最近写毕业论文需要使用Mathtype,安装成功后,启动Word,使用Mathtype,出现各种问题. 遇到的问题: 1.弹出“用于创建对象的程序是Equation.您的计算机尚未安装此程序.若要编辑 ...