使用Nginx或者Fiddler快速代理调试

1 背景问题

在分析业务系统程序问题时，存在服务系统环境是其它部门或者其它小组搭建或运维的，并且现在微服务时代，服务多且复杂，在个人机器上搭建起如此环境，要么费事费力，要么不具备充足条件。
急需有一种方法或者工具可以快速辅助调试定位分析问题。本文下面介绍代理方法。

2 代理方法

如果根据异常日志信息，可以定位分析，那么便不需要该方法。简单的前端可以使用fiddler进行资源替换。复杂的前端或者后端推荐使用nginx进行代理替换。

2.1 Fiddler代理

在网上下载fiddler，然后进行解压或者安装，打开fiddler，替换步骤如下。注意点https在实战的时候，替换不成功，请在研发环境使用http协议。

2.1.1 新增规则

点击新增规则按钮，如下：

2.1.2 复制地址

使用谷歌浏览器打开网页，按F12，打开调试工具，切换到网络窗口，选择js，右键点击复制地址，如下：

2.1.3 替换文件

把复制来的地址，粘贴到以下输入框中。

点击右侧按钮保存。

2.1.4 调整工具开启无缓存

到了这一步就可以，访问原有网页，打开调试工具，点击不缓存，找到要调试的js，找到要断点的行，设置断点，进行调试。

2.2 Nginx代理

在网上搜索下载nginx，解压到某个文件夹中。使用nginx代理对于vue有一个较大的好处，vue线上环境都是打包压缩版本，不利于调试，而代理后可以使用本地源码模式。

2.2.1 编辑要代理的配置规则

打开nginx.conf文件，进行匹配规则代理，例如把demoweb代理到本地，其它使用服务器上的服务，如下：

#user  nobody;
worker_processes  5;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    log_format  main '"$time_iso8601" "$remote_addr" "$remote_user" "$request" '
           '"$status" "$bytes_sent"  "$http_referer" '
           '"$http_user_agent" "$uri" "$http_x_forwarded_for" '
           '"$upstream_addr" "$upstream_cache_status" "$connection_requests" "$sent_http_cache_control" '
           '"rt=$request_time" "uct=$upstream_connect_time" "uht=$upstream_header_time" "urt=$upstream_response_time" ';

    #access_log  logs/access.log  main;

    sendfile        on;
    keepalive_timeout  65;
    
    gzip off;
    gzip_min_length 10k;
    gzip_buffers 16 64k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types text/plain text/css application/json application/javascript;
    gzip_vary on;
	
	#设置缓存目录
	proxy_buffering on;
	proxy_temp_path /nginx-time;
    proxy_buffer_size 512k;
    proxy_buffers 1000 80k;
	
	server {
        listen       9898;
        server_name  localhost1;

	
		
		location /demoweb/ {
			proxy_pass  http://127.0.0.1:8080/demoweb/;
		  
			proxy_set_header Host $host;   
			proxy_set_header X-Real-IP $remote_addr;   
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
			proxy_set_header REMOTE-HOST $remote_addr;  
        }

	

	
        location / {
		   proxy_pass 	http://10.1.1.0:8089;
		  
		   proxy_set_header Host $host;   
		   proxy_set_header X-Real-IP $remote_addr;   
		   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
		   proxy_set_header REMOTE-HOST $remote_addr;  
 		}
		 
		 
    }
}

2.2.2 访问服务

此时的访问服务，应该以nginx的IP和端口进行访问，比如 127.0.0.1:9898, 那么符合拦截转发规则的，都优先转到本地服务中，不匹配的会访问原服务器的资源。

3 总结

fiddler比较轻量，对于简单的前端js，推荐使用该方式，但是有多个文件要替换时候，需要逐一新增规则，比较累。
nginx代理替换比较强大，但需要本地起个nginx，并且要懂得编写匹配规则。nginx不仅可以代理前端，还可以代理后端。而且对于压缩打包的js，可以代理为源代码模式，优势大。