首页 > 其他 > 详细

转载[前端调试利器---nproxy]

时间:2016-06-01 02:05:04      阅读:202      评论:0      收藏:0      [点我收藏+]

原文链接:

? ? ? ?http://www.cnblogs.com/wenber/p/3893308.html?utm_source=tuicool&utm_medium=referral

?

前言:习惯了在windows环境中使用Fiddler的童鞋们,是不是感觉它的网络重定向功能很酷,Fiddler能按照你设置的规制捕获网络请求,再指向本地文件,如拦截你的js文件到本地,就能很快的调试线上环境(如后台环境,测试环境,预上线环境等)。但是Fiddler的使用对于初学者来说还是稍有困难的,界面功能很多,导致新手无从下手。(我当初就是这样的),并且Fiddler虽然有Mac版本,但是问题很多,我试了好几次都不行。

正文:今天给大家介绍一款新的神器,nproxy.它能通吃windows,linux.mac平台。而且使用及其简单。一个配置文件就搞定了。

安装:使用npm安装即可

1
npm install -g nproxy

用法:在replace_rule.js中设置你要重定向的文件路径即可,然后如下执行

1
nproxy -l replace_rule.js

replace_rule.js示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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
??},
?
??// 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参数说明:

1
2
3
4
5
6
7
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参数来设置,如

1
nproxy -l replace_rule.js? -p 8181

  即可改变监听的端口。

?浏览器代理设置:代理地址为127.0.0.1 端口即为你要监听的端口,如8181.至于怎么设置浏览器的代理,请百度就知道了。

通过以上步骤,你就搭建起了前端调试环境。可以方便的直接调用后端的接口,而不用在本地造一大堆假数据了。是不是很方便了?

现在就来试试吧!

转载[前端调试利器---nproxy]

原文:http://yuzhouxiner.iteye.com/blog/2301856

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!