原文链接:
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+)/,
},
// 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.至于怎么设置浏览器的代理，请百度就知道了。
通过以上步骤，你就搭建起了前端调试环境。可以方便的直接调用后端的接口，而不用在本地造一大堆假数据了。是不是很方便了？
现在就来试试吧！